目录
使用 Angular CLI 创建了初始的应用结构。
学会了使用 Angular 组件来显示数据。
使用双花括号插值表达式显示了应用标题
使用 CLI 创建了第二个组件 HeroesComponent。
把 HeroesComponent 添加到了壳组件 AppComponent 中，以便显示它。
使用 UppercasePipe 来格式化英雄的名字。
用 ngModel 指令实现了双向数据绑定。
知道了 AppModule。
把 FormsModule 导入了 AppModule，以便 Angular 能识别并应用 ngModel 指令。
知道了把组件声明到 AppModule 是很重要的，并认识到 CLI 会自动帮你声明它。
英雄指南应用在一个主从视图中显示了英雄列表。
用户可以选择一个英雄，并查看该英雄的详情。
使用 *ngFor 显示了一个列表。
使用 *ngIf 来根据条件包含或排除了一段 HTML。
可以用 class 绑定来切换 CSS 的样式类。
angular
1、安装node.js，npm
2、安装angular cli,使用 Angular CLI 来创建项目、创建应用和库代码，并执行多种开发任务，比如测试、打包和发布
3、使用npm安装 npm install -g @angular/cli
4、创建工作区和初始应用 ng new my-app，ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值
Angular CLI 会安装必要的 Angular npm 包及其它依赖
将创建下列工作区和初始项目文件：
一个新的工作区，根目录名叫 my-app
一个初始的骨架应用项目，也叫 my-app（但位于 src 子目录下）
一个端到端测试项目（位于 e2e 子目录下）
相关的配置文件
5、启用开发服务器
cd my-app
ng serve --open
6、使用 Angular CLI 创建一个名为 heroes 的新组件 ng generate component heroes
1、CLI 创建了一个新的文件夹 src/app/heroes/，并生成了 HeroesComponent 的三个文件
import { Component, OnInit } from '@angular/core';
//要从 Angular 核心库中导入 Component 符号，并为组件类加上 @Component 装饰器
//@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据
@Component({
selector: 'app-heroes', // 组件的选择器（css元素选择器）
//CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。
templateUrl: './heroes.component.html', //组件模板文件的位置
styleUrls: ['./heroes.component.css'] //组件私有CSS样式表文件的位置
})
export class HeroesComponent implements OnInit {
constructor() { }
//ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方
//始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它
ngOnInit() {
}
}
7、使用 UppercasePipe 进行格式化
<h2>{{hero.name | uppercase}} Details</h2> 将其字母转换为大写
8、[(ngModel)] 是 Angular 的双向数据绑定语法，属于一个可选模块FormsModule，你必须自行添加此模块才能使用该指令
<input [(ngModel)]="hero.name" placeholder="name">
9、导入FormsModule
Angular需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。这些信息被称为元数据（metadata）。
有些元数据位于 @Component 装饰器中，你会把它加到组件类上。 另一些关键性的元数据位于 @NgModule 装饰器中。
最重要的 @NgModule 装饰器位于顶级类 AppModule 上
打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号
然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中
10、创建模拟（mock）的英雄数据
在 src/app/ 文件夹中创建一个名叫 mock-heroes.ts 的文件。 定义一个包含十个英雄的常量数组 HEROES，并导出它
11、使用 *ngFor 列出这些英雄，*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素
<li *ngFor="let hero of heroes">
<li> 就是 *ngFor 的宿主元素
heroes 就是来自 HeroesComponent 类的列表。
当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。
12、主从结构，添加 click 事件绑定
再往 <li> 元素上插入一句点击事件的绑定代码：<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
click 外面的圆括号会让 Angular 监听这个 <li> 元素的 click 事件。 当用户点击 <li> 时，Angular 就会执行表达式 onSelect(hero)
onSelect() 是 HeroesComponent 上的一个方法，你很快就要写它。 Angular 会把所点击的 <li> 上的 hero 对象传给它，这个 hero 也就是前面在 *ngFor 表达式中定义的那个
13、添加 click 事件处理器
把该组件的 hero 属性改名为 selectedHero，但不要为它赋值。 因为应用刚刚启动时并没有所选英雄
添加如下 onSelect() 方法，它会把模板中被点击的英雄赋值给组件的 selectedHero 属性
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;}
14、使用 *ngIf 隐藏空白的详情 <div *ngIf="selectedHero">
15、使用css给所选英雄添加样
Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。
只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了
[class.selected]="hero === selectedHero"
如果当前行的英雄和 selectedHero 相同，Angular 就会添加 CSS 类 selected，否则就会移除它
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
16、待续---