AngularJS2.0 开发指南

经过前面的学习，基本了解了Angular2.0的使用，所有的Module都是一个Component，甚至一个事件响应也是一个Component，或者表单验证也可以是一个Component。

Angular的运作机制图

Angular2.0 API

添加Bootstrapping 组件

import {bootstrap} from 'angular2/angular2';

常见的模板语法

在Angular中 组件中的数据和Template中的表达式进行数据绑定，表达式可以是一个常量值 ，也可以是boolean表达式。

1. <input [value]="firstName"> 绑定组件中的value属性到input的表达式firstName。

2. <div [attr.role]="myAriaRole"> 绑定组件中对象的属性到html表达式myAriaRole

3. <div [class.extra-sparkle]="hero === selectedHero"> ----当hero === selectedHero表达式为真时使用样式extra-sparkle。

4. <div [style.width.px]="mySize"> 绑定样式的width属性到mysize（例如 10*20）表达式，单位是可选的。

5. <button (click)="readRainbow($event)"> 绑定click事件，readRainbow($event)是组件中事件处理函数，$event是传入参数。

6. <div title="Hello {{ponyName}}"> 将一个属性绑定到一个组件字符串变量 。

7. <p>Hello {{ponyName}}</p> 将文本内容绑定到一个组件字符串变量

8. <my-cmp [(title)]="name"> 设置双向数据绑定 相当于<my-cmp [title]="name" (titleChange)="name=$event">

9. <video #movieplayer ...><button (click)="movieplayer.play()"></video>
   创建一个本地变量movieplaye 用于接收当前模板中的数据绑定和事件绑定表达式中的视频元素实例

10. <p *myUnless="myExpression">...</p> *符号意味着将当前元素嵌入到模板myExpression中 ,等价于<template [myUnless]="myExpression"><p>...</p></template>

11. <p>Card No.: {{cardNumber | myCreditCardNumberFormatter}}</p> 将表达式cardNumber的值用myCreditCardNumberFormatter格式化

12. <p>Employer: {{employer?.companyName}}</p> "?"表示当employer没有定义或者为空时忽略。

内置指令

内置指令导入的方式：import {NgIf, ...} from 'angular2/common'

1. <section *ngIf="showSection"> 根据表达式showSection删除或重新创建一个DOM树section元素

2. <li *ngFor="#item of list"> 将li元素及其内容转为模板，并使用For循环显示列表中的每个项目。

3. switch指令

   <div [ngSwitch]="conditionExpression">
   <template [ngSwitchWhen]="case1Exp">...</template>
   <template ngSwitchWhen="case2LiteralString">...</template>
   <template ngSwitchDefault>...</template>
   </div>

   根据表达式conditionExpression来判断嵌入哪个模板

4. 选择样式指令

   <div [ngClass]="{active: isActive, disabled: isDisabled}">

   绑定一个存在的样式，右边map表达式运算结果例如这样{active: true, disabled: false}

表单指令

导入方式：import {FORM_DIRECTIVES} from 'angular2/common'

<input [(ngModel)]="userName"> 双向数据绑定。

类注解。

导入样式：import {Directive, ...} from 'angular2/core'

1. 注解当前类为一个组件

   @Component({...})
   class MyComponent() {}

2. 注解一个管道组件

   @Pipe({...})
   class MyPipe() {}

3. 注解一个Injectable组件,Injectable组件一般是服务类组件，单例模式。

   @Injectable()
   class MyService() {}

   组件配置

1.作用于组件视图范围 依赖注入的一组provider组件。

viewProviders: [MyService, provide(...)]

2.组件的内联模板/外部模板视图。

     template: 'Hello {{name}}'
     templateUrl: 'my-component.html'

3.内联CSS样式/外部样式表的URL列表。

     styles: ['.primary {color: red}']
     styleUrls: ['my-component.css']

4.配置组件模板中使用的指令列表。

directives: [MyDirective, MyComponent]

5.配置组件的管道组件列表

pipes: [MyPipe, OtherPipe]

用于指令和组件类字段修饰符

1. @Input() myProperty ：

   声明一个输入属性，属性是双向绑定

2. @Output() myEvent = new EventEmitter() ：

   声明一个输出属性，绑定一个触发事件。

