Angular 2 NgModule vs Angular 1 module

一直想写关于 Angular 1.x 与 Angular 2.x (Angular 4.x 已发布) 区别的文章，方便 Angular 1.x 的用户快速的过渡到 Angular 2.x。在浏览文章的时候，发现 Todd Motto 大神，已经写了相关的系列文章。英文好的同学，建议直接阅读 From angular.module to ngModule 原文哈，因为我并不打算完整地翻译。废话不多说，接下来我们开始进入正题。

Angular 1.x

Angular 1.x 在框架层面上大量依赖模块的支持，模块为我们提供了更好的方式去组织应用程序。

Root Module

在 Angular 1.x 应用程序启动的时候，它会启动入口文件通过 ng-app 指令声明的根组件。在 Angular 1.x 中我们通过 angular.module() API 来创建模块。 angular.module 的签名如下：

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>

Child Module

随着应用程序越来越庞大，考虑系统的可维护行和可扩展性，我们可以按功能对系统进行切割，划分出各个特性模块。即使用 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

Angular 2 在 RC5 中引入了 @NgModule 类装饰器，帮我们把应用组织成多个内聚的功能块。Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件、指令和管道，并把它们的一部分公开出去，以便外部组件使用它们。它可以向应用的依赖注入器中添加服务提供商。本章还会涉及到更多选项。

Angular 2 应用程序，是由组件构成，即整个应用程序是一颗组件树。接下来我们先来创建根组件，随后在创建根模块。

Root Component

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>

Child Component

定义 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 模块

Angular 2 NgModule vs Angular 1 module

目录

Angular 1.x

Root Module

Child Module

Angular 2

Root Component

Child Component

我有话说

阿宝哥

引用和评论

8.9W 播放量的 TS 动画版进阶教程合集来了！

使用 AI 在医疗影像分析中的应用探索

解决lodash由于依赖错误导致无法启动的问题

angular 新语法糖学习一

通过 AST 实现组件库替换升级

一个由于前端缺少 encodeURIComponent 引起的登录问题的分析和解决

Cocos-creator 实现简单触摸手势