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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
模拟select的代码
Oct 19 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
JavaScript内置对象之Array的使用小结
May 12 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实现文件上传及头像预览功能
2017/01/15 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
火车来了教学反思
2014/02/11 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
保护黄河倡议书
2014/05/16 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
试用期辞职信范文
2015/03/02 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python