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控制器 效果: < ...
随机推荐
- Ubunt 使用Virtualbox虚拟机NAT无法上网解决办法
我的Ubuntu安装了一个Centos虚拟机,为了SSH和上外网的方便,使用了NAT+host Only方式,实现内网+外网,但是安装好的Centos不能连接外网,很是无语,只能Google了-- 解 ...
- SNF快速开发平台MVC-高级查询组件
1. 高级查询 在我们做项目的时候经常想要按名称.编号进行查询数据,可在开发时会把最常用的查询条件写上,不常用的就不写了,也是因为把所有字段都写上太多了,布局不好看而且不实用.还有些查询条件几百年 ...
- sql in not in 案例用 exists not exists 代替
from AppStoke B WHERE B.Opencode=A.Code) in用extist代替 select distinct * from Stoke where Code not in ...
- 十大高明的Google搜索技巧
WHY 对于google检索,有时需要技巧会得到更好的检索结果,不用简单输入关键字检索后,一个个去浏览.对于这些技巧,基本都知道,但是如果不经常用,总是忘了,又得重新搜索下具体使用方法,这里就把它放到 ...
- PSR PHP业界规范
0x0 大型项目的问题 随着项目越来越大,参与的人数越来越多,代码变得越来越不可维护了. 每个人都给项目带来自己的风格,所以这时就需要大家采用一个统一的标准. 0x1 解决办法 于是顶尖的PHPer们 ...
- .NET DLL 加密工具
最近发现了一个软件叫 DotfuscatorPro 混淆加密工具 设置方式如下 1. Settings->Global Options Disable String Encryption 设为 ...
- 【linux】——cscope
cscope是一款linux下的软件,其功能主要是用在阅读代码,堪称Windows下的Source Insight,但是配合vim使用,效率无与伦比.如需了解其具体使用,请先安装vim,然后在终端执行 ...
- .net core实现跨域
什么是跨域在前面已经讲解过了,这里便不再讲解,直接上代码. 一.后台API接口 用.net core创建一个Web API项目负责给前端界面提供数据. 二.前端界面 建立两个MVC项目,模拟不同的ip ...
- 从git上check out指定的文件夹至本地
当项目过大时,从服务器上拉取项目是件很头疼的事情,那么就说说怎么只拉区某个或几个文件夹至本地. git clone -n git@172.0.0.10:test/test_platform.git c ...
- spring mvc中获取请求URL
String baseUrl=request.getScheme()+"://"+request.getServerName()+":"+request.get ...