Angular 2 应用程序应用主要由以下 8 个部分组成

1. 模块 (Modules)
2. 组件 (Components)
3. 模板 (Templates)
4. 元数据 (Metadata)
5. 数据绑定 (Data Binding)
6. 指令 (Directives)
7. 服务 (Services)
8. 依赖注入 (Dependency Injection)

下图展示了每个部分是如何相互工作的

图中

1. 模板 (Templates)是由 Angular 扩展的 HTML 语法组成

2. 组件 (Components)类用来管理这些模板

3. 应用逻辑部分通过服务 (Services)来完成，然后在模块中打包服务与组件， 最后通过引导根模块来启动应用

模块

模块由一块代码组成，可用于执行一个简单的任务

Angular 2 应用是由模块化的，它有自己的模块系统 NgModules

每个 Angular 2 应该至少要有一个根模块，一般可以命名为 AppModule

Angular 2 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象

Angular 2 模块几个重要的属性

1. declarations （声明）

   声明视图类属于这个模块

   Angular 有三种类型的视图类： 组件 、 指令 和 管道

2. exports

   声明（ declaration ）的子集，可用于其它模块中的组件模板

3. imports

   本模块组件模板中需要由其它导出类的模块

4. providers

   服务的创建者

   本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到

5. bootstrap

   应用的主视图，称为根组件，它是所有其它应用视图的宿主

   只有根模块需要设置 bootstrap 属性中

下面的代码创建了一个最简单的根模块

app/app.module.ts

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 { }

接下来我们通过引导根模块来启动应用

AngularJS 2 应用一般在 main.ts 文件中来引导 AppModule

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);