Angular之app.module.ts

122 阅读3分钟

一、关于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 .

author - Time flows with lights