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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
常用的javascript设计模式
Jan 11 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
Java设计中的Builder模式的介绍
Mar 22 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
vue项目实现多语言切换的思路
Sep 17 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树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
canvas知识总结
2017/01/25 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
vue遍历生成的输入框 绑定及修改值示例
2019/10/30 Javascript
node.js基础知识汇总
2020/08/25 Javascript
python实现简单爬虫功能的示例
2016/10/24 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Django 拆分model和view的实现方法
2019/08/16 Python
python3使用GUI统计代码量
2019/09/18 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python安装OpenCV的示例代码
2020/03/05 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
超市营业员岗位职责
2013/12/20 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
银行委托书范本
2014/09/28 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
python关于集合的知识案例详解
2021/05/30 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android