Step 7 - NgModule (simple)

interface NgModule {
    // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
    //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
   providers : Provider[]
    // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
    //               然后我们就可以在这个模块中使用它们了.
   declarations : Array<Type<any>|any[]>
    // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
    //          可以直接使用别的模块提供的一些指令,组件等等.
   imports : Array<Type<any>|ModuleWithProviders|any[]>
    // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
    //          如果别的模块导入了我们这个模块,
    //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
   exports : Array<Type<any>|any[]>
   // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
   //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
   entryComponents : Array<Type<any>|any[]>
   // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
   bootstrap : Array<Type<any>|any[]>
   // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
   schemas : Array<SchemaMetadata|any[]>
   // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
   //     那么这个模块将不会被注册.
   id : string
}

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.template.html'
})
export class AppComponent { }

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 { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

import {Component} from '@angular/core';
@Component({
    selector: 'app-title',
    templateUrl: 'app/components/title/title.template.html'
})
export class TitleComponent {}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import {TitleComponent} from "./components/title/title.component";
@NgModule({
    imports:      [ BrowserModule ],
    declarations: [
        AppComponent,
        TitleComponent // 声明我们刚刚写的组件
    ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

import {Component, Input} from '@angular/core';
@Component({
    selector: 'app-title',
    templateUrl: 'app/components/title/title.template.html'
})
export class TitleComponent {
    @Input() appTitle = '';
}

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.template.html'
})
export class AppComponent {
    appTitle = 'Hello title';
}

import {Injectable} from '@angular/core';
@Injectable()
export class ActiveTitleService {
    getTitle() {
        let title = Math.random().toFixed(2) + 'title';
        return title;
    }
}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import {TitleComponent} from "./components/title/title.component";
import {ActiveTitleService} from "./components/title/active-title.service";
@NgModule({
    providers: [
        ActiveTitleService // 添加我们刚才的服务
    ],
    imports:      [ BrowserModule ],
    declarations: [
        AppComponent,
        TitleComponent
    ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component } from '@angular/core';
import {ActiveTitleService} from "./components/title/active-title.service";
@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.template.html'
})
export class AppComponent {
    appTitle = 'Hello title';
    constructor(activeTitleService: ActiveTitleService) {
        // 使用这个服务
        this.appTitle = activeTitleService.getTitle();
    }
}

import {Directive, ElementRef, Renderer} from '@angular/core';
@Directive({
    selector: '[highlight]'
})
export class HighlightDirective {
    constructor(renderer: Renderer, el: ElementRef) {
        renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'red');
    }
}

...
declarations: [
        AppComponent,
        TitleComponent,
        HighlightDirective
    ],
...

import {NgModule} from '@angular/core';
import {CommonModule} from "@angular/common";
import {FormsModule} from "@angular/forms";
import {UserListComponent} from "../components/user-list/user-list.component";
import {UserListService} from "../components/user-list/user-list.service";
import {HighlightDirective} from "../components/user-list/user-highlight.directive";
@NgModule({
    providers: [
        UserListService
    ],
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        UserListComponent,
        HighlightDirective
    ],
    exports: [
        CommonModule,
        FormsModule,
        UserListComponent
    ]
})
export class UserModule {}

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import {TitleComponent} from "./components/title/title.component";
import {ActiveTitleService} from "./components/title/active-title.service";
import {HighlightDirective} from "./components/title/highlight.directive";
import {UserModule} from "./modules/user.module";
@NgModule({
    providers: [
        ActiveTitleService
    ],
    imports:      [
        BrowserModule,
        UserModule // 添加我们需要的UserModule模块
    ],
    declarations: [
        AppComponent,
        TitleComponent,
        HighlightDirective
    ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }