Angular 2 NgModule vs Angular 1 module

時間 2019-11-06

標籤 angular ngmodule module 欄目 AngularJS 简体版

原文原文鏈接

一直想寫關於 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.x

Angular 1.x 在框架層面上大量依賴模塊的支持，模塊爲咱們提供了更好的方式去組織應用程序。框架

Root Module

在 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>

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