Angular4学习笔记之根模块与Ng模块


Posted in Javascript onSeptember 09, 2017

根模块 (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中。
You launch the application by bootstrapping the root AppModule. Among other things, the bootstrapping process creates the component(s) listed in the bootstrap array and inserts each one into the browser DOM.

每个被引导的组件都是它自己的组件树的根。 插入一个被引导的组件通常触发一系列组件的创建并形成组件树。
Each bootstrapped component is the base of its own tree of components. Inserting a bootstrapped component usually triggers a cascade of component creations that fill out that tree.

虽然你可以将多个组件树插入到宿主页面,但并不普遍。 大多数应用只有一个组件树,它们引导单一根组件。
While you can put more than one component tree on a host web page, that's not typical. Most applications have only one component tree and they bootstrap a single root component.

根组件通常命名为 AppComponent。

在 main.ts 中引导

引导应用的方法很多。 它们取决于你想如何编译应用以及应用将在哪儿运行。

通过即时 (JIT) 编译器动态引导

JIT, just-in-time

使用即时 (JIT) 编译器动态编译应用 src/main.ts

// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app/app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

使用预编译器 (AOT) 进行静态引导

AOT, ahead-of-time

静态方案可以生成更小、启动更快的应用,建议优先使用它,特别是在移动设备或高延迟网络下。

使用静态选项,Angular 编译器作为构建流程的一部分提前运行,生成一组类工厂。它们的核心就是 AppModuleNgFactory。

引导预编译的 AppModuleNgFactory:

// The browser platform without a compiler
import { platformBrowser } from '@angular/platform-browser';

// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app/app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

说明:由于整个应用都是预编译的,所以我们不用把 Angular 编译器一起发到浏览器中,也不用在浏览器中进行编译。

无论是 JIT 还是 AOT 编译器都会从同一份 AppModule 源码中生成一个 AppModuleNgFactory 类。 JIT 编译器动态地在浏览器的内存中创建这个工厂类。 AOT 编译器把工厂输出成一个物理文件,也就是我们在静态版本 main.ts 中导入的那个。

通常,AppModule 不必关心它是如何被引导的。AppModule 会随着应用而演化,但是 main.ts 中的引导代码不会变。

Ng模块 (NgModule)

特性模块

特性模块是带有 @NgModule 装饰器及其元数据的类,就像根模块一样。 特性模块的元数据和根模块的元数据的属性是一样的。

根模块和特性模块还共享着相同的执行环境。 它们共享着同一个依赖注入器,这意味着某个模块中定义的服务在所有模块中也都能用。

它们在技术上有两个显著的不同点:

  1. 我们引导根模块来启动应用,但导入特性模块来扩展应用。
  2. 特性模块可以对其它模块暴露或隐藏自己的实现。

特性模块用来提供了内聚的功能集合。 聚焦于应用的某个业务领域、用户工作流、某个基础设施(表单、HTTP、路由),或一组相关的工具集合。

虽然这些都能在根模块中做,但特性模块可以帮助我们把应用切分成具有特定关注点和目标的不同区域。

当前模块不会继承其它模块中对组件、指令或管道的访问权。根模块与特性模块的 imports 互不相干。如果某一个模块要绑定到 [(ngModel)] 就必需导入 FormsModule。

总结

本章整理内容较少,主要是详细理解 Angular 模块的概念、功能、关系。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
Vuex提升学习篇
Jan 11 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
vue实现树状表格效果
Dec 29 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
关于vue-router的beforeEach无限循环的问题解决
Sep 09 #Javascript
浅谈Express异步进化史
Sep 09 #Javascript
vue组件学习教程
Sep 09 #Javascript
weex里Vuex state使用storage持久化详解
Sep 09 #Javascript
Vue2几种常见开局方式详解
Sep 09 #Javascript
使用JS动态显示文本
Sep 09 #Javascript
深入理解ES7的async/await的用法
Sep 09 #Javascript
You might like
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP与以太坊交互详解
2018/08/24 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
JS实现div居中示例
2014/04/17 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
python文件写入实例分析
2015/04/08 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
小学教师听课制度
2014/02/01 职场文书
企业诚信承诺书
2014/05/23 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
文体活动总结
2015/02/04 职场文书
开学第一周值周总结
2015/07/16 职场文书
教导处教学工作总结
2015/08/12 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书