Angular9 JS 模块与 NgMoudule 比较

2020-07-02 16:05 更新

JavaScript 和 Angular 都使用模块来组织代码,虽然它们的组织形式不同,但 Angular 的应用会同时依赖两者。

JavaScript 模块

在 JavaScript 中,模块是内含 JavaScript 代码的独立文件。要让其中的东西可用,你要写一个导出语句,通常会放在相应的代码之后,类似这样:

export class AppComponent { ... }

然后,当你在其它文件中需要这个文件的代码时,要像这样导入它:

import { AppComponent } from './app.component';

JavaScript 模块让你能为代码加上命名空间,防止因为全局变量而引起意外。

NgModules

NgModule 是一些带有 @NgModule 装饰器的类。@NgModule 装饰器的 imports 数组会告诉 Angular 哪些其它的 NgModule 是当前模块所需的。 imports 数组中的这些模块与 JavaScript 模块不同,它们都是 NgModule 而不是常规的 JavaScript 模块。 带有 @NgModule 装饰器的类通常会习惯性地放在单独的文件中,但单独的文件并不像 JavaScript 模块那样作为必要条件,而是因为它带有 @NgModule 装饰器及其元数据。

Angular CLI 生成的 AppModule 实际演示了这两种模块:

/* These are JavaScript import statements. Angular doesn’t know anything about these. */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


/* The @NgModule decorator lets Angular know that this is an NgModule. */
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [     /* These are NgModule imports. */
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

NgModule 类与 JavaScript 模块有下列关键性的不同:

  • NgModule 只绑定了可声明的类,这些可声明的类只是供 Angular 编译器用的。

  • 与 JavaScript 类把它所有的成员类都放在一个巨型文件中不同,你要把该模块的类列在它的 @NgModule.declarations 列表中。

  • NgModule 只能导出可声明的类。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。

  • 与 JavaScript 模块不同,NgModule 可以通过把服务提供者加到 @NgModule.providers 列表中,来用服务扩展整个应用。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号