Angular2  NgModule 模块详解


Posted in Javascript onOctober 19, 2016

Angular的模块的目的是用来组织app的逻辑结构。

在ng中使用@NgModule修饰的class就被认为是一个ng module。NgModule可以管理模块内部的Components、Directives、Pipes,引入Service,并控制外部组件对内部成员的访问权限。

angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合。模块就是用来进行封装,进行高内聚  低耦合的功能。

其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能,第一步就是必须要引用它,ng2 中叫import 导入。

那么我们看模块是否有层级概念呢,至少目前来看,模块都是平级的,没有主子之分。

如何定义模块呢?

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

/* App Root */
import { AppComponent } from './app.component';

/* Feature Modules */
import { ContactModule } from './contact/contact.module';
import { CoreModule } from './core/core.module';
import { routing } from './app.routing';
import { Title } from '@angular/platform-browser';
@NgModule({
 imports: [
  BrowserModule,
  ContactModule,
  /*
    CoreModule,
  */
  CoreModule.forRoot({ userName: 'Miss Marple' }),
  routing
 ],
 declarations: [AppComponent],//声明当前模块需要的指定 组件信息
 exports:[],
 providers: [Title],
 bootstrap: [AppComponent]
})
export class AppModule { }

 简单说明一下模块元数据中各个参数的用途。

imports:导入其他模块,就是要使用其他模块的功能,必须要导入。

declarations:声明,声明本模块包含的内容。可能有些同学会遇到,定义了一个指令,在component中使用却总是没有生效的问题,首先我们要检查的就是是否进行了声明。

exports:外部可见的内容。相当于.net中声明为public的那些类。

providers:服务提供者,主要用来定义服务。估计ng2框架会自动将注册的服务体检到依赖注入实例中,目前测试也是如此。

bootstrap:启动模块。只在根模块使用。在除了根模块以外的其他模块不能使用。

2.问题2

目前官方叫法:启动模块为根模块,自定义的其他模块叫特性模块。

我们是否可以在特性模块中import根模块呢?

实验是检验真理的最好方法。

import { NgModule }      from '@angular/core';
import { SharedModule }    from '../shared/shared.module';

import { ContactComponent }  from './contact.component';
import { ContactService }   from './contact.service';
import { routing }      from './contact.routing';
import{GuozhiqiModule}from '../directives/guozhiqi.module';
import{AppModule}from '../app.module';
@NgModule({
 imports:   [ SharedModule, routing,GuozhiqiModule,AppModule ],// 导入模块
 declarations: [ ContactComponent ],//声明 指令 
 providers:  [ ContactService ]//服务提供者 在当前模块提供者中注册当前模块需要的服务
})
export class ContactModule { }

appModule是根模块,我们定义的contactModule是特性模块,现在我们通过imports 导入根模块。

Angular2  NgModule 模块详解

 执行出现错误,contactModule导入了一个undefined的module?

为什么会出现这个问题呢?

各人估计是因为1.导致了循环引用的问题。appModule会加载ContactModule,而在ContactModule中又要import 根模块,导致循环引用,从而出现错误。

2.另一种解释就是根模块不允许导入。ng2框架不允许这样

问题3:如何避免出现循环引用呢?

官方给出了答案:https://angular.cn/docs/ts/latest/guide/ngmodule.html#!#prevent-reimport

constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
  if (parentModule) {
   throw new Error(
    'CoreModule is already loaded. Import it in the AppModule only');
  }
 }

 但是我本地验证并不会有效的验证如何避免重复import一个模块。

问题4. 模块与路由的关系。

Angular2  NgModule 模块详解

基本上每个特性模块都有单独的路由定义,关于模块和路由的关系定义,下次说到ng2路由时再细说,因为ng2的路由太强大,以至于需要很长时间的理解才能明白。

ng2模块的目录和目录结构的最佳实践:

1.每个模块一个单独的文件夹

2.模块是高内聚 低耦合

3.模块内功能相关或相近

4.每个模块都有单独的路由定义 -不是必须

5.不要重复导入一些模块,必要的时候加入限制。 因为重复导入可能会影响依赖注入实例

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
May 14 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 #Javascript
jQuery  ready方法实现原理详解
Oct 19 #Javascript
Javascript实现汉字和拼音互转的终极方案
Oct 19 #Javascript
Javascript typeof与instanceof的区别
Oct 18 #Javascript
javascript self对象使用详解
Oct 18 #Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 #Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 #Javascript
You might like
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
js版本A*寻路算法
2006/12/22 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
js 字符串操作函数
2009/07/25 Javascript
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
2017/01/13 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
Python实现多属性排序的方法
2018/12/05 Python
Python操作json的方法实例分析
2018/12/06 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
5s推行计划书
2014/05/06 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers