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 相关文章推荐
JavaScript OOP面向对象介绍
Dec 02 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
javascript简易画板开发
Apr 12 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
JS正则表达式验证中文字符
May 08 Javascript
原生js实现随机点名功能
Nov 05 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
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
用unescape反编码得出汉字示例
2014/04/24 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python字符串格式化的方法(两种)
2017/09/19 Python
python使用matplotlib绘制热图
2018/11/07 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
优秀班组申报材料
2014/12/25 职场文书
节约用电通知
2015/04/25 职场文书
诚信教育主题班会
2015/08/13 职场文书
2019教师的学习计划
2019/06/25 职场文书