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中引导 声明指令和组件 服务提供商 导入支持性模块 解决指令冲突 特性模块 通过路由器惰性加载模块 应用路由 ...
  • qq_15096707
  • qq_15096707
  • 2017年02月01日 17:56
  • 2480

ERROR in AppModule is not an NgModule

angularjs2的环境问题解决了好久。 百度到的答案也是各种各样还解决不了我的问题。 好在这几天经过不断的测试终于给解决了。 ERROR in AppModule is not an N...
  • yaerfeng
  • yaerfeng
  • 2017年03月17日 02:00
  • 4956

Angular2 之 Form 表单

From表单分为两种类型: 模板驱动表单(Template-Driven Forms) 模型驱动表单(Model-Driven-Forms) 模型:有结构的状态(是一种数据结构)FormContrl...
  • u010130282
  • u010130282
  • 2016年12月15日 09:29
  • 5065

Angular 2 Form表单

Angular 2 Form表单 在angular2 form表单中我们需要了解表单数据绑定、数据验证、数据提交等内容,在下面的示例中并没有实际提交到后台,这部分内容在今后webapi中加以练习。 ...
  • huangyezi
  • huangyezi
  • 2016年06月13日 23:56
  • 9331

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

ng2升级到rc5版本之后,它引入了模块ngModule来管理,比如之前在rc5之前的版本,各个逻辑功能模块的组件都是透明的,随便边使用,只要在使用前导入就可以了,这就导致了非常多的import,管理...
  • tianjun2012
  • tianjun2012
  • 2016年08月30日 11:14
  • 1302

先执行angular.module 然后执行ngApp

angular.module angular.module可在全局位置创建、注册、获取Angular模块。所有模块(angular核心或第三方)都必须使用这个机制注册才能在应用中生效。 ...
  • zh521zh
  • zh521zh
  • 2016年08月26日 11:38
  • 1617

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

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

angularjs2启动项目报ERROR in AppModule is not an NgModule解决方法

如图: 这主要是ts编译器版本问题,一般是因为ts编译器版本过高导致。 解决方式: npm uninstall -g typescriptnpm install -g t...
  • hunannanhu
  • hunannanhu
  • 2017年05月23日 11:30
  • 1690

AppModule根模块

如何在根AppModule中构建和启动应用Angular模块类描述应用的部件是如何组合在一起的,每个应用至少都有一个Angular模块,也根模块,用来引导并运行应用。import { NgModule...
  • qq_30970807
  • qq_30970807
  • 2016年12月12日 17:07
  • 1946

angular源码一,module加载器

angularModule = setupModuleLoader(window); angularModule指向
  • dagouaofei
  • dagouaofei
  • 2014年07月28日 14:55
  • 9667
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:anuglar2之模块(ngModule)开发--rc5版本
举报原因:
原因补充:

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