Angular — AppModule

看过Angular的官方文档就会发现,创建一个angular项目,只需一下两条命令:

npm install -g @angular/cli
ng new project-name

而让这个项目运行起来也是两条命令:

cd project-name
npm start --open

此时你已经可以看到下面这样的一个页面了吧

Angular — AppModule_第1张图片
image.png

那么今天主要介绍app.module.ts 这个文件中有什么:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
​
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
​
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

前面的import和后面的export就不多说了。

  • @NgModule:Angular 的基本构造块,为组件提供上下文。

  • declaration(可声明的对象):用于声明属于本模块的组件,服务,管道。此时我们的AppModule里只有一个AppComponet声明在这里。

  • imports(导入表):本模块需要依赖的其他模块。由于在创建项目的时候选择了路由,所以我们的项目是依赖于AppRouteringModule的。

  • exports(导出表):本模块中的组件需要在其他组件中使用,

  • providers:本模块向全局服务中贡献的那些服务创建器。这些服务可以在本模块的任何地方被使用。例如,

  • bootstrap:应用的主视图,也就是跟组件。只有根模块才应该设置bootstrap属性。而我们当前项目的根模块也就是AppModule。

你可能感兴趣的:(Angular — AppModule)