Angular6快速入门

安装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>