Angular 2应用的8个主要构造块有哪些

前面的话：最近空余时间在学 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.tsimport { 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 { }

引导根模块来启动应用。在 main.ts 文件中引导 AppModule：