1. 创建新的工作区和一个初始应用
ng new angular-tour-of-heroes
/*
要想创建一个新的工作区和一个初始应用项目，需要：
1. 确保你现在没有位于 Angular 工作区的文件夹中。例如，如果你之前已经创建过 "快速上手" 工作区，请回到其父目录中。
2. 运行 CLI 命令 ng new，空间名请使用 angular-tour-of-heroes
3. ng new 命令会提示你输入要在初始应用项目中包含哪些特性，请按 Enter 或 Return 键接受其默认值。
一个最初的骨架应用项目，位于 src/app 子目录下。
*/
2. 启动应用服务器
使用顺手的开发工具（推荐VS CODE）打开项目目录，在命令行上输入：
npm start
/*
如果开发工具中使用ng命令出现如下信息：
ng : 无法加载文件 C:\Program Files\nodejs\ng.ps1。未对文件 C:\Program Files\nodejs\ng.ps1 进行数字签名。无法在当前系统上运行该脚本。
解决方案：
通过管理员权限打开 power shell
输入：set-executionpolicy remotesigned
输入：Y
*/
3. 结构介绍
你会在这里看到 AppComponent 壳的三个实现文件：
a. app.component.ts — 组件的类代码，这是用 TypeScript 写的。
b. app.component.html — 组件的模板，这是用 HTML 写的。
c. app.component.css — 组件的私有 CSS 样式。
d. src/styles.css — 全局样式
5. 创建 HeroesComponent 新组建
cd src/app（这里根据目录分层指定）
ng generate c heroes
/* CLI 创建了一个新的文件夹 src/app/heroes/，并生成了 HeroesComponent 的四个文件。 */
打开：app/heroes/heroes.component.ts
/*
@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。
CLI 自动生成了三个元数据属性：
1. selector — 组件的选择器（CSS 元素选择器）
2. templateUrl — 组件模板文件的位置。
3. styleUrls — 组件私有 CSS 样式表文件的位置。
5. ngOnInit() 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit()。这里是放置初始化逻辑的好地方。
6. 始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。
*/
创建 service.ts 文件
ng generate s heroes
6. 显示 HeroesComponent 组建
在 app.component.html 中增加：
<app-heroes></app-heroes>
/* app-heroes 就是 HeroesComponent 的 元素选择器。 */
7. 新建类的使用
a. 创建 Hero 类
/* 在 src/app 文件夹中为 Hero 类创建一个文件，并添加 id 和 name 属性。 */
[ src/app/hero.ts ]
export interface Hero {
id: number;
name: string;
}
b. 回到 HeroesComponent 类，并且导入这个 Hero 类。
[ src/app/heroes/heroes.component.ts ]
import { Component, OnInit } from '@angular/core';
新增：
import { Hero } from '../hero';
c. 初始化Hero类。进行赋值。
[ src/app/heroes/heroes.component.ts ]
export class HeroesComponent implements OnInit {
/* 新增 */
hero: Hero = {
id: 1,
name: 'Windstorm'
};
constructor() { }
ngOnInit(): void {
}
}
d. 显示 hero 对象
[ heroes.component.html ]
<h2>{{hero.name}} Details</h2>
<div><span>id: </span>{{hero.id}}</div>
<div><span>name: </span>{{hero.name}}</div>
8. 双向绑定
[ src/app/heroes/heroes.component.html ]
<div>
<label for="name">Hero name: </label>
<input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>
/* [(ngModel)] 是 Angular 的双向数据绑定语法。 */
/* 注意，当你加上 [(ngModel)] 之后这个应用无法工作了。 */
打开浏览器的开发工具，就会在控制台中看到如下信息：
Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.
/*
虽然 ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。
它属于一个可选模块 FormsModule，你必须自行添加此模块才能使用该指令。
*/
AppModule
/*
Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。 这些信息被称为元数据（metadata）。
有些元数据位于 @Component 装饰器中，你会把它加到组件类上。 另一些关键性的元数据位于 @NgModule 装饰器中。
最重要的 @NgModule 装饰器位于顶层类 AppModule 上。
Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。 这里也就是你要添加 FormsModule 的地方。
*/
导入 FormsModule
/* 打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。 */
[ app.module.ts ]
import { FormsModule } from '@angular/forms';
/* 然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中，这里是该应用所需外部模块的列表。 */
imports: [
BrowserModule,
FormsModule
],
/*
声明 HeroesComponent
每个组件都必须声明在（且只能声明在）一个 NgModule 中。
你没有声明过 HeroesComponent，可为什么本应用却正常呢？
这是因为 Angular CLI 在生成 HeroesComponent 组件的时候就自动把它加到了 AppModule 中。
打开 src/app/app.module.ts 你就会发现 HeroesComponent 已经在顶部导入过了。
*/