Angular 2 - 模块


Angular JS 中使用模块在应用程序中设置逻辑边界。因此,您可以将所有内容构建到单独的模块中,以分离应用程序的功能,而不是将所有内容都编码到一个应用程序中。让我们检查一下添加到演示应用程序中的代码。

在 Visual Studio 代码中,转到应用文件夹中的 app.module.ts 文件夹。这称为根模块类。

根模块类

以下代码将出现在app.module.ts文件中。

import { NgModule }      from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent }  from './app.component';  

@NgModule ({ 
   imports:      [ BrowserModule ], 
   declarations: [ AppComponent ], 
   bootstrap:    [ AppComponent ] 
}) 
export class AppModule { } 

让我们详细浏览一下代码的每一行。

  • import 语句用于从现有模块导入功能。因此,前 3 条语句用于将 NgModule、BrowserModule 和 AppComponent 模块导入到该模块中。

  • NgModule 装饰器用于稍后定义导入、声明和引导选项。

  • 默认情况下,任何基于 Web 的 Angular 应用程序都需要 BrowserModule。

  • bootstrap 选项告诉 Angular 在应用程序中引导哪个组件。

模块由以下部分组成 -

  • Bootstrap 数组- 用于告诉 Angular JS 需要加载哪些组件,以便可以在应用程序中访问其功能。将组件包含在引导数组中后,您需要声明它们,以便它们可以在 Angular JS 应用程序中的其他组件之间使用。

  • 导出数组- 用于导出组件、指令和管道,然后可以在其他模块中使用它们。

  • 导入数组- 就像导出数组一样,导入数组可用于从其他 Angular JS 模块导入功能。