Angular上手学习笔记

1.安装node.js：下载地址：http://nodejs.cn/download/

2.安装angular：npm install -g @angular/cli

3.创建angular应用：ng new angular-tour-of-heroes

4.进入应用：cd angular-tour-of-heroes

5.启动应用服务：ng serve --open

 

 

英雄编辑器

 

• 你使用 CLI 创建了第二个组件 HeroesComponent。

• 你把 HeroesComponent 添加到了壳组件 AppComponent 中，以便显示它。

• 你使用 UppercasePipe 来格式化英雄的名字。

• 你用 ngModel 指令实现了双向数据绑定。

• 你知道了 AppModule。

• 你把 FormsModule 导入了 AppModule，以便 Angular 能识别并应用 ngModel 指令。

• 你知道了把组件声明到 AppModule 是很重要的，并认识到 CLI 会自动帮你声明它。

 

显示英雄列表

 

• 英雄指南应用在一个主从视图中显示了英雄列表。

• 用户可以选择一个英雄，并查看该英雄的详情。

• 你使用 *ngFor 显示了一个列表。

• 你使用 *ngIf 来根据条件包含或排除了一段 HTML。

• 你可以用 class 绑定来切换 CSS 的样式类。

主从组件

• 你创建了一个独立的、可复用的 HeroDetailComponent组件。

• 你用属性绑定语法来让父组件HeroesComponent可以控制子组件HeroDetailComponent。

• 你用@Input 装饰器来让hero属性可以在外部的HeroesComponent中绑定。

 

• 英雄指南应用在一个主从视图中显示了英雄列表。

• 用户可以选择一个英雄，并查看该英雄的详情。

• 你使用 *ngFor 显示了一个列表。

• 你使用 *ngIf 来根据条件包含或排除了一段 HTML。

• 你可以用 class 绑定来切换 CSS 的样式类。

转载于:https://www.cnblogs.com/malcolmfeng/p/9762064.html