1.app.module.ts的構成
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginPageComponent } from './pages/login-page/login-page.component';
import { VersionStatusPipe } from './pipe/version-status.pipe';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { SocketCntService } from './services/api/socket-cnt.service';
@NgModule({ //装饰器
declarations: [ //声明组件、指令和管道
AppComponent,
LoginPageComponent,
VersionStatusPipe,
],
imports: [ //需要的模块
BrowserModule, //浏览器模块
NgZorroAntdModule,
],
providers: [ //声明模块中提供了什么服务
SocketCntService,
],
bootstrap: [AppComponent] //声明模块的组组件是什么
})
export class AppModule { } //类
import语句后,@NgModule可以看到一个装饰器修饰的类。
@NgModule装饰器将AppModule标记为Angular模块类,@NgModule接受一个元数据对象,告诉Angular如何编译和启动应用
import: BrowserModule,每个在浏览器运行应用都需要他。
declarations: 应用唯一组件
boostrap:根组件,Angular创建他并插入index.html
2.app.module.ts的用途
- 是它启动你的应用程序,并设置链接到你的其他模块。
- 模块是应用程序的逻辑层。每个模块都在逻辑上打包,因此人们更容易理解和维护由多个模块组成的应用程序。 例如,如果你正在做一个丰富的应用程序,你应该有一个Login,一个MainPage,等等
- 你需要导入模块中的东西,使它知道什么時候将会使用。基本上,你的Login将需要表單模塊,这可能不需要另外的模塊。
- 在这里,这导致我们的AppModule应该只导入其他模块,它是链接到并提供将需要的服务全局。