学习angular 1

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 自动生成了三个元数据属性：

1. selector— 组件的选择器（CSS 元素选择器）
2. templateUrl— 组件模板文件的位置。
3. 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>