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 相关文章推荐
javascript new 需不需要继续使用
Jul 02 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Element-UI+Vue模式使用总结
Jan 02 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如何把汉字转化为拼音
2015/12/11 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Vue组件tree实现树形菜单
2017/04/13 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
浅谈Node Inspector 代理实现
2017/10/19 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
微信小程序的授权实现过程解析
2019/08/02 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python绘制分布折线图的示例
2020/09/24 Python
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
广告传媒专业应届生求职信
2014/03/01 职场文书
岗位职责风险点
2014/03/12 职场文书