Angular4-学习笔记-1-迈出第一步
学习资料来自 Angular.cn 与 Angular.io。
虽然官方文档很全面，但小镭觉得官方文档写的很杂乱，重复的内容很多。小镭没有到 Github 上细看，估计是很多人分别写不同的部分最后汇总起来的。
该笔记将对官方文档中的教程、指南、烹饪书等诸多内容按照小镭自己的思路和学习路线重新进行整理，分享给每一个希望自学 Angular 的朋友。
Angular 与 AngularJS 的差别非常大，无论是语法还是编写方式。怪不得名字改了，让小镭感觉完全是两个东西。
重新学吧 ! Angular 值得我们这样做，因为它非常好用。
快速起步
Angular 应用由组件（components）组成。
组件包含：
- HTML 模版（template）
- 组件类（component class）
组件类控制视图。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
每个组件都以 @Component 装饰器函数（decorator function）开始，它接受一个元数据对象（metadata object）参数。该元数据对象描述了 HTML 模板和组件类是如何一起工作的。
上例说明：
-
@Component({...})中的{}为元数据对象参数 -
selector属性为 Angular 指定了在index.html中的自定义<my-app>标签里显示该组件 -
template属性定义了<h1>标题里的一条消息 -
{{name}}为插值绑定表达式（interpolation binding expression）
有关插值绑定表达式的更多知识见 显示数据
页面样例：index.html
<body>
<my-app>Loading AppComponent content here ...</my-app>
<body>
Angular 使用 TypeScript（基于效率考虑）。也可以使用 JavaScript，见指南。
教程: 英雄指南
英雄编辑器
该部分的在线例子。
准备工作-本地环境搭建
参看页面 搭建本地开发环境 并按照步骤操作即可。
安装完种子包后，可参考 搭建剖析 了解文件夹内各个文件的用途。
开始
小镭直接利用上述种子包文件开始构建项目。
保持应用不断转译和运行
在命令行窗口中输入：
npm start
该命令用途:
- 在"监听"模式下运行编译器
- 启动开发服务器
- 在浏览器中启动应用
- 使应用在后续构建过程中能够持续运行
显示英雄
小镭的本地环境无法正常工作，应用未成功加载，<my-app> 内容未更新。
浏览器 Console 报错如下：
Error: (SystemJS) Block-scoped declarations
(let, const, function, class) not yet supported outside strict mode
看来是 systemjs-angular-loader.js 文件出了问题。
在该文件首行加入如下代码：
"use strict";
OK，问题解决。不过浏览器 Console 又有提示：
Angular is running in the development mode.
Call enableProdMode() to enable the production mode.
说明开发模式和生产模式是通过 enableProdMode() 方法来控制切换的。
那么如何使用这个方法呢？教程中居然没有顺带提一句，唉……
其实我们只需要在 main.ts 中使用它就可以了，代码如下：
import {enableProdMode} from '@angular/core';
enableProdMode();
此处使用该方法前一定要先 import 它，就像 platformBrowserDynamic() 方法一样。
注意，上述代码要放在 platformBrowserDynamic() 方法前使用，否则会报错：
Error: (SystemJS) Cannot enable prod mode after platform setup.
OK，现在已经知道如何切换工作模式了，现阶段还是使用开发模式吧。
Hero 对象
此处需要注意的是代码的位置。
如果 Hero 类插在了 @Component 与 AppComponent 的中间，则会报错：
Error: (SystemJS) Unexpected value 'AppComponent' declared by the module 'AppModule'.
Please add a @Pipe/@Directive/@Component annotation.
@Component 与 AppComponent 一定要连起来写。所以应该先读一下 API 手册中的相关内容了解语法规则。
使用多行模板字符串添加更多 HTML
使用反引号``的模板字符串（也称做——模板字面量，Template literals）。
样例 app.component.ts (AppComponent's template)
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>
`
编辑英雄名字
双向绑定
1. 修改 app.module.ts 文件，导入 FormsModule 包：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
FormsModule // <-- import the FormsModule before binding with [(ngModel)]
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
FormsModule 包中包含了 ngModel 指令，它用于双向绑定。
2. 更新模版
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
该部分的在线例子链接。
主从结构
该部分的在线例子。
*ngFor 语法
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
事件绑定例句
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
...
</li>
*ngIf 语法
<div *ngIf="selectedHero">
...
</div>
属性绑定语法
[class.selected]="hero === selectedHero"
更多信息见模板语法。
多个组件
把主从结构的页面重构成多个组件。每个子组件只聚焦在一个特定的任务或工作流上。 最后，AppComponent 将会变成一个简单的壳，用来作为那些子组件的宿主。
该部分重点是理解思想和概念。
该部分的在线例子。
文件名和组件名遵循风格指南中的标准方式。
- 组件的类名应该是大驼峰形式，并且以
Component结尾：HeroDetailComponent - 组件的文件名应该是小写中线形式，并且以
.component.ts结尾：hero-detail.component.ts
命名约定：词汇表-中线命名法。
也称为烤串命名法（kebab-case）。通常用于指令的选择器和文件名。
Angular风格指南建议每个文件中只有一个类。
输入属性与目标属性，参考属性型指令相关内容。
@Input()装饰器用来表明输入属性。更多信息参考属性型指令相关内容。
每个组件都必须在一个（且只有一个）Angular 模块中声明。
样例 src/app/app.module.ts
import { HeroDetailComponent } from './hero-detail.component';
更多知识，参见 Angular 模块页。
服务
该部分的在线例子。
使用单独的服务可以保持组件精简，使其集中精力为视图提供支持，并且，借助模拟（Mock）服务，可以更容易的对组件进行单元测试。
@Injectable() 装饰器。注意不要忘记括号，否则会导致一个很难诊断的错误。
无论是出于提高统一性还是减少变更的目的， 都应该从一开始就加上
@Injectable()装饰器。
术语：Method stub，方法存根
注入服务
- 添加一个构造函数，并定义一个私有属性。
- 添加组件的
providers元数据。
更多信息见依赖注入
注意构造函数的功能，它的作用是简单的初始化工作，不要把复杂的逻辑放在构造函数中。
ngOnInit 生命周期钩子
Angular提供了一些接口，用来介入组件生命周期的几个关键时间点：刚创建时、每次变化时，以及最终被销毁时。
import { OnInit } from '@angular/core';
export class AppComponent implements OnInit {
ngOnInit(): void {
}
}
更多信息见生命周期钩子
异步服务与承诺
样例 src/app/hero.service.ts
getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES);
}
样例 src/app/app.component.ts
getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
慢
模拟慢速连接，可以据此观察应用在网络较差情况下的表现。
getHeroesSlowly(): Promise<Hero[]> {
return new Promise(resolve => {
// Simulate server latency with 2 second delay
setTimeout(() => resolve(this.getHeroes()), 2000);
});
}
总结
教程就暂时进行到这里。
教程里的路由这一章内容较多，小镭决定先通过官方文档把目前接触到的知识详细地看一遍，深刻理解后再继续。
