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这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
随机推荐
- WORLD PROBLEMS
World中遇到到一些问题 1. 由于文件许可权错误,word无法完成保存操作 我的选择另存为有效,没有安装卡巴斯基8.0(Kaspersky Internet Security 8.0.0. ...
- jvm之内存分配与回收策略
1.java堆中各代分布 (1)Young:主要是用来存放新生的对象. (2)Old:主要存放应用程序中生命周期长的内存对象. (3)Permanent:是指内存的永久保存区域,主要存放Class和M ...
- js中内建对象
JavaScript charAt() 函数 string.charAt(n) -- 返回指定位置(n)的字符 char是character的缩写,中文"符号,字符" 引用网址:h ...
- Spring AOP 实现原理与 CGLIB 应用--转
AOP(Aspect Orient Programming),作为面向对象编程的一种补充,广泛应用于处理一些具有横切性质的系统级服务,如事务管理.安全检查.缓存.对象池管理等.AOP 实现的关键就在于 ...
- Android(java)学习笔记251:ContentProvider使用之添加数据到联系人(掌握)
1.添加联系人逻辑思路 (1)首先在raw_contacts创建一个新的id (2)在data表里面添加这个id对应的数据 2.下面通过一个案例,说明一下如何添加一条数据到联系人: (1)首先我们关注 ...
- java08双重循环打印图形
// 九九乘法表 外层循环每执行一次,内层循环执行一遍 for (int i = 1; i <= 9; i++) { // 外层控制的是行数 for (int j = 1; j <= i; ...
- nyoj 44
//nyoj 44 //和上面一题一样,求子串和,但是代码非常简洁..... 时间复杂度为n #include <iostream> using namespace std; int ma ...
- 使用__doPostBack函数来达到使用客户端的控件来调用服务器端的函数的--小结
类比LinkButton按钮 LinkButton前台生成代码: JS代码: //<![CDATA[ var theForm = document.forms['form1']; if (!th ...
- Design Pattern —— Prototype /Template Method/Iterator/Composite/Bridge
Prototype /Template Method/Iterator/Composite/Bridge 为什么把这五种设计模式放一起呢,没什么太高大上的原因,就是因为这五种模式JAVA开发最基本的特 ...
- 获取subview
通常我们在view层级里面对subView的操作可以通过两种方式:1.保留一个subview的引用,然后在类中通过该引用对该subview进行操作,但是要注意在适当的位置添加内存维护的代码,退出前手动 ...