3. @HostBinding('[class.valid]') isValid

   结合主元素的属性（例如CSS类有效）指令/组件的属性（如 isValid）。

4. @HostListener('click', ['$event']) onClick(e) {...}

   监听主元素事件（如单击事件）通过指令/组件的方法（如onclick），可以传递一个参数（$event）。

5. @ContentChild(myPredicate) myChildComponent

   绑定组件的内容查询的第一个结果（mypredicate）到类属性:mychildcomponent

6. @ContentChildren(myPredicate) myChildComponents

   绑定组件的所以查询内容（mypredicate）到类的mychildcomponent属性上。

7. @ViewChild(myPredicate) myChildComponent

   绑定组件的视图查询的第一个结果（mypredicate）到类的mychildcomponent属性上。（对指令无效）。

8. @ViewChildren(myPredicate) myChildComponents

   绑定组件的视图查询的所有结果（mypredicate）到类的mychildcomponent属性上。（对指令无效）。

指令和组件变化检测和生命周期钩

1. constructor(myService: MyService, ...) { ... }

   在任何其他生命周期钩前，该类构造函数被调用。用它来注入依赖关系，为了避免任何发生错误。

2. ngOnChanges(changeRecord) { ... }

   更改任何输入属性之后调用和在内容处理或者子视图之前调用

3. ngOnInit() { ... }

   构造函数之后调用，初始化输入属性时调用，调用一次ngOnChanges。

4. ngDoCheck() { ... }

   每次校验组件或者指令的输入属性是调用。使用它来执行一个自定义校验来扩展更改默认校验。

5. ngAfterContentInit() { ... }

   当组件或指令的内容已经被初始化ngOnInit后调用。

6. ngAfterContentChecked() { ... }

   当组件或指令的内容校验后调用

7. ngAfterViewInit() { ... }

   当组件的视图已初始化,ngaftercontentinit方法后调用。仅适用于组件。

8. ngAfterViewChecked() { ... }

   当组件的视图校验完成后调用。仅适用于组件。

9. ngOnDestroy() { ... }

   在组件销毁之前调用一次。

依赖注入配置

1. provide(MyService, {useClass: MyMockService})

   设置或用Class类型的组件MyMockService重写MyService类的provide配置。

2. provide(MyService, {useFactory: myFactory})

   设置或用Factory模式的组件myFactory重写MyService的provide配置。

3. provide(MyValue, {useValue: 41})

   设置或MyValue设置值为41。

路由与导航

指令导入方式：

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';

1. 路由配置格式：

   @RouteConfig([
   { path: '/:myParam', component: MyComponent, as: 'MyCmp' },
   { path: '/staticPath', component: ..., as: ...},
   { path: '/*wildCardParam', component: ..., as: ...}
   ])
   class MyComponent() {}

   配置组件的路由。支持静态配置，参数配置，和通配符的路由配置。

2. <router-outlet></router-outlet>

   使用当前组件激活的路由

3. <a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">

   创建一个链接到一个不同的视图的，视图是基于路由指令组成的路由名称和可选参数。路由名称与配置路由的属性相匹配。以"/"为前缀表示从根路由访问，以"./"为前缀表示从子路由访问。

4. @CanActivate(() => { ... })class MyComponent() {}

   在组件装饰中，定义一个函数，该函数用于向路由器确定是否应该激活该组件。返回一个布尔值或一个承诺。

5. routerOnActivate(nextInstruction, prevInstruction) { ... }

   在访问到一个组件时，路由器调用组件的routerOnActivate方法（如果定义了）。

6. routerCanReuse(nextInstruction, prevInstruction) { ... }

   路由器调用一个组件的routerCanReuse方法（如果定义了）来确定是否使用实例或销毁它并创建一个新的实例。应该返回一个布尔值或一个承诺。

7. routerCanDeactivate(nextInstruction, prevInstruction) { ... }

   路由器调用每个组件的routerCanDeactivate方法（如果定义了），访问后将移除。如果所有这些方法返回的是true或者承诺，则表示访问已被处理。

8. routerOnDeactivate(nextInstruction, prevInstruction) { ... }

   在该指令被删除作为路由改变的结果之前调用。可能会返回一个承诺，暂停删除指令，直到承诺解决。