angular2 学习笔记 ( ngModule 模块 )
2016-08-25, 当前版本是 RC 5.
参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html
提醒 : 这系列笔记的 "ng" 指的是 angular2 哦!
ECMA 6 中, 每一个 .js 文件都是一个模块.
ng 中的模块则指的是一组被封装起来的组件, 指令, 管道, 它们可以来自不同的 .js 文件.
所以 ng 模块可以说是 ECMA 模块的更上一层封装. 这正是我们需要的.
import { NgModule } from '@angular/core'; @NgModule({
imports: [],
declarations: [],
exports: [],
bootstrap: [],
providers : []
})
export class AppModule { }
大概长这样.
imports 顾名思义, 就是导入其它的模块,这和 ECMA 模块是一样的概念.
declarations : [ProductComponent, ProductPipe, ProductDirective] declarations 是用来声明当前这个模块所具有的组件, 指令, 管道的. ( 组件如果没有被声明是不能用的哦,会报错的. )
exports : [ImportedModule, DeclaredComponent] 我们想导出什么就写什么, 默认情况下所有导入和声明的模块或组件都是私有的. 除非我们导出它们.
以上3项很好理解.
需要注意, 如果一个组件已经被"声明"过了,请不要再次"声明"它, 比如 : 模块A 声明了 组件A, 而 模块B 导入了 模块A, 那么在 模块B 中就可以使用 组件A 了, 不需要在 模块B 中"再次声明", 即使你再声明也无效
bootstrap: [AppComponent] 只有在主模块 AppModule 会使用到.
在 main.js 中启动主模块
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
这是动态的方式, 还有一个静态的方式, 有兴趣可以去参考
providers : [ProductService]
模块的 providers 会注册进根注入器中. 意味着这是全局的. (lazyload module 例外, 因为 lazyload 的 module 会是 root module 的 child)
例如 : (we have 3 module : A,B,C ) A import B,C -> C can use B service, even C not import B
所以, 如果你只想在某个 module 内使用某个 service 的话, 那写在 component.providers 吧. 但其实把所有provider 定义全局也没很大的问题, 毕竟 provider 都是 class or token 不会有命名冲突的问题.
ng 有个延迟加载 module 的功能叫 lazy load, 它是配合 router 一块使用的.
lazy load 会创建子注入器, 这个要留意哦, 它会影响到 providers (原本 module's providers 是注册到 root injector 的),
ng给出的理由是, 注入器一旦开始工作就不能修改了, 所以 lazyload 只能通过创建子注入器来扩展.
所以, 一般上 lazy load 的 module 需要声明 providers 的话, 会这样做.
这个做法是这样的, 不把 providers 声明到 @NgModule 里面, 而是提供一个静态方法给 root module import.
或则你可以把 providers 独立写成另一个模块.
特性模块
特性模块和根模块是差不多的,也是有根组件,路由等等
区别如下
1.不会有 bootstrap: [AppComponent]
2.不会有 BrowserModule, 取而代之的是 CommonModule
@NgModule({
imports: [
CommonModule,
routing
],
declarations: [
ProductComponent
],
providers: [routingProviders]
})
export class ProductModule { }
之前说的 forRoot 还有扩展模块的好处, 可以看到 import module 时可以通过一个带参数的方法, 那样我们就可以依据不同的项目去设定或则扩展我们的模块了. (类似 ng1 的 app.config)
有一个叫 entryComponents 的属性, 他和 declarations 不一样的地方是, 它是专门用来定义动态组建的. 动态组建是通过 class 来创建的不是写在 html 里的. 如果我们没有告诉 ng 我们有什么动态的 component 的话, 那么在 aot 的时候就没办法预编辑了.
更新 : 2017-01-26
module 可以不需要 import 直接 export 其它 module, 这和 ecma module 是一样的.
angular2 学习笔记 ( ngModule 模块 )的更多相关文章
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- Python学习笔记—itertools模块
这篇是看wklken的<Python进阶-Itertools模块小结> 学习itertools模块的学习笔记 在看itertools中各函数的源代码时,刚开始还比较轻松,但后面看起来就比较 ...
- Python学习笔记之模块与包
一.模块 1.模块的概念 模块这一概念很大程度上是为了解决代码的可重用性而出现的,其实这一概念并没有多复杂,简单来说不过是一个后缀为 .py 的 Python 文件而已 例如,我在某个工作中经常需要打 ...
- Python3学习笔记25-logging模块
logging模块,Python自带用来记录日志的模块. 因为工作需要用到关于日志的,最近一直都在看关于日志模块的东西,百度了很多文章,可惜都是看的让人一头雾水,最后运气不错,找到一篇很详细的文章.传 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- Angular2 小贴士 NgModule 模块
angular2 具有了模块的概念,响应了后台程序的号召,高内聚 低耦合.模块就是用来进行封装,进行高内聚 低耦合的功能. 其实各人认为ng2 的模块和.net的工程类似,如果要使用模块中定义的功能 ...
- Angular2学习笔记2
每个angular2应用程序默认使用app目录来创建(可以自己制定,但是eclipse插件生成的会自动使用app) 每个程序应当至少有一个angular模块即根模块.根模块使用@NgModule({} ...
- Angular2学习笔记(1)——Hello World
1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之前主要使用的是jQuery,由于 ...
- Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
随机推荐
- 《SDN核心技术剖析和实战指南》3.3读书笔记
这一节主要是介绍几种开源的SDN控制器. NOX/POX.最初的NOX混合了C++和Python两种编程语言,现在演变为两个版本.NOX版本主要面向Linux平台,利用C++开发,目标是提供快速的控制 ...
- php开启错误提示
1.在php.ini文件里加上下面两句 display_errors = Onerror_reporting = E_ALL | E_STRICT 2.在Apache的 httpd.conf文件里加上 ...
- WPF - 这是一堆代码片段的集合
1. Image的Source设定,引用的图片文件在其他的dll中.图片的Build action : Resource 如果是直接写: Source="/MyProject.Resourc ...
- c# 根据自定义Attribute排序
add a class: public class ExportAttribute : Attribute { public int FieldOrder { get; set; } ...
- Media层
媒体层包含图形技术.音频技术和视频技术,这些技术相互结合就可为移动设备带来最好的多媒体体验,更重要的是,它们让创建外观音效俱佳的应用程序变得更加容易.您可以使用iOS的高级框架更快速地创建高级的图形和 ...
- android 程序防止被360或者系统给kill掉
关于如果和防止android 程序防止被360kill掉之后重启的问题,肯定大家也搜索了好多方法,都不好使,对不对,什么增高权限了,什么进程优先级了,这些东西都不是我们可控的,所以有没有一些非常保险的 ...
- atitit。浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结
atitit.浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结 1. 缓存的一些机制 1 1.1. http 304 1 1.2. 浏览器刷新的处理机制 1 1.3. Expir ...
- unity3d触屏操作对象运动
using UnityEngine; using System.Collections; public class robot : MonoBehaviour { private GameObject ...
- MySQL(14):Select-limit(限制获得的记录数量)
1. limit 限制获得记录的数量 2.limit 语法: (1) limit offset, row_count: offset偏移量,从0开始. row_count总记录数. 分析: 案例演示 ...
- 【转】app瘦身
iPhone经过这几年的发展,已经发生了很大的变化,例如屏幕变得更加多样,尺寸更多,内存变得更大,CPU的架构也在变化.伴随着iPhone的变化,iOS也在变化,例如AutoLayout.size c ...