Angular学习第一天

Angular学习第一天

第一天学习目标
1. 如何创建angular新工程
2. 什么是单向绑定
3. 什么是双向绑定
4. 双向绑定需要注意事项
5. 如何查看错误运行错误
6. 如何创建一个简单的导出类

打开命令行工具，输入

ng new user-managment

创建完成之后运行

npm install
ng server

此时已经运行，在浏览器中输入localhost:4200确认可以正常显示页面
使用Visual Studio Code打开新创建的user-managment
打开app.component.ts文件创建一个简单User类

export class User {
  id: number;
  name: string;
}

同时在AppCompent中创建一个User实例

title = '用户管理系统';
  user: User = {
    id: 1,
    name: '张三'
  };

打开app.component.html文件，输入

<div style="text-align:center">
  <h1>
    欢迎使用{{title}}!
  </h1>
</div>
<div>
  <label>
    序号:
  </label>
  {{user.id}}
</div>
<div>
  <label>名字</label>
  <input [(ngModel)]="user.name" placeholder="名字">
</div>

这里应该发现程序在浏览器并不能正确显示用户信息，这个是由于ngModel未找到定义，在chrome中打开调试页面并切换到控制台可查看更多的错误信息
在app.module.ts中

import { FormsModule } from '@angular/forms';

并在imports数组中添加FormsModule以使程序在运行时导入并初始化此模块

重新刷新浏览器应该正确运行。

通过一个简单例子再来回顾原定的目标
1. 如何创建angular新工程
ng new xxx来创建
2. 什么是单向绑定
单向指readonly，只用于数据的显示，标记符为{{var}}
3. 什么是双向绑定
双向指readwrite双模式，即用于数据的显示，如果显示部分做了修改也会更新变量，标记符为[(ngModel)]=”var”
4. 双向绑定需要注意事项
由于双向绑定使用了新的指令，所以需要程序指定使用哪个模块来解释和运行这个指令
5. 如何查看错误运行错误
使用浏览器的调试页面上来查看运行错误，在命令行输出窗口中查看编译错误
6. 如何创建一个简单的导出类
由于使用typescript来书写，所以只要使用

export class A {

}

来定义并做导出