JS模块 vs NgModule
前提条件
对 JavaScript/ECMAScript 模块 有基本的了解。
JavaScript 和 Angular 都使用模块来组织代码,虽然它们的组织形式不同,但 Angular 的应用会同时依赖两者。
JavaScript 模块
在 JavaScript 中,模块是内含 JavaScript 代码的独立文件。要让其中的东西可用,你要写一个导出语句,通常会放在相应的代码之后,类似这样:
content_copyexport class AppComponent { ... }
然后,当你在其它文件中需要这个文件的代码时,要像这样导入它:
content_copyimport { AppComponent } from './app.component';
JavaScript 模块让你能为代码加上命名空间,防止因为全局变量而引起意外。
NgModules
Angular CLI 生成的 AppModule
实际演示了这两种模块:
content_copy/* 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 模块有下列关键性的不同:
- Angular 模块只绑定了可声明的类,这些可声明的类只是供Angular 编译器用的。
- 与 JavaScript 类把它所有的成员类都放在一个巨型文件中不同,你要把该模块的类列在它的
@
NgModule.declarations
列表中。 - Angular 模块只能导出可声明的类。这可能是它自己拥有的也可能是从其它模块中导入的。它不会声明或导出任何其它类型的类。
- 与 JavaScript 模块不同,NgModule 可以通过把服务提供商加到
@
NgModule.providers
列表中,来用服务扩展整个应用。
关于 NgModule 的更多知识
要了解关于 NgModule 的更多知识,参见
本文档系腾讯云开发者社区成员共同维护,如有问题请联系 cloudcommunity@tencent.com