一、关于app.module.ts文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
/** 声明属于本NgModule的组件、指令、管道 */
declarations: [
AppComponent
],
/** 能在其它模块的组件模板中使用的可声明对象的子集 */
exports: [],
/** 导出了本模块中的组件模板所需的类的其它模块 */
imports: [
BrowserModule
],
/**
* 本模块向全局服务中贡献的那些服务的创建器。
* 这些服务能被本应用中的任何部分使用。(也可以在组价级别指定服务提供者)
*/
providers: [],
/**
* 应用的主视图,称为根组件。它是应用中所有其它视图的宿主。
* 只有根模块才应该设置这个bootstrap属性。
*/
bootstrap: [AppComponent]
})
export class AppModule {}
二、如何理解NgModule
1. NgModule简介
Angualr应用是模块化的,它拥有自己的模块化系统。称作ngModule。一个ngModule就是一个容器,用于存放一些内聚的代码块。这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。它可以包含一些组件、服务提供者或者其他代码文件,其作用域由包含它的ngModule定义。
它还可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它的NgModule使用。 每个Angular应用都至少有一个NgModule类,也就是根模块。它习惯上命名为AppModule,并位于一个名为app.module.ts的文件中。引导这个根模块就可以启动我们的应用。
虽然小型的应用可能只有一个NgModule,不过大多数应用都会有很多的特性模块。 应用的根模块之所以叫根模块,是因为它可以包含任意深度的层次化子模块。
2. @NgModule元数据
NgModule是一个带有@NgModule装饰器的类。
@NgModule()装饰器是一个函数,它接受一个元数据对象,该对象的属性用来描述这个模块。
3. NgModule和组件
NgModule为其中的组件提供了一个编译上下文环境。根模块总会有一个根组件,并在引导期间创建它。但是任何模块都能包含任意数量的其他组件,这些组件可以通过路由器加载,也可以通过模板创建。那些属于这个NgModule的组件会共享同一个编译上下文环境。
组件及其模板共同定义视图。组件还可以包含视图层次结构,它能让我们定义任意复杂的屏幕区域,可以将其作为一个整体进行创建、修改和销毁。一个视图层次结构中可以混合使用由不同NgModule中的组件定义的视图。这种情况非常常见,特别是对于一些UI库来说。
当我们创建一个组件时,它会直接与一个叫做宿主视图的视图关联起来。宿主视图可以是一个视图层次结构的根,该视图层次结构可以包含一些内嵌式图,这些内嵌视图又是其它组件的宿主视图。这些组件可以来自相同的一个NgModule,也可以从其它的NgModule中导入,树中的视图可以嵌套到任意深度。
注意:视图这种层次结构是Angular在DOM和应用数据中检测与响应变更时的关键因素。
4.NgModule与JavaScript模块
信念
Hold The Faith . Forever !
We can find a way .
Someday ,
A path to a new world .
And maybe ,
Maybe its just the begnning after all .