Angular2 NgModule

时间:2022-09-01 18:54:08

1. 说明

典型的模块是一个内聚的代码块,用来实现某种单一的功能。Angular2应用程序本质上是有一系列模块组成的,而且Angular 本身就是一组模块库。模块主要是导出一些东西——类,函数,值,供其它模块导入,然后使用这个类,函数或者值。Angular2 应用是模块化的,并且 Angular2 有自己的模块系统,它被称为 Angular2 模块 或 NgModules。

NgModules是带有 @NgModule 装饰器函数的 类 。 @NgModule 接收一个元数据对象,该对象告诉 Angular 如何编译和运行模块代码。它标记出该模块拥有的组件,指令和管道,引入的其他Angular2模块,以及导出给其他模块使用的公共部分,同时还可以向当前模块注入对应的服务提供商等。

模块是组织应用程序和使用外部程序库的最佳途径。很多 Angular 库都是模块,比如: FormsModuleHttpModuleRouterModule 。模块可能在应用启动时主动加载,也可能由路由器进行异步 惰性加载。

每个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的更多相关文章

  1. Angular2 NgModule 模块详解

    原文  https://segmentfault.com/a/1190000007187393 我们今天要学习的是Angular2的模块系统,一般情况下我们使用一个根模块去启动我们的应用,然后使用许多 ...

  2. Angular2 内置指令 NgFor 和 NgIf 详解

    http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个 ...

  3. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  4. Angular2 小贴士 NgModule 模块

    angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合.模块就是用来进行封装,进行高内聚  低耦合的功能. 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能 ...

  5. angular2 学习笔记 &lpar; ngModule 模块 &rpar;

    2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 &quot ...

  6. Angular2笔记:NgModule

    Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Dire ...

  7. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  8. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  9. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

随机推荐

  1. nodejs中标准包的制作&comma;上传&comma;安装及卸载方法

    一:如何制作一个标准包? 为了规范化,基本遵循CommonJS规范,首先约定: 包的使用: 所有模块放在一个文件夹(包名) 包放在当前项目中的node_modules文件夹下 包中定义一个index. ...

  2. Cocos2d-JS轻量级开发

    官方提供了另外一种使用cocos2d js的方式,更适合web开发者,只要引用一个js就可以了 1.下载Cocos2d-JS Lite Version(去下载>>) 下载下来的将是一个完整 ...

  3. php导出word&lpar;可包含图片&rpar;

    为大家介绍一个 php 生成 导出word(可包含图片)的代码,有需要的朋友可以参考下. 之前介绍过php生成word的例子,只是不能包含图片与链接. 今天 为大家介绍一个 php 生成 导出word ...

  4. HDU5311

    题意:给一个指定的字符串a,要求分成三段,然后再给定另外一个字符串b,要求a中的三段能否在b中找到. 思路:枚举+模拟,首先枚举给定的字符串a,因为分成三段,所以一共有(1+9)*9/2种情况,对于分 ...

  5. centos6&period;4虚拟机vmware-tools安装及启动到进度条卡死

    vmware-tools安装: linux-VMware tools安装步骤: (1)在CD-ROM虚拟光驱中选择使用ISO镜像,找到VMWARE TOOLS 安装文件,如D:\VMware\VMwa ...

  6. org&sol;hamcrest&sol;SelfDescribing

    今天在Idea下使用JUtil的时候,运行@Test,报错:org/hamcrest/SelfDescribing 解决办法: (1)换成junit-4.8.jar (2)junit-4.11.jar ...

  7. BZOJ 1559&colon; &lbrack;JSOI2009&rsqb;密码&lpar; AC自动机 &plus; 状压dp &rpar;

    建AC自动机后, dp(x, y, s)表示当前长度为x, 在结点y, 包括的串的状态为s的方案数, 转移就在自动机上走就行了. 对于输出方案, 必定是由给出的串组成(因为<=42), 所以直接 ...

  8. SXT分布式缓存技术公开课的观后感

    最近几天在研究Redis,Redis作为最近比较流行的缓存技术,其特点还是很明显的,Redis使用Key-Value的结构来存储数据,Redis也是内存型的数据库,数据一开始是保存在内存中的,通过某些 ...

  9. China Azure中部署Kubernetes&lpar;K8S&rpar;集群

    目前China Azure还不支持容器服务(ACS),使用名称"az acs create --orchestrator-type Kubernetes -g zymtest -n kube ...

  10. &period;NET Core快速入门教程 1、开篇:说说&period;NET Core的那些事儿

    一..NET Core的诞生 聊 .NET Core,就不得不说他的爸爸 .NET.当年Java刚刚兴起,如火如荼,微软也非常推崇Java,当时Windows平台的Java虚拟机就是微软按照JVM标准 ...