appModule - Angular

初始 angular 小记,当默认创建新工程后,会发现项目默认工程层级结构中含有该类 app.module.ts

/*
  程序入口
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';// <-- NgModel lives here


@NgModule({
  /*
  * 输入
  * 本模块声明的组件模板需要的类所在的其它模块导入 BrowserModule 以获取浏览器特有的服务
  * 比如 DOM 渲染、无害化处理和位置（location）
  * */
  imports: [
    BrowserModule,
    FormsModule// 引入所需外部模块列表
  ],

  /*
  * 各种服务提供商
  * 服务的创建者并加入到全局服务列表中,可用于应用任何部分
  * */
  providers: [],

  /*
  * 声明
  * 该应用所拥有的组件
  * 声明本模块中拥有的视图类
  * Angular 有三种视图类:组件、指令和管道
  * */
  declarations: [
    AppComponent,
    HeroDetailComponent
  ],

  exports: [AppComponent],

  /*
  * 指定应用的主视图(根组件)
  * angular 创建并插入 index.html 宿主页面
  * 它是所有其它视图的宿主
  * 只有根模块才能设置 bootstrap 属性
  * */
  bootstrap: [AppComponent]
})
export class AppModule { }

imports 导入其它 module,从暴露的接口(Components、Directives、Pipes)中可在本 module 组件中调用,例如 CommonModule 即可 NgIf 或者 NgFor 等操作

providers 各个服务的供应商,服务的创建者并加入到全局服务列表中,指定应用程序的根级别需要使用的服务,可用于应用任何部分.

declarations 该应用所拥有的组件,声明本模块中拥有的视图类,Angular 有三种视图类:组件、指令和管道.模块内部Components/Directives/Pipes 的列表,声明该模块的内部成员

exports 是 declarations 的子集,用于其它模块的组件模板.用来控制将哪些内部成员属性暴露给外部使用.导入一个 module 并不意味会自动导入该模块内部,除非导入的该模块把内部导入的模块写到了 exports 中.

bootstrap 指定应用启动的主视图(根组件,即入口),angular 创建并插入 index.html 宿主页面,它是所有其它视图的宿主,只有根模块才能设置 bootstrap 属性.该属性一般情况只有 ng 自己使用,一般是 bootstrap 组件或路由组件,ng 会自动把 bootstrap 和路由组件放入其中,除非不通过路由动态将 component 加入到 dom 中,否则不会用的该属性.

 

 

也是刚开始学习,有什么问题还请大家多多指教!