anuglar2之模块（ngModule）开发--rc5版本

ng2升级到rc5版本之后，它引入了模块ngModule来管理，比如之前在rc5之前的版本，各个逻辑功能模块的组件都是透明的，随便边使用，只要在使用前导入就可以了，这就导致了非常多的import，管理很混乱，好多地方重复import，而且多人开发的化，如果需要自定义全局使用的DI、指令、pipe等的化，那就需要事先约定不能重名，管理也十分混乱，及时重名，是不会报错，比如，样式只是会后面一次覆盖前面的，导致排错十分困难
模块化之后，各个模块之间没有任何关联性，全局使用也只能通过模块暴露出来的组建来使用。
看下mian.ts文件的引导启动：

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
// The app module
import { AppModule } from './app/app.module';
if (process.env.ENV === 'production') {
  enableProdMode();
}
// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

根module——>app.module:

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

/* App Root */
import
{ AppComponent }       from './app.component';
import { HighlightDirective } from './highlight.directive';
import { TitleComponent }     from './title/title.component';
import { UserService }        from './user.service';

/* Contact Imports */
import
{ ContactModule }      from './contact/contact.module';


@NgModule({
  imports: [
    BrowserModule,ContactModule
  ],declarations: [
    AppComponent,HighlightDirective,TitleComponent,],providers: [UserService],bootstrap: [AppComponent]
})
export class AppModule { }

其他module————>contact.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AwesomePipe } from './awesome.pipe';

import { ContactComponent } from './contact.component';
import { ContactService } from './contact.service';
import { HighlightDirective } from './highlight.directive';

@NgModule({
    imports:[CommonModule,FormsModule],declarations:[ContactComponent,AwesomePipe],exports:[ContactComponent],providers:[ContactService]
})
export class ContactModule{

}

可以比较容易的看出来，在根模块中使用其他模块，不用像之前那样，需要导入所有关组建，这样就清爽好多了。

anuglar2之模块（ngModule）开发--rc5版本

猜你在找的Angularjs相关文章