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


Posted in Javascript onDecember 02, 2016

在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道,并且可以将它们的访问权限声明为公有,以使外部模块的组件可以访问和使用到它们。

模块是用来组织应用的,通过模块机制外部类库可以很方便的扩展应用,Rc5之后,Angular2将许多常用功能都分配到一个个的模块中,如:FormModule、HttpModule、RouterModule。

NgModule的主要属性如下:

  • declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员
  • providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中)
  • imports:导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
  • exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
  • bootstrap:通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
  • entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。

每个Angular2的应用都至少有一个模块即跟模块。

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-borwser';
import {AppComponent} from './AppComponent';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule{}

随着程序的壮大,单一的根模块已不能清晰的划分职责,这时候便可以引入Feature Module。Feature Module与根模块的创建方式一样,所有的模块共享一个运行期上下文和依赖注入器。

功能模块与根模块的职责区别主要有以下两点:

  • 根模块的目的在于启动app,功能模块的目的在于扩展app
  • 功能模块可以根据需要暴露或隐藏具体的实现

Angular2提供的另一个与模块有关的技术就是延迟加载了。默认情况下Angular2将所有的代码打包成一个文件,目的是为了提高应用的流畅性,但是如果是运行在mobile中的app,加载一个大文件可能会过慢,所以rc5提供了一种延迟加载方式。

template: `
 <app-title [subtitle]="subtitle"></app-title>
 <nav>
  <a routerLink="contact" routerLinkActive="active">Contact</a>
  <a routerLink="crisis" routerLinkActive="active">Crisis Center</a>
  <a routerLink="heroes" routerLinkActive="active">Heroes</a>
 </nav>
 <router-outlet></router-outlet>
`
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
 { path: '', redirectTo: 'contact', pathMatch: 'full'},
 { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
 { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

其中,path指明路径,loadChildren指明使用延迟加载,'app/crisis/crisis.module#CrisisModule'指明了模块的路径,和模块的名称。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
用js实现放大镜效果
Oct 28 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 #Javascript
基于jQuery实现的幻灯图片切换
Dec 02 #Javascript
JavaScript中清空数组的方法总结
Dec 02 #Javascript
浅谈js中几种实用的跨域方法原理详解
Dec 02 #Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
Dec 02 #Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 #Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 #Javascript
You might like
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
Python 正则表达式的高级用法
2016/12/04 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python异常的检测和处理方法
2018/10/26 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
清洁工表扬信
2014/01/08 职场文书
物流专业求职计划书
2014/01/10 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
公司应聘求职信
2014/06/21 职场文书
长城的导游词
2015/01/30 职场文书
举起手来观后感
2015/06/09 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript