anuglar2之模块(ngModule)开发--rc5版本

原创 2016年08月30日 11:14:03

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,HighlightDirective,AwesomePipe],
    exports:[ContactComponent],
    providers:[ContactService]
})
export class ContactModule{

}

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Angular2文档学习的知识点摘要——Angular模块(NgModule)

目录目录 前言 Angular模块化 AppModule - 应用的根模块 在maints中引导 声明指令和组件 服务提供商 导入支持性模块 解决指令冲突 特性模块 通过路由器惰性加载模块 应用路由 ...

angular---angular4学习笔记:angular中的模块化@NgModule装饰器

angular应用的模块系统被称为angular模块或NgModule 定义: ///angular是带有@NgModule装饰器提供元数据的类。 其模块系统被称为angular模块或NgModule...
  • Wbiokr
  • Wbiokr
  • 2017年06月10日 20:35
  • 1781

angular源码一,module加载器

angularModule = setupModuleLoader(window); angularModule指向

最新最全的angular4.x、anuglar2入门实战视频教程

angular4.x视频教程强势来袭!!忙碌的工作,不停的充电,好久没遇到这么实用的教程了,跟同行分享一下,写篇文章,放松放松。。有好的技术资源的也希望大家多分享,我会关注学习的。 angular...

angularjs2 官方最新的RC6版本案例 注意要能翻墙

Angular 2 Tour of Heroes System.import(...

找不到指定版本的API,failed to find Build Tools revision 23.0.0 rc2

Error:failed to find Build Tools revision 23.0.0 rc2 Install Build Tools 23.0.0 rc2 and sync project...

mac下配置cocos2dx-3.0RC版本

之前的配置的是beta版本(http://blog.csdn.net/cabxyz/article/details/21164215),现在的rc版本有些改变,记录一下.... 1.为了更方便的安装一...
  • cabxyz
  • cabxyz
  • 2014年03月17日 12:36
  • 10748

如何从SharePoint Server 2016 Beta2升级到RC版本?

博客地址:http://blog.csdn.net/shelleyliu0415   众所周知,SharePoint如果从低版本升级到高版本的话,从13版本开始仅仅支持In Place升级,那...

DES,RC2,Rijndael, TripleDes,RSA, MD5, SHA1通用的安全密码类

using System; using System.IO; using System.Text; using System.Security.Cryptography; using Syst...
  • xqf222
  • xqf222
  • 2012年06月17日 10:53
  • 1316

vs2005编译Cocos2d-x,当前最新版本cocos2d-2.1rc0-x-2.1.3

此处下载cocos2d-x当前最新版本cocos2d-2.1rc0-x-2.1.3: http://cocos2d-x.org/projects/cocos2d-x/wiki/Download 解...
  • yes2
  • yes2
  • 2013年06月02日 12:43
  • 520
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:anuglar2之模块(ngModule)开发--rc5版本
举报原因:
原因补充:

(最多只允许输入30个字)