angular2:模块(Module)

应用都是模块化的,Angular有自己的模块系统。通常app.module.ts定义一个应用的根模块,一个应用应该至少有一个根模块(root module)。对于一个简单的应用来说,一个根模块足矣,但对于一个复杂的应用则可能需要添加特性模块,而且不止一个。

Angular模块是一个带有@NgModule装饰器函数的类。Angular有很多装饰器,这些装饰器将元数据附加到类上这样模块就会知道这些类的含义以及运作方式。

下面是@NgModule装饰器函数接收的元数据中重要的几个属性:

  • declarations: 声明模块所拥有的视图类,Angular有三种视图类:component、directive和pipe。
  • exports: declarations的子集。作用是导出类以便其他模块的组件模板使用。
  • imports: 导入外部模块的类以便在此模块中声明的模板组件使用。
  • providers: 服务提供商。模块会将这些服务加入全局服务集,这样在app的任何位置都可以使用加入的服务。
  • bootstrap: 应用的主视图,包含app的其他视图。只有根模块可以设置这个属性。

下面是一个最简单基本的根模块:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent ],  //在这里加自己定义的组件、指令或管道
  bootstrap: [ AppComponent ] 
})

export class AppModule{}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Module Component(一)Angular应用是模块化的,并且Angular有自己的模块系统,它被称为A...
    关关雎鸠1206阅读 844评论 0 0
  • 一、起项目 根据官方教程,执行以下: 然后要把下面文件略微改一下(官方没有写),否则编译出的js和ts混在一起,很...
    Angeladaddy阅读 1,308评论 0 4
  • Angular CLI 是什么? Angular CLI 是一个命令行接口(Command Line Interf...
    semlinker阅读 4,233评论 0 39
  • 他们第一天相遇就睡在了一起。 女大四,男大三。原来,是同一个学校。 相遇在沙海,魔域沙漠。 相拥而眠在帐篷,深秋时...
    Sunny哈哈阅读 529评论 1 1
  • 只想告诉自己,装着别人的我,想着别人的我,此时此刻我要让自己忙起来。忙了一天就忘了一天。
    阳光的笑还在吗阅读 374评论 0 0