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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
常用js脚本
Dec 03 Javascript
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
Js经典案例的实例代码
May 10 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
JavaScript 绘制饼图的示例
Feb 19 Javascript
关于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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
php 常用的系统函数
2017/02/07 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
表格 隔行换色升级版
2009/11/07 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
layui选项卡效果实现代码
2017/05/19 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
vue构建动态表单的方法示例
2018/09/22 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python解析xml文件操作实例
2014/10/05 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python中栈的原理及实现方法示例
2019/11/27 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python实现弹球小游戏
2020/08/01 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
公司年会抽奖活动主持词
2014/03/31 职场文书
终止劳动合同协议书
2014/04/14 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
保送生自荐信范文
2015/03/26 职场文书