安装Angular CLI命令行工具
npm install -g @angular/cli
创建新应用
ng new angular-tour-of-heroes
启动应用服务器
cd angular-tour-of-heroes
ng serve --open
Angular 组件
组件是Angular应用中的基本构造模块，屏幕上显示数据、监听用户输入、根据输入执行相应的动作等都是靠组件来完成的。
组件的三个基本实现文件：
app.component.ts --组件的类代码，采用TS写的
app.component.html --组件的模板，采用HTML写的
app.component.css --组件的私有CSS样式
创建英雄列表组件
ng generate component heroes
@Component --装饰器函数，用于为组件指定Angular所需的元数据。
selector --组件的选择器(CSS元素选择器) 此处为“app-heroes”，用来在父组件的模板中匹配HTML元素的名称，以识别出该组件，<app-heroes></app-heroes>
templateUrl --组件模板文件的位置
styleUrls --组件私有CSS样式表文件的位置
ngOnInit --生命周期钩子函数，可以用来放置一些初始化逻辑
[(ngModel)]实现数据的双向绑定
@NgModule装饰器在顶级类AppModule类中引入，包括declarations、imports、providers、bootstrap
采用ng命令创建组件时会把新创建的组件自动导入新组件的路径，并添加到declarations数组中
显示英雄列表
*ngFor --Angular的复写指令，遍历数组中的数据。
(click)绑定事件
*ngIf 指令根据条件包含或排除一段HTML
[class.cls] 根据条件绑定具体CSS类 cls
主从组件
@Input装饰器绑定的属性可以用来在父子组件之间进行数据绑定，从而实现父子组件之间的数据传 递
服务
服务 --用来在多个“互不知道的”类（组件）之间共享某些信息
ng generate service hero --创建服务
@Injectable() --通过给该装饰器添加元数据的形式，把某个服务注册到根注入器上
ng generate service hero --module=app --在app上注册服务
Observable(可观察数据) --Angular中一种异步机制
Angular 只会绑定到组件的公共属性
路由
AppRoutingModule --加载和配置路由，专注于路由功能
ng generate module app-routing --flat --module=app
典型的路由属性： path、component
RouterModule.forRoot(routes) --通过routes来初始化路由
<router-outlet></router-outlet>