Angular2  NgModule 模块详解

 更新时间:2016年10月19日 08:57:41   投稿:lqh  
这篇文章主要介绍了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.不要重复导入一些模块,必要的时候加入限制。 因为重复导入可能会影响依赖注入实例

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

相关文章

  • 详解Angular中通过$location获取地址栏的参数

    详解Angular中通过$location获取地址栏的参数

    这篇文章主要介绍了详解 Angular中通过$location获取地址栏的参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • AngularJS实现的自定义过滤器简单示例

    AngularJS实现的自定义过滤器简单示例

    这篇文章主要介绍了AngularJS实现的自定义过滤器,结合实例形式分析了AngularJS自定义过滤器的简单定义与使用操作技巧,需要的朋友可以参考下
    2019-02-02
  • angular 数据绑定之[]和{{}}的区别

    angular 数据绑定之[]和{{}}的区别

    这篇文章主要介绍了angular 数据绑定之[]和{{}}的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • AngularJS ngModel实现指令与输入直接的数据通信

    AngularJS ngModel实现指令与输入直接的数据通信

    这篇文章主要介绍了AngularJS ngModel实现指令与输入直接的数据通信的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS 中的指令实践开发指南(一)

    AngularJS 中的指令实践开发指南(一)

    指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用
    2016-03-03
  • 小谈angular ng deploy的实现

    小谈angular ng deploy的实现

    这篇文章主要介绍了小谈angular ng deploy的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Angular使用Restful的增删改

    Angular使用Restful的增删改

    今天小编就为大家分享一篇关于Angular使用Restful的增删改,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • Angular中$compile源码分析

    Angular中$compile源码分析

    本文给大家分享的是通过angular中的$compile源码进行分析,从而更好的理解angular的使用,非常的不错,希望大家能够喜欢。
    2016-01-01
  • AngularJS ng-blur 指令详解及简单实例

    AngularJS ng-blur 指令详解及简单实例

    本文主要介绍AngularJS ng-blur 指令,这里对ng-blur 指令的知识详细介绍给大家,并给大家一个实例作为参考,有需要的小伙伴可以参考下
    2016-07-07
  • AngularJs 最新验证手机号码的实例,成功测试通过

    AngularJs 最新验证手机号码的实例,成功测试通过

    下面小编就为大家分享一篇AngularJs 最新验证手机号码的实例,成功测试通过,具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11

最新评论