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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
ASP Json Parser修正版
Dec 06 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
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
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
Python ljust rjust center输出
2008/09/06 Python
python 统计代码行数简单实例
2017/05/04 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
python爬取个性签名的方法
2018/06/17 Python
Python3内置模块random随机方法小结
2019/07/13 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
js实现弹框效果
2021/03/24 Javascript
会计系毕业生求职信
2014/05/28 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2014年药剂科工作总结
2014/11/26 职场文书
民事申诉状范本
2015/05/20 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
python中tkinter复选框使用操作
2021/11/11 Python
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