Angular4 Ng 模块
原文地址 http://www.jianshu.com/p/317f0e4b7284
根模块 (root module)
每个应用都至少有一个根模块用来引导并运行应用。根模块通常命名为 AppModule
。
示例 src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
imports 数组
注意:不要在
imports
数组中加入NgModule
类型之外的类。
如果有两个同名指令都叫做 HighlightDirective
,我们只要在 import
时使用 as
关键字来为第二个指令创建个别名就可以了。
import {
HighlightDirective as ContactHighlightDirective
} from './contact/highlight.directive';
关于 BrowserModule
每个浏览器中运行的应用都需要 @angular/platform-browser
里的 BrowserModule
。 所以每个这样的应用都在其根 AppModule
的 imports
数组中包含 BrowserModule
。
NgIf
是在来自 @angular/common
的 CommonModule
中声明的。CommonModule
提供了很多应用程序中常用的指令,包括 NgIf
和 NgFor
等。BrowserModule
导入了 CommonModule
并且重新导出了它。 最终的效果是:只要导入 BrowserModule
就自动获得了 CommonModule
中的指令。
declarations 数组
你必须在一个 NgModule
类声明每一个组件,否则浏览器控制台会报错。(好像不对啊)
不要在
declarations
添加组件、指令和管道以外的其他类型。
不要把 NgModel
(或 FORMS_DIRECTIVES
)加到 AppModule
元数据的 declarations
数据中!这些指令属于 FormsModule
。
组件、指令和管道只能属于一个模块。
永远不要再次声明属于其它模块的类。
bootstrap 数组
通过引导根 AppModule
来启动应用。 在启动过程中,其中一步是创建列在 bootstrap
数组的组件, 并将它们每一个都插入到浏览器的DOM中。
每个被引导的组件都是它自己的组件树的根。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
虽然可以将多个组件树插入到宿主页面,但并不普遍。 大多数应用只有一个组件树,它们引导单一根组件。
Ng模块 (NgModule)
特性模块
特性模块是带有 @NgModule
装饰器及其元数据的类,就像根模块一样。 特性模块的元数据和根模块的元数据的属性是一样的。
根模块和特性模块还共享着相同的执行环境。 它们共享着同一个依赖注入器,这意味着某个模块中定义的服务在所有模块中也都能用。
它们在技术上有两个显著的不同点:
- 我们引导根模块来启动应用,但导入特性模块来扩展应用。
- 特性模块可以对其它模块暴露或隐藏自己的实现。
特性模块用来提供了内聚的功能集合。 聚焦于应用的某个业务领域、用户工作流、某个基础设施(表单、HTTP、路由),或一组相关的工具集合。
虽然这些都能在根模块中做,但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。
当前模块不会继承其它模块中对组件、指令或管道的访问权。根模块与特性模块的
imports
互不相干。如果某一个模块要绑定到[(ngModel)]
就必需导入FormsModule
。
Angular4 Ng 模块的更多相关文章
- [转]【Angular4】基础(六):HTTP模块
本文转自:https://blog.csdn.net/u013451157/article/details/79519719 版权声明:本文为博主原创文章,未经博主允许不得转载. https://bl ...
- 《Angular4从入门到实战》学习笔记
<Angular4从入门到实战>学习笔记 腾讯课堂:米斯特吴 视频讲座 二〇一九年二月十三日星期三14时14分 What Is Angular?(简介) 前端最流行的主流JavaScrip ...
- 03、AngularJs的模块与控制器
大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序.而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的.同时,模块允许声明来描述应用中依赖关系,以及如何进 ...
- 4.了解AngularJS模块和依赖注入
1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...
- angular2 学习笔记 ( ngModule 模块 )
2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...
- 7_nodejs angularjs
webstrom使用: ctrl+b/点击,代码导航,自动跳转到定义 ctrl+n跳转指定类 ctrl+d复制当前行ctrl+enter另起一行ctrl+y删除当前行 ctrl+alt/shift+b ...
- Centos 6.5 部署 redmine 3.3
验证ruby版本 如果有就卸载安装最新的 yum install gcc* openssl openssl-devel -y wget https://ruby.taobao.org/mirrors/ ...
- 我的angularjs源码学习之旅1——初识angularjs
angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
随机推荐
- SNF快速开发平台MVC-高级查询组件
1. 高级查询 在我们做项目的时候经常想要按名称.编号进行查询数据,可在开发时会把最常用的查询条件写上,不常用的就不写了,也是因为把所有字段都写上太多了,布局不好看而且不实用.还有些查询条件几百年 ...
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- Nginx 日志自动分割
Nginx 的日志都是写在一个文件当中的,不会自动地进行切割,如果访问量很大的话,将导致日志文件容量非常大,不便于管理和造成Nginx 日志写入效率低下等问题.所以,往往需要要对access_log. ...
- struts2:数据标签
目录 数据标签1. a标签2. set标签3. push标签4. bean/param标签5. date标签6. include标签7. url标签8. property标签9. debug标签10. ...
- linux每日命令(17):which命令
我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索: which 查看可执行文件的位置. whereis 查看文件的位置. locate 配合数据库查看文件位置. f ...
- 【Android】Eclipse快捷键精选
1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了. 这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.x ...
- JAVA(三)JAVA常用类库/JAVA IO
成鹏致远 | lcw.cnblog.com |2014-02-01 JAVA常用类库 1.StringBuffer StringBuffer是使用缓冲区的,本身也是操作字符串的,但是与String类不 ...
- Node入门教程(11)第九章:Node 的网络模块
net网络模块 net模块是node对TCP或者IPC开发的封装,包括了客户端和服务器端相关API.对于阅读本文,请您有一定的网络编程的基础.您需要已经了解了: ip协议,会配置ip地址 了解dns解 ...
- Oracle---number数据类型
NUMBER ( precision, scale) precision表示数字中的有效位;如果没有指定precision的话,Oracle将使用38作为精度. 如果scale大于零,表示数字精确 ...
- JavaScript Scroll家族以及封装
JavaScript Scroll家族以及封装 scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离 获得scrollTop ...