Angular 2 NgModule vs Angular 1 module

news/2023/12/9 17:31:32

一直想写关于 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 {}