Angular学习第一天
第一天学习目标
- 如何创建angular新工程
- 什么是单向绑定
- 什么是双向绑定
- 双向绑定需要注意事项
- 如何查看错误运行错误
- 如何创建一个简单的导出类
打开命令行工具，输入
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以使程序在运行时导入并初始化此模块
重新刷新浏览器应该正确运行。
通过一个简单例子再来回顾原定的目标
- 如何创建angular新工程
ng new xxx来创建 - 什么是单向绑定
单向指readonly，只用于数据的显示，标记符为{{var}} - 什么是双向绑定
双向指readwrite双模式，即用于数据的显示，如果显示部分做了修改也会更新变量，标记符为[(ngModel)]="var" - 双向绑定需要注意事项
由于双向绑定使用了新的指令，所以需要程序指定使用哪个模块来解释和运行这个指令 - 如何查看错误运行错误
使用浏览器的调试页面上来查看运行错误，在命令行输出窗口中查看编译错误 - 如何创建一个简单的导出类
由于使用typescript来书写，所以只要使用
export class A {
}
来定义并做导出
