Angular 应用是模块化的，Angular 有自己的模块系统，叫做 Angular 模块 or NgModules。
模块
.每个 Angular 应用至少有一个模块——根模块，通常叫做 AppModule。
小规模的应用程序中也许只有一个根模块 ， 大多数应用有许多功能模块，每个耦合的代码块作用于程序域、工作流或是密切相关的功能。
一个Angular模块，无论是根还是功能性，都是一个 使用@NgModule修饰符的类。
修饰符（decorators ）是修改JavaScript类的功能函数。Angular有许多的修饰符，通过给类附加元数据可以知道这些类的的意义，它们如何工作。学习更多 关于网页元数据。
NgModule 是一个描述符函数，描述模块的单一元数据对象。最重要的属性是：
-
declarations - 属于这个模块的 视图类（view classes）。Angular 有三种视图类: components, directives, and pipes.
-
exports - 声明的一部分，对于其他模块的组件模板是可见和可用的。
-
imports - 声明这个模块的组件模版需要的、其他模块声明导出的类。
-
providers - 这个模块的服务创建器，是全局服务集合的一部分，可以被应用的任意部位访问到。
-
bootstrap - 主应用视图, 叫做 根组件（root component）, 承载其他的应用视图。 只有 根模块（root module） 需要设置此引导属性。
这里是一个简单根模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
看 export 属性 AppComponent 就展示了如何export; 这里仅举例，并不实际需要。根模块没有理由export任何东西，因为其他组件不需要import根模块。
通过引导一个根模块启动一个应用。开发中你可以在main.ts中引导AppModule，如下所示：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Angular 模块 对比 JavaScript 模块
The Angular module — 一个类修饰符使用@NgModule — 是 Angular 的基础功能。
JavaScript 同样也有自己的模块系统，管理Javascript对象集。这完全不同也和Angular 模块系统无关。
在 JavaScript 中， 每个 文件就是一个模块，所有定义在文件中的对象都属于模块。模块定义公有对象通过关键词export标记这些对象。其他的JavaScript模块使用 import statements来从其他模块访问这些共有对象。
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
export class AppModule { }
在网上学习更过关于Javascript模块系统的知识。
这是两种不同的和完整的模块系统，在应用中同时使用它们。
网友评论