一直想写关于 Angular 1.x 与 Angular 2.x (Angular 4.x 已发布) 区别的文章，方便 Angular 1.x 的用户快速的过渡到 Angular 2.x。在浏览文章的时候，发现 Todd Motto 大神，已经写了相关的系列文章。英文好的同窗，建议直接阅读 From angular.module to ngModule 原文哈，由于我并不打算完整地翻译。废话很少说，接下来咱们开始进入正题。javascript
Angular 1.xhtml
Root Modulejava
Child Moduleweb
Angular 2typescript
Root Componentbootstrap
Child Componentapp
Angular 1.x 在框架层面上大量依赖模块的支持，模块为咱们提供了更好的方式去组织应用程序。框架
在 Angular 1.x 应用程序启动的时候，它会启动入口文件经过 ng-app 指令声明的根组件。在 Angular 1.x 中咱们经过 angular.module() API 来建立模块。 angular.module 的签名以下：ide
angular.module(name, [requires], [configFn]);
参数说明：函数
name: string - 建立或获取的模块名称
requires: [] (可选) - 设置该模块依赖的模块列表
configFn: Function (可选) - 用来配置模块
当调用 angular.module() 时，设置的参数个数大于1时，表示咱们想建立一个新的模块：
angular.module('app', []); // This is a setter
当调动 angular.module() 时，只传入一个参数，表示咱们想获取参数对应的模块：
angular.module('app'); // This is a getter
接下来咱们来建立根模块及App组件：
const AppComponent = {
template: `
<h1>Root Component</h1>
`
};
angular
.module('app', []) // 建立根模块
.component('app', AppComponent); // 建立App组件
为了引导 Angular 1.x 应用程序的启动，咱们必须在主入口文件(一般为index.html) 文件的 body 标签中添加 ng-app="app"。此外，在 body 标签内，还还须要初始化 AppComponent，即添加咱们的自定义指令 app 到 body 中。具体以下：
<body ng-app="app"> <app></app> </body>
随着应用程序愈来愈庞大，考虑系统的可维护行和可扩展性，咱们能够按功能对系统进行切割，划分出各个特性模块。即便用 angular.module() 定义出各个子模块。假设系统中有一个联系模块，咱们能够把该模块独立成子模块。具体以下：
const ContactsComponent = {
template: `
<h3>Contacts go here.</h3>
`
};
angular
.module('contacts', [])
.component('contacts', ContactsComponent);
建立完子模块，咱们须要在根模块中导入，才能保证系统能正常运行。具体以下：
angular
.module('app', ['contacts']) // 第二个参数：声明依赖的模块名称
.component('app', AppComponent); // 定义AppComponent组件
在根模块导入 contacts 模块后，咱们须要更新 AppComponent 组件中的模板，以包含 contacts 模块中建立的联系人组件：
const AppComponent = {
template: `
<h1>Root Component</h1>
<contacts></contacts>
`
};
angular
.module('app', ['contacts'])
.component('app', AppComponent);
Angular 2 在 RC5 中引入了 @NgModule 类装饰器，帮咱们把应用组织成多个内聚的功能块。Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。 它标记出该模块拥有的组件、指令和管道， 并把它们的一部分公开出去，以便外部组件使用它们。 它能够向应用的依赖注入器中添加服务提供商。 本章还会涉及到更多选项。
Angular 2 应用程序，是由组件构成，即整个应用程序是一颗组件树。接下来咱们先来建立根组件，随后在建立根模块。
app.component.ts
import { Component } from '@angular/core'; // 导入核心模块中的Component装饰器
@Component({ // 定义组件相关的metadata信息
selector: 'app', // 用于定义组件在HTML代码中匹配的标签
template: ` // 为组件指定一个内联的模板
<h1>Root Component</h1>
`
})
export class AppComponent {}
使用 @NgModule() 建立根组件：
app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
@NgModule({
imports: [BrowserModule], // 导入依赖的模块
bootstrap: [AppComponent], // 设置启动入口根组件
declarations: [AppComponent] // 声明AppComponent组件
})
export class AppModule {}
接下来建立 main.ts 文件：
main.ts
// main.ts
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
最后在主入口文件(一般为index.html) 文件，添加咱们建立的 app 自定义元素。
<body>
<app>
loading...
</app>
</body>
定义 contacts 子组件：
contact.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'contacts',
template: `
<h3>
Contacts go here.
</h3>
`
})
export class ContactsComponent { }
在 AppModule 组件导入 ContactsComponent 组件：
app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {ContactsComponent} from './contacts.component';
@NgModule({
imports: [BrowserModule],
bootstrap: [AppComponent],
declarations: [AppComponent, ContactsComponent]
})
export class AppModule {}
接下来更新 AppComponent 组件，应用咱们新建立的 ContactsComponent 组件：
import {Component} from '@angular/core';
@Component({
selector: 'app',
providers: [],
template: `
<h1>Root Component</h1>
<contacts></contacts>
`
})
export class AppComponent {}
1.在 Angular 2 中除了根模块以外还包含其它什么模块及模块还有哪些相关知识及注意事项？
在 Angular 2 中除了根模块(RootModule)以外，常见的还有共享模块(ShareModule)、核心模块(CoreModule) 、特性模块(FeatureModule) 等。
详细内容请参考 - Angular 模块