📜  Angular 2-模块

📅  最后修改于: 2020-10-28 05:05:41             🧑  作者: Mango


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的角度应用程序都需要BrowserModule。

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

一个模块由以下部分组成-

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

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

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