Angular 2 架构

模块由一块代码组成，可用于执行一个简单的任务

angular 2 应用是由模块化的，它有自己的模块系统 NgModules

每个 Angular 2 应该至少要有一个根模块，一般可以命名为 AppModule

Angular 2 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象

Angular 2 模块几个重要的属性

declarations （声明）

声明视图类属于这个模块

Angular 有三种类型的视图类：组件、指令和管道

exports

声明（ declaration ）的子集，可用于其它模块中的组件模板

imports

本模块组件模板中需要由其它导出类的模块

providers

服务的创建者

本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到

bootstrap

应用的主视图，称为根组件，它是所有其它应用视图的宿主

只有根模块需要设置 bootstrap 属性中

下面的代码创建了一个最简单的根模块

app/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

接下来我们通过引导根模块来启动应用

AngularJS 2 应用一般在 main.ts 文件中来引导 AppModule

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

链接: https://www.fly63.com/course/15_828

Angular 2 架构 - 模块

app/app.module.ts

app/main.ts