Angular2 NgModule
1. 说明
典型的模块是一个内聚的代码块,用来实现某种单一的功能。Angular2应用程序本质上是有一系列模块组成的,而且Angular 本身就是一组模块库。模块主要是导出一些东西——类,函数,值,供其它模块导入,然后使用这个类,函数或者值。Angular2 应用是模块化的,并且 Angular2 有自己的模块系统,它被称为 Angular2 模块 或 NgModules。
NgModules是带有 @NgModule 装饰器函数的 类 。 @NgModule
接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件,指令和管道,引入的其他Angular2模块,以及导出给其他模块使用的公共部分,同时还可以向当前模块注入对应的服务提供商等。
模块是组织应用程序和使用外部程序库的最佳途径。很多 Angular 库都是模块,比如: FormsModule
、 HttpModule
、 RouterModule
。模块可能在应用启动时主动加载,也可能由路由器进行异步 惰性加载。
每个Angular2应用都必须存在唯一一个根模块,我们将通过引导根模块来启动应用。
2. 实例
Angular2模块一般由注解,元数据以及模块类组成,来看下面的这个简单的组件的例子:
import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { PortalComponent } from './portal'; import { routing } from './routes'; @NgModule({ imports: [ routing, FormsModule, ReactiveFormsModule ], exports: [], declarations: [PortalComponent], providers: [] }) export class PortalModule { } |
以上的例子可以看出,我们通过元数据imports导入了FormsModule等其他Angular2模块,通过declarations声明当前模块中使用的组件等,当然,我们还可以通过exports导出公共部分提供其他模块使用,以及providers提供了当前模块所使用的服务提供商。
3. 定义
通过官方提供的NgModule的API我们可以知道,其元数据的描述如下。
interface NgModule { providers : Provider[] declarations : Array<Type<any>|any[]> imports : Array<Type<any>|ModuleWithProviders|any[]> exports : Array<Type<any>|any[]> entryComponents : Array<Type<any>|any[]> bootstrap : Array<Type<any>|any[]> schemas : Array<SchemaMetadata|any[]> id : string } |
我们分别对这些属性加以说明:
l providers : Provider[]
注入在该模块中使用的服务提供商,在根模块注入的服务供应商可以供整个应用程序使用。
l declarations : Array<Type<any>|any[]>
声明在该模块中使用的组件,指令以及通道
l imports : Array<Type<any>|ModuleWithProviders|any[]>
导入在该模块中使用的其他Angular2模块中的组件,指令以及管道等,该模块中的组件等由exports属性导出。
l exports : Array<Type<any>|any[]>
导出该模块中的组件,指令以及管道等,以便提供给其他Angular2模块使用。
l entryComponents : Array<Type<any>|any[]>
声明在模块定义时进行编译的组件,当模块加载的时候回生成ComponentFactory并保存在ComponentFactoryResolver,使用ComponentFactoryResolver创建组件的时候应该现在此处进行声明。
l bootstrap : Array<Type<any>|any[]>
此处声明当模块启动加载的时候同时执行启动加载的组件,这些组件会自动添加到entryComponents中。
l schemas : Array<SchemaMetadata|any[]>
声明在Angular中使用的非组件,指令或管道等Angular标准元素或者属性的其他自定义元素或属性信息。常用的schemas形式有:
NO_ERRORS_SCHEMA: 所有的元素或者属性均可以
CUSTOM_ELEMENTS_SCHEMA:任意元素(元素标签中包含“-”)和属性都可以
l id : string
一个独立的模块ID,用来在getModuleFactory标识对应的模块,如果设定对应的ID信息,这不会在getModuleFactory中注入。
Angular2 NgModule的更多相关文章
- Angular2 NgModule 模块详解
原文 https://segmentfault.com/a/1190000007187393 我们今天要学习的是Angular2的模块系统,一般情况下我们使用一个根模块去启动我们的应用,然后使用许多 ...
- Angular2 内置指令 NgFor 和 NgIf 详解
http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- Angular2 小贴士 NgModule 模块
angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合.模块就是用来进行封装,进行高内聚 低耦合的功能. 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能 ...
- angular2 学习笔记 ( ngModule 模块 )
2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...
- Angular2笔记:NgModule
Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Dire ...
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
随机推荐
- MySQL字符串函数substring:字符串截取
MySQL 字符串截取函数:left(), right(), substring(), substring_index().还有 mid(), substr().其中,mid(), substr() ...
- Java学习笔记(三)
今天主要学习了ant ant概述 ant是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.在实际软件开发中,有很多地方可以用到ant 开发环境: Sy ...
- 冰冻三尺非一日之寒--jQuery
第十七章 jQuery http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...
- Kinect2.0 for Mac开箱
前段时间从米国带回来一个Kinect,坑爹地发现需要适配器才能连接电脑.于是又从微软官网下单了适配器.今天终于在Mac上把Kinect装起来跑了,与大家分享一点图片. Kinect驱动安装 Kinec ...
- cocos2d-x内存管理
Cocos2d-x内存管理 老师让我给班上同学讲讲cocos2d-x的内存管理,时间也不多,于是看了看源码,写了个提纲和大概思想 一. 为什么需要内存管理 1. new和delete 2. 堆上申 ...
- HTML5 之 FileReader(图片上传)
1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...
- 批量 ping 测试脚本
是否会使用 vpn 工作,已经成为魔法师和麻瓜之间最重要的区分.使用 vpn 工作,也产生了其它一些奇奇怪怪的问题,比如,选择 vpn 服务器. 你要测试哪个 vpn 离你最近. 所以,就有了下面的脚 ...
- ASE周会记录
本周Sprint Master Atma Hou 一. 本周会议概要 本次会议的主要任务是明确和老师讨论后的数据库设计定稿,同时为我们接下来的连接工作确定包含实现细节的story和接口. 二. 会议内 ...
- 数据结构作业——expectation(树形dp+dfs)
expectation Description 给出一棵带权值的树,我们假设从某个节点出发,到目标节点的时间为两个节点之间的最短路.由于出发节点不好选取,所以选在每个节点都有一定的概率,现在我们要求从 ...
- MySQL的InnoDB索引原理详解
摘要 本篇介绍下Mysql的InnoDB索引相关知识,从各种树到索引原理到存储的细节. InnoDB是Mysql的默认存储引擎(Mysql5.5.5之前是MyISAM,文档).本着高效学习的目的,本篇 ...