开启英雄之旅

英雄教程（先在控制台CD进入路径）

第一步 编辑英雄信息

1.创建目录，工作区，ng new tour

2.进入该目录，运行一下未做修改的。cd tour ;ng serve --open

这两部得到应用的外壳

你使用 Angular CLI 创建了初始的应用结构。你学会了使用 Angular 组件来显示数据。
你使用双花括号插值表达式显示了应用标题。应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。

d:
cd Learn/Angular/tour
ng generate component heroes

3. 生成新组件，新组件拥有三个文件 类文件ts 模板文件html 样式文件css

4. 类模板中需要导入 Component以及ngoninit,并设置元数据

5. 添加 hero 属性：名字

6. 显示英雄 {{hero}}

7. 之后需要显示添加的组件

这里就在根组件的html中进行css元素选择器的绑定

8. 英雄是很多个的，也具有其他属性，所以创建一个英雄类。即ts文件

9. 将 Hero类导入进ts,并根据新增类将属性改回来，

10. 修改模板绑定，拥有用于显示名字以及id

    绑定表达式中的 [uppercase] 位于管道操作符（ | ）的右边，用来调用内置管道UppercasePipe`。 管道是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。

11. 编辑英雄名字，进行数据的双向绑定ngModel

    虽然ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。它属于一个可选模块 `[FormsModule]

12. 最后 每个组件都必须声明在（且只能声明在）一个 [NgModule]

你已经掌握了

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

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

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

• 你用 [ngModel](https://www.angular.cn/api/forms/NgModel) 指令实现了双向数据绑定。

• 你知道了 AppModule。

• 你把 [FormsModule](https://www.angular.cn/api/forms/FormsModule) 导入了 AppModule，以便 Angular 能识别并应用 [ngModel](https://www.angular.cn/api/forms/NgModel) 指令。

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