前面的话：最近空余时间在学 Angular 2，国庆节的时候看了官网的quickstart，还写了一篇文章，只是一个hello world demo。后面继续看了它的一个项目教程，刚开始还可以跟上，当后面就比较混乱了。的确，对于新手来讲，要了解一个框架还是比较麻烦的。所以停止项目，开始看看 angular 的整体框架是如何的，联系项目，分析下，慢慢来。
学习链接：中文官网
正文开始：
angular 应用：用带 angular 拓展语法的 HTML 写模板，用组件类管理这些模板，用服务添加应用逻辑，在模块中打包发布组件与服务。通过引导 根模块启动应用。 angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。
这几个名词很重要，贯穿angular应用开发。
angular 应用的 8个主要构造块：
模块modules
组件components
模板template
元数据metadata
数据绑定data binding
指令directive
服务services
依赖注入dependency injection
模块
angular 应用是模块化的，有自己的模块系统，叫做 angular 模块/NgModules。
到底模块是什么？在angular里模块化意味着什么？
angular 应用至少有一个模块（根模块），称为 AppModule。
大多数应用都有很多其它的 特性模块，它们由一组领域类、工作流、或紧密相关的功能聚合形成。
angular的所有模块都是一个带有 @NgModule 装饰器的类。
angular的模块是类！！！
装饰器是用来修饰JavaScript类的函数。负责把元数据附加到类上。
NgModule 是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。属性有：
declarations（声明）：本模块中拥有的视图类。angular 有三种视图类：组件、指令、管道。
exports：declarations的子集，可用于其它模块中的组件模板。
imports：本模块组件模板中需要由其他模板导出的类。
providers：服务的创建者。本模块把它们加入全局的服务表中，让他们在应用中的任何部分都可被访问到。
bootstrap：标识出应用的主视图（根组件）。只有根模块才可设置此属性。
下面是一个简单的根模块：
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// @NgModle 装饰器函数，接受一个对象，对象有几个属性
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
// AppComponent 的 export 语句导出，根模块不需要导出，其他组件不需导入根模块。
export class AppModule { }
</div>
引导根模块来启动应用。在 main.ts 文件中引导 AppModule：
// app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 从app.module 文件导入了 AppModule
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
</div>
此时，项目只有 app/app.module.ts 文件和 app/main.ts ，前者定义了应用的根模块，后者引用它来启动应用。
Angular 模块与JavaScript模块比较：
JavaScript的模块化是分文件导入的，各文件就是各模块。
Angular 模块（用 @NgModule 装饰的类）是Angular的基础特性。
JavaScript的模块系统管理一组JavaScript对象。
在JavaScript中，每个文件就是一个模块，该文件中定义的对象从属于该模块。通过 export 关键字，可以把它的某些对象声明为公开。别的模块可以使用 import 语句访问公开对象。
JavaScript的这个特性很有用。
export 关键字声明为公开，import 语句访问公开对象。
在 Angular 里这两种都会用到，从上面的两个个文件里，可以看到。
模块库
上面所说，Angular 用到了 JavaScript模块，所以它的JS模块就是库模块，JS文件库。
Angular 库的名字都以 @angular 前缀，可以使用 npm 包管理工具安装，并如上面的 import 语句可以访问它们中的对象。
这点很好理解，Angular 本来就是依托于JS实现的单页面框架，所以它本身还是需要丰富的JS库的。
比如，从 @angular/core 库导入 Component 装饰器：
import { Component } from '@angular/core';
使用JavaScript导入语句从Angular 库中导入 Angular 的某些模块。
import { BrowserModule } from '@angular/platform-browser';
在上面根模块的代码中，应用模块需要 BrowserModule 的某些素材，所以把它加入 @NgModule 元数据的 imports 中：
imports ：[ BrowserModule ];
我们看看基本的@angular库中有哪些JS模块：
common
compiler
core
forms
http
platform-browser
platform-browser-dynamic
router
upgrade
所以，我们同时使用 Angular 和 JavaScript的模块化系统。
这块的 imports 和 exports 比较混乱，可以自己梳理下。
组件
组件负责控制屏幕上的一小块地方，就是视图。
在类中定义组件的应用逻辑（被用来为视图提供支持）。组件通过一些由属性和方法组成的API与视图交互。
所以说组件是联系视图的。
前面的 export 关键字可以把模块中的类声明为公开的，然后 import 里实现访问。
类里面有许多属性和方法。
模板
通过组件自带的模板来定义视图。模板是以HTML形式存在的，它告诉 Angular 如何渲染组件（视图）。
看一个组件文件的模板：
// app/hero-list.component.html
<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>
</div>
模板看起来就是标准 HTML，它里面有一些非标准HTML的语法。*ngFor、{{hero.name}}、{click}、[hero] 和 <hero-derail> ，它们是 Angular 的模板语法。
所以说，Angular 是通过这种方式来处理 HTML的。
元数据
元数据告诉Angular如何处理一个类。
之前 export 的类里有一些方法和属性，但是怎么处理这个类？
只要把元数据附加到这个类，就意味着这个类是个组件。
在 TypeScript 中，我们用装饰器（decorator）来附加元数据。
分析下面的元数据：
// app/hero-list.component.ts
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}
</div>
@Component装饰器把紧随其后的类标记成了组件类。
在装饰器后面的类就会被转为组件类？
装饰器里的配置项：
moduleId：为与模块相关的URL提供基地址。
这个地址怎么使用的？
selector：CSS 选择器，它告诉 Angular 在父级HTML寻找一个标签，然后创建组件实例并插入标签中。
实现HTML的显示。
templateUrl：组件HTML模板的模块相对地址。
HTML模板的设置位置。
providers：数组，包含组件所依赖的服务所需要的依赖注入提供商。告诉Angular该组件的构造函数需要服务，组件可以从服务获取数据。
某些数据的传递通过服务进行，否则，其他的视图只能控制静态的展示。
@Component 里的元数据会告诉 Angular 如何取得你为组件设定的元数据。
模板、元数据和组件共同描绘出这个视图。
组件就是视图，模板提供HTML的结构性。
数据绑定
如果没有框架，那么一些都需要我们来做。把数据值推送到HTML控件，并把用户的反馈接收转换成动作和值更新显示，你可以使用jQuery来实现这个过程。
Angular 框架实现数据绑定，一种让模板各部分与组件的各部分相