angular-cli
使用 CLI 命令创建一个名叫 angular-tour-of-heroes 的新项目。
ng new angular-tour-of-heroes
ng serve命令会构建本应用、启动开发服务器、监听源文件，并且当那些文件发生变化时重新构建本应用。
--open标志会打开浏览器，并访问http://localhost:4200/。
使用 Angular CLI 创建一个名为 heroes 的新组件。
ng generate component heroes
ps: 可以简写为ng g c heroes
你要从 Angular 核心库中导入 Component 符号，并为组件类加上 @Component装饰器。
@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。>
CLI 自动生成了三个元数据属性：
selector— 组件的选择器（CSS 元素选择器）templateUrl— 组件模板文件的位置。styleUrls— 组件私有 CSS 样式表文件的位置。CSS 元素选择器app-heroes用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。
ngOnInit是一个生命周期钩子，Angular 在创建完组件后很快就会调用ngOnInit。这里是放置初始化逻辑的好地方。
始终要
export这个组件类，以便在其它地方（比如AppModule）导入它。
管道
使用
UppercasePipe进行格式化
<h2>{{ hero.name | uppercase }} Details</h2>
绑定表达式中的 uppercase 位于管道操作符（ | ）的右边，用来调用内置管道UppercasePipe。
双向绑定
<div> <label>name: <input [(ngModel)]="hero.name" placeholder="name"> </label> </div>
[(ngModel)] 是 Angular 的双向数据绑定语法。
这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以双向流动：从 hero.name 属性流动到 textbox，并且从 textbox 流回到 hero.name 。
虽然 ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。
它属于一个可选模块 FormsModule，你必须自行添加此模块才能使用该指令。
列表渲染
<li *ngFor="let hero of heroes">
*ngFor是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。
在这个例子中
<li>就是*ngFor的宿主元素heroes就是来自HeroesComponent类的列表。- 当依次遍历这个列表时，
hero会为每个迭代保存当前的英雄对象。
不要忘了ngFor前面的星号（*），它是该语法中的关键部分。
事件绑定
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
这是 Angular 事件绑定 语法的例子。
click外面的圆括号会让 Angular 监听这个<li>元素的click事件。 当用户点击<li>时，Angular 就会执行表达式onSelect(hero)。
onSelect()是HeroesComponent上的一个方法，你很快就要写它。 Angular 会把所点击的<li>上的hero对象传给它，这个hero也就是以前在*ngFor表达式中定义的那个。
条件渲染 *ngIf
<div *ngIf="boolean">
ps: 不要忘了 ngIf 前面的星号（*），它是该语法中的关键部分。
Class 绑定
Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把
[class.some-css-class]="some-condition"添加到你要施加样式的元素上就可以了。
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
