Angular 2 是一个用 HTML 和 JavaScript 或者一个可以编译成 JavaScript 的语言（比如 Dart 或者 TypeScript ），来构建客户端应用的框架。该框架包括一系列库文件，有些是核心库，有些是可选库。
Angular 应用：
用带 Angular 扩展语法的 HTML 写 *模板 *， 用 *组件 *类管理这些模板，用 *服务 *添加应用逻辑， 并在 *模 块 *中打包发布组件与服务。然后，我们通过 *引导 **根模块 *来启动该应用。 Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互
overview2.png
一共8个构造快
模块 (Modules)
组件 (Components)
模板 (Templates)
元数据 (Metadata)
数据绑定 (Data Binding)
指令 (Directives)
服务 (Services)
依赖注入 (Dependency Injection)
简单理解下：
（1）模块（Modules）
每个 Angular 应用至少有一个模块（ *根模块 *），习惯上命名为 AppModule;
import{模块}管理一些导入的模块
export{模块}导出根模块
Angular 模块（无论是 根 模块还是 特性模块 ）都是一个带有 @NgModule 装饰器的类
@NgModule（装饰器函数）装一些属性
({
imports: [ BrowserModule ],//需要由其他模块导出的类
providers: [ Logger ],//服务的创建者，
declarations: [ AppComponent ],//声明
exports: [ AppComponent ],//声明的子集
bootstrap: [ AppComponent ]//根组件（只有根模块才能设置）相当于把bootstrap中样式添加到模块上
})
简单跟模块的例子
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
min.ts引导app.module.ts（根模块）
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Angular 库的名字带有@angular
JavaScript的import引入：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//从@angular模块core/platform-browser库中导入装饰器或者一些模块
angular和JavaScript模块是互相利用的
Angular 模块（一个用 @NgModule 装饰的类）是 Angular 的基础特性。
JavaScript 还有自己的模块系统，它用来管理一组 JavaScript 对象。 它和 Angular 的模块体系是完全不同而且完全无关的。
*在 JavaScript 中，每个 文件 就是一个模块，并且该文件中定义的所有对象都从属于那个模块。 通过 export 关键字，模块可以把它的某些对象声明为公开的。 别的 JavaScript 模块中可以使用 import 语句 来访问这些公开对象。
（2）组件（Components）
定义：负责控制屏幕一块地方，称为视图。我们在类中定义组件的应用逻辑 ( 它被用来为视图提供支持 ) 。 组件通过一些由属性和方法组成的 API 与视图交互。
例如， HeroListComponent 有一个 heroes 属性，它返回一个“英雄”数组，这个数组是由一个服务提供的。 HeroListComponent 还有一个 selectHero() 方法，当用户从列表中点选一个英雄时，就把它 / 她设置到 selectedHero 属性。
export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}
（3）模板（Templates）
我们通过组件的自带的 模板 来定义视图。模板以 HTML 形式存在，用来告诉 Angular 如何渲染组件 ( 视图 ) 。
HeroListComponent组件的一个模板例子
<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
<li *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero">
</hero-detail>虽然这个模板使用的是典型的 HTML 元素，比如 p标签和 h2标签，但它也能使用别的。比如 *ngFor 、 {{hero.name}} 、 (click) 、 [hero] 和 <hero-detail> 使用的就是 Angular 的 模板语法。
<hero-detail> 标签就是一个用来表示新组件 HeroDetailComponent 的自定义元素。竟如此和谐的出现在那些原生 HTML 元素中。 在同一个格局中，自定义组件和原生 HTML 融合得天衣无缝。
（4）元数据（Metadata）
元数据告诉 Angular 如何处理一个类。元数据附加个类，就相当于告诉angular；这个类是个组件。
模板、元数据和组件共同描绘出这个视图。
元数据例子：
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
moduleId： templateUrl 的模块相对加载提供基础。
selector：自定义标签。
templateUrl：标签内的模板。
providers：一个数组，包含此模板需要依赖的组件或指令。
数据绑定（Data binding）：数据绑定的语法有四种形式。每种形式都有一个方向——从 DOM 来、到 DOM 去、双向，就像图中的箭头所示意的。
（5）数据绑定（Data binding）
<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>
1.{{hero.name}} ：插值表达式：在li标签中显示了组件的 hero.name属性的值。
2.[hero]属性绑定：把父组件 HeroListComponent的 selectedHero的值传到子组件 HeroDetailComponent的 hero属性中。
**3.(click)事件绑定 **：当用户点击英雄的名字时，调用组件的 selectHero方法。
**4.双向数据绑定 **：这是很重要的第四种绑定形式，它在 ngModel指令这个单一标记中同时实现了属性绑定和事件绑定的功能。 范例：<input [(ngModel)]="hero.name">
（6）指令（Directives）
Angular 模板是 动态的 。当 Angular 渲染它们时，它会根据 指令 提供的操作指南对 DOM 进行修改。
组件是一个 带模板的指令。组件从技术角度看就是一个指令 ，但是组件非常独特，并在 Angular 中位于中心地位，所以在架构概览中，我们把组件从指令中独立了出来。
结构型指令 ：通过在 DOM 中添加、移除和替换元素来修改布局。
属性型指令： 修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的 HTML 属性，故名。
（7）服务（Services）
服务 分为很多种，包括：值、函数，以及应用所需的特性。
几乎任何东西都可以是一个服务。 典型的服务是一个类，具有专注的、良好定义的用途。它应该做一件具体的事情，把它做好。
这里是一个“服务”类的范例，用于把日志记录到浏览器的控制台：
app/Logger.services.ts
export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg:any) { console.warn(msg); }}
下面是 HeroService 类，用于获取英雄数据，并通过一个已解析的 承诺（ Promise ） 返回它们。 HeroService 还依赖于 Logger 服务和另一个用来处理服务器通讯工作的 BackendService 服务。
export class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger) { }
getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}
Angular 帮助我们 追随原则,它让我们能更轻易的把应用逻辑拆分到服务，并通过 依赖注入 来在组件中使用这些服务。
（8）依赖注入（Dependency Injection）
“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 也使用依赖注入提供我们需要的组件以及这些组件所需的服务。依赖注入渗透在整个 Angular 框架中，并且被到处使用。
例如：HeroListComponent组件的构造函数需要一个 HeroService
constructor(private service: HeroService) { }
当 Angular 创建组件时，会首先为组件所需的服务找一个 **注入器（ Injector ） **
注入器（ Injector ） 是本机制的核心。
注入器负责维护一个 容器 ，用于存放它创建过的服务实例。
注入器能使用 提供商 创建一个新的服务实例。
提供商 是一个用于创建服务的“配方”。
上边例子中注入 HeroService 之前，把一个叫 HeroService 的 提供商 Provider 到注入器。 提供商可以创建并返回服务，通常返回的就是这个“服务类”本身。
把提供商放到根模块上
providers: [BackendService,HeroService,Logger],
也可以在 @Component元数据中的 providers 属性中把它注册在组件层：
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
angular2还有很多其他重要的 Angular 特性和服务。
例如：
**动画 **：用 Angular 的动画库让组件动起来，而不需要对动画技术或 CSS 有深入的了解。
**变更检测 **：“变更检测”文档会告诉你 Angular 是如何决定组件的属性值变化和什么时候该更新到屏幕的。及它是如何用 zones 来拦截异步行为并执行变更检测策略。
**事件 **：“事件”文档会告诉你如何使用组件和服务触发支持发布和订阅的事件。
**表单 **：通过基于 HTML 的验证和脏检查机制支持复杂的数据输入场景。
HTTP：通过这个 HTTP 客户端，可以与服务器通讯，以获得数据、保存数据和触发服务端动作。
**生命周期钩子 **：通过实现生命周期钩子接口，可以切入组件生命中的几个关键点：从创建到销毁。
**管道 **：在模板中使用管道转换成可显示的值，以增强用户体验。比如这个 currency，管道表达式：price | currency:'USD':true 它把 "42.33" 显示为 $42.33 。
**路由器 **：在应用程序客户端导航，并且不离开浏览器。
Router: Navigate from page to page within the client application and never leave the browser.
**测试 **：使用 Angular 测试工具运行单元测试，在你的应用与 Angular 框架交互时进行测试。
网友评论