How to Use AngularJS2

简介

用 Angular 扩展语法编写 HTML 模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件与服务。然后，我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

模块 (module)
组件 (component)
模板 (template)
元数据 (metadata)
数据绑定 (data binding)
指令 (directive)
服务 (service)
依赖注入 (dependency injection)

模块 (module)

Angular应用是模块化的，并且Angular有自己的模块 NgModules

Angular 模块（无论是根模块还是特性模块）都是一个带有@NgModule装饰器的类。

declarations - 声明本模块中拥有的视图类。 Angular 有三种视图类：组件、指令和管道。
exports - declarations 的子集，可用于其它模块的组件模板。
imports - 本模块声明的组件模板需要的类所在的其它模块。
providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
bootstrap - 表示这个应用一开始会加载这个组件到index页面中。

1 2	import { Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';

应用模块需要BrowserModule的某些素材。要访问这些素材，就得把它加入@NgModule元数据的imports中，就像这样

1	imports:[ BrowserModule ],

组件 (component)

组件负责控制屏幕上的一小块区域，我们称之为视图。

我们在类中定义组件的应用逻辑，为视图提供支持。组件通过一些由属性和方法组成的 API 与视图交互。

模板 (template)

我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。

元数据 (metadata)

元数据告诉 Angular 如何处理一个类。

在TypeScript 中，我们用装饰器 (decorator) 来附加元数据

@Component({
  moduleId: module.id,
  selector:    'hero-list',
  templateUrl: 'hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

@Component的配置项包括：

moduleId: 为与模块相关的 URL（例如templateUrl）提供基地址。
selector： CSS 选择器，它告诉 Angular 在父级 HTML 中查找标签，创建并插入该组件。例如，如果应用的 HTML 包含， Angular 就会把HeroListComponent的一个实例插入到这个标签中。
templateUrl：组件 HTML 模板的模块相对地址，如前所示。
providers - 组件所需服务的依赖注入提供商数组。这是在告诉 Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得英雄数据。

数据绑定 (data binding)

Angular 支持数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。

双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能.

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
<input [(ngModel)]="hero.name">

插值表达式在
标签中显示组件的hero.name属性的值。
[hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。
(click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。
在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

指令 (directive)

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。

指令是一个带有“指令元数据”的类。在 TypeScript 中，要通过@Directive装饰器把元数据附加到类上。

组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。

还有两种其它类型的指令：结构型指令和属性 (attribute) 型指令。

自定义指令

管道(pipes)

组件中另一个常用的功能是管道（pipes），通过在组件的元数据中指定 pipes，便可以在模板中使用它。管道的主要作用是用来格式化数据，通常这对于国际化很有用处

组件输出输入

一个组件可以指定输入或输出的属性，这是构成上文提到的组件自描述的因素之一。输入输出的属性可以使用属性修饰器（Property Decorator）@Input 和 @Output 来修饰。然后通过()和[]的语法来调用。

除了使用@Input和@Output修饰外，还可以在组件的元数据中使用 inputs、outputs 设置，设置的值必须为字符串数组，元素的名称需要和成员变量相对应。上述代码和以下代码是等价的：

组件生命周期

以下是组件的所有生命周期接口及对应的勾子方法，Angular 会按以下的顺序依次调用勾子方法：

OnChanges ngOnChanges 当且仅当组件输入数据变化时被调用，“输入数据”指的是通过@Input修饰器显式指定的那些数据。
OnInit 经常会使用 ngOnInit 获取数据，
DoCheck 用于变化检测，该勾子方法会在每次变化检测发生时被调用。
AfterContentInit
AfterContentChecked
AfterViewInit
AfterViewChecked
OnDestroy 不会被垃圾处理自动收集的资源应当在这个地方去释放，例如订阅了的观察者事件，绑定过的 DOM 事件，通过 setTimeout 或 setInterval 设置过的计时器等，都应当在 ngOnDestroy 中去注销、删除所有与该组件相关的回调。如果忽略这些的话，会导致一些意想不到的后果，并有可能导致内存泄漏。

组件数据监控

服务 (service)

服务是一个广义范畴，包括：值、函数，或应用所需的特性。

几乎任何东西都可以是一个服务。典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。

依赖注入 (dependency injection)

通常会把提供商添加到根模块上，以便在任何地方使用服务的同一个实例。

或者，也可以在@Component元数据中的providers属性中把它注册在组件层：

需要记住的关于依赖注入的要点是：

依赖注入渗透在整个 Angular 框架中，被到处使用。
注入器 (injector) 是本机制的核心。
注入器负责维护一个容器，用于存放它创建过的服务实例。
注入器能使用提供商创建一个新的服务实例。
提供商是一个用于创建服务的配方。
把提供商注册到注入器。

新建项目

Angular CLI 帮助开发者快速创建Angular 2项目和组件

安装配置

1
2
3

npm install -g typescript typings

npm install -g angular-cli

ng new project-name - 创建一个新项目，置为默认设置
ng build - 构建/编译应用
ng test - 运行单元测试
ng e2e - 运行端到端（end-to-end）测试
ng serve - 启动一个小型web服务器，用于托管应用
ng deploy - 即开即用，部署到Github Pages或者Firebase
 ``` 

generate 可用 g  替换

ng generate component my-comp - 生成一个新组件，同时生成其测试规格和相应的HTML/CSS文件
ng generate directive my-directive - 生成一个新指令
ng generate pipe my-pipe - 生成一个新管道
ng generate service my-service - 生成一个新服务
ng generate route my-route - 生成一个新路由
ng generate class my-class - 生成一个简易的模型类

开发入门

参考资料

How To ...

How To Use Angular2