Angular2 NgModule 模块详解

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 导入根模块。

执行出现错误,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. 模块与路由的关系。

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

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

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

2.模块是高内聚 低耦合

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

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

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

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

时间: 2016-10-17

Angular2开发——组件规划篇

本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型.其中写在css类以及注释中的组件想必多数人都不会去使用,而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一.在ng2中,标签型指令干脆被分离出来,追随vue等新兴势力的风格升级并称为组件,并用来处理所有与视图(DOM)打交道的事情,包括展示数据与动画.而属性型指令则用于完善组件的功能,比如接收用

Angular2学习笔记——详解NgModule模块

在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们. 模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule.HttpModule.RouterModule. NgModule的

Angular2利用组件与指令实现图片轮播组件

前言 如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的"生物"还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情. 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个"器官",功能是呈现图片,并感知用户的点击或手势来切换图片. 一.创建组件 结束上文

Angular2入门教程之模块和组件详解

本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.初步了解模块和组件 之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件. app文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它.剩下的四个文件就是典型的模块+组件的文件组成模式. Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.compo

PHP入门教程之上传文件实例详解

本文实例讲述了PHP上传文件的方法.分享给大家供大家参考,具体如下: Demo1.php <form enctype="multipart/form-data" action="Demo2.php" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 上传文件: &

C#入门教程之集合ArrayList用法详解

本文实例讲述了C#入门教程之集合ArrayList用法.分享给大家供大家参考,具体如下: .NET Framework提供了用于数据存储和检索的专用类,这些类统称集合.这些类提供对堆栈.队列.列表和哈希表的支持.大多数集合类实现系统的接口.下面我们主要来讲一下ArrayList. ArrayList是命名空间Systrm.Collections下的一部分,它是使用大小可按需动态增加的数组实现IList接口. ArrayList的容量是ArrayList可以保存的元素数.ArrayList的默认初

PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)

本文实例讲述了PHP自定义函数用法.分享给大家供大家参考,具体如下: Demo1.php <?php //标准函数,内置函数 echo md5('123456'); echo '<br/>'; echo sha1('123456'); echo '阅谁问君诵,水落清香浮.'; ?> Demo2.php <?php //创建函数,不要跟系统的内置函数重名 //函数有个特性,必须调用,才可以执行 //无参数表示()里面是空的,无返回就是函数的程序里没有 return functi

TypeScript基础入门教程之三重斜线指令详解

前言 TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript.当然最后代码还是编译为Javascript. 三斜杠指令是包含单个XML标记的单行注释. 注释的内容用作编译器指令. 三斜杠指令仅在其包含文件的顶部有效. 三重斜杠指令只能在单行或多行注释之前,包括其他三重斜杠指令. 如果在声明或声明之后遇到它们,则将它们视为常规单行注释,并且没有特殊含义. /// <reference path ="..."/> /// <re

基于Vue单文件组件详解

本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

Vue 2.0入门基础知识之内部指令详解

1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-

Python入门之三角函数sin()函数实例详解

描述 sin()返回的x弧度的正弦值. 语法 以下是sin()方法的语法: importmath math.sin(x) 注意:sin()是不能直接访问的,需要导入math模块,然后通过math静态对象调用该方法. 参数 x--一个数值. 返回值 返回的x弧度的正弦值,数值在-1到1之间. 实例 以下展示了使用sin()方法的实例: #!/usr/bin/python import math print "sin(3) : ", math.sin(3) print "sin(

Python入门之三角函数tan()函数实例详解

描述 tan() 返回x弧度的正弦值. 语法 以下是 tan() 方法的语法: import math math.tan(x) 注意:tan()是不能直接访问的,需要导入 math 模块,然后通过 math 静态对象调用该方法. 参数 x -- 一个数值. 返回值 返回x弧度的正弦值,数值在 -1 到 1 之间. 实例 以下展示了使用 tan() 方法的实例: #!/usr/bin/python import math print "tan(3) : ", math.tan(3) pr

Python内建模块struct实例详解

本文研究的主要是Python内建模块struct的相关内容,具体如下. Python中变量的类型只有列表.元祖.字典.集合等高级抽象类型,并没有像c中定义了位.字节.整型等底层初级类型.因为Python本来就是高级解释性语言,运行的时候都是经过翻译后再在底层运行.如何打通Python和其他语言之间的类型定义障碍,Python的内建模块struct完全解决了所有问题. 知识介绍: 在struct模块中最最常用的三个: (1)struct.pack:用于将Python的值根据格式符,转换为字符串(因