Angular6快速入门

1. 安装Angular CLI命令行工具

   npm install -g @angular/cli

2.  创建新应用

   ng new angular-tour-of-heroes

3. 启动应用服务器

   cd angular-tour-of-heroes

   ng serve --open

4. Angular 组件

   组件是Angular应用中的基本构造模块，屏幕上显示数据、监听用户输入、根据输入执行相应的动作等都是靠组件来完成的。

   组件的三个基本实现文件：

   app.component.ts --组件的类代码，采用TS写的

   app.component.html --组件的模板，采用HTML写的

   app.component.css --组件的私有CSS样式

5. 创建英雄列表组件

   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数组中

6. 显示英雄列表

   *ngFor --Angular的复写指令，遍历数组中的数据。

   (click)绑定事件

   *ngIf 指令根据条件包含或排除一段HTML

   [class.cls] 根据条件绑定具体CSS类 cls

7. 主从组件

   @Input装饰器绑定的属性可以用来在父子组件之间进行数据绑定，从而实现父子组件之间的数据传 递
   

8. 服务

    服务 --用来在多个“互不知道的”类（组件）之间共享某些信息

    ng generate service hero --创建服务

   @Injectable() --通过给该装饰器添加元数据的形式，把某个服务注册到根注入器上

   ng generate service hero --module=app --在app上注册服务

   Observable(可观察数据) --Angular中一种异步机制

   Angular 只会绑定到组件的公共属性

9.  路由 

   AppRoutingModule --加载和配置路由，专注于路由功能

   ng generate module app-routing --flat --module=app

   典型的路由属性： path、component

   RouterModule.forRoot(routes) --通过routes来初始化路由

   <router-outlet></router-outlet> 

10.