首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >教程|在 Angular 4 中加载功能模块(下)

教程|在 Angular 4 中加载功能模块(下)

作者头像
疯狂的技术宅
发布于 2019-03-28 07:30:58
发布于 2019-03-28 07:30:58
2.8K00
代码可运行
举报
文章被收录于专栏:京程一灯京程一灯
运行总次数:0
代码可运行

练习 2:惰性加载

假设多个团队正在为此应用程序开发模块。您的离岸团队刚交付了 Weather 和 Currency 模块。您的任务是将新模块合并到主应用程序中。

从应用程序源代码中解压 Angular4LazyLoadModules 文件(位于 Angular4TutorialSrc.zip 中)。将 weather 和 currency 文件夹复制到您的主应用程序目录中,如下所示。

图 8. 将辅助模块添加到主应用程序目录

您的下一个任务是告诉 Angular 为 Weather 和 Currency 模块实现惰性加载。要将新模块添加到基础应用程序中,可以编辑 app-routing.module.ts,如下所示:

清单 1. 原始 app-routing.module.ts 的一节

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const appRoutes: Routes = [ 
  { path: '', redirectTo: '/markets', pathMatch: 'full' },
  { path: 'markets', component: MarketsComponent },
  { path: 'sports', component: SportsComponent }
];

清单 2. 更新后的 app-routing.module.ts 的一节

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const appRoutes: Routes = [ 
  { path: '', redirectTo: '/markets', pathMatch: 'full' },
  { path: 'markets', component: MarketsComponent },
  { path: 'sports', component: SportsComponent },
  { path: 'weather', loadChildren: './weather/weather.module#WeatherModule' },
  { path: 'currency', loadChildren: './currency/currency.module#CurrencyModule' } 
];

更新后的代码告诉 Angular,在用户请求时加载辅助模块。请注意,weather 模块的 loadChildren 属性被设置为 WeatherModule 的地址。该地址是 WeatherModule 的文件位置(相对于应用程序根目录),后跟 # separator,再后面是已导出的模块类的名称 WeatherModule。Currency 模块的配置完全相同。

路由器导航到更新后的地址时,它会使用 loadChildren 字符串动态加载 WeatherModule 或 CurrencyModule。第一次请求某个新路径时,会惰性加载该模块并重新配置应用程序路径。然后该路径立即可供后续请求使用。

更新 UI

接下来,将会更新用户界面。在您的应用程序目录中找到文件 app.component.html,将光标放在以下语句下方:

清单 3. 原始 app.component.html 的一节

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<li routerLinkActive="active">
 <a routerLink="/sports">Sports</a>
</li>

在该语句下插入以下代码:

清单 4. 更新后的 app.component.html 的一节

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<li class="dropdown"> 
    <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle">
    Weather 
    <span class="caret"></span>
    </a>
  <ul class="dropdown-menu">
    <li routerLinkActive="active">
        <a [routerLink]="['/weather/yahoo']">Yahoo! Weather</a>
    </li>
    <li routerLinkActive="active">
        <a [routerLink]="['/weather/facts']">Weather Facts</a>
    </li>
    <li routerLinkActive="active">
        <a [routerLink]="['/weather/globalwarming']">Global Warming</a>
    </li>
  </ul>
</li>
<li routerLinkActive="active"> 
    <a routerLink="/currency">Currency</a>
</li>

现在用户将会看到并能单击 Weather 和 Sports 应用程序区域的新菜单。请注意,Weather 有 3 个子菜单。

保存文件内容,然后发出命令 ng serve 来运行该应用程序。

图 9. 该应用程序正在运行

现在检查执行 ng serve 命令后的应用程序输出。您会看到两个针对 “chunk” 文件的新行,它们是被 angular-cli 自动添加的。这些行表示您惰性加载的模块。

浏览器中的应用程序现在应包含 Weather 和 Currency 菜单,如图 10 所示。

图 10. 右上角的 Weather 和 Currency 菜单

幕后过程

在继续操作之前,我们看看此加载机制的细节。首先在 Chrome 浏览器中运行该应用程序。在 Windows 机器上,按下 Fn+F12。在 Mac 上,按下 Command->alt->i。单击 Network 选项卡并等待页面加载。单击 Weather 或 Currency 链接前,查看下面的图 11 (第 1 列)和图 12(第 1 列)。

图 11. 测试和调试期间可用的源代码

图 12. 网络相关信息

这些图显示了贪婪加载的模块 AppModule 和 BaseModule。可以看到 Weather 和 Currency 模块尚未加载。

现在尝试单击 Currency 菜单,查看图 11(第 2 列)和图 12(第 2 列)中的 Sources 和 Network 选项卡。您会看到 Currency 模块 (module(y.chunk.js)) 已加载。但是,Weather 模块尚未加载。单击 Weather,然后单击 Weather 子菜单下的一个菜单项。参见图 11(第 3 列)和图 12(第 3 列),您现在应看到 Weather 模块 (module(x.chunk.js)) 也已加载。

请注意,x 和 y 块分别有一个整数值;惰性加载机制通过它们获知要加载这些模块。

练习 3:预加载

除了等待用户调用辅助模块的路径,有时预先加载这些模块更高效。在这种情况下,在贪婪加载主要模块后,路由器开始预加载标有 loadChildren 属性的所有剩余模块。

要为预加载重新配置应用程序,可编辑您的 app-routing.module.ts,如下所示。下面的代码导入了预加载模块并调用它们的功能。

清单 5. 原始 app-routing.module.ts 的一节

JavaScript

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Routes, RouterModule } from '@angular/router';

清单 6. 更新后的 app-routing.module.ts 的一节

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

清单 7. 原始 app-routing.module.ts 的一节

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
imports:[RouterModule.forRoot(appRoutes)],

清单 8. 更新后的 app-routing.module.ts 的一节

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
imports:[RouterModule.forRoot(appRoutes, {preloadingStrategy:PreloadAllModules})],

保存更新后的文件,然后运行该应用程序。在 Chrome 浏览器中重新加载该应用程序,然后转到 Chrome 开发人员工具的 Network 和 Sources 选项卡。x.chunk.js 和 y.chunk.js 文件应紧接着主应用程序后被加载,使辅助模块在用户单击这些菜单之前就已可用。参见 Angular4PreLoadModules.zip 中的示例应用程序,更详细地了解预加载。

自定义预加载:在大型应用程序中,仅预先加载少数惰性加载模块的做法是比较合理的。请参见 Angular 文档的 路由和导航 部分,了解如何自定义预加载配置。

结束语

加载时间是应用程序性能的关键因素,它会影响应用程序的用户体验。本教程介绍了一种混合加载策略,使用贪婪加载、惰性加载和预加载 3 种技术来提高应用程序性能。要实现有效的混合加载策略,可遵循以下经验法则:

  • 对基础应用程序功能和主要模块使用贪婪加载。这些是必须在应用程序启动时就能用的资源。
  • 对大多数用户将要访问的模块使用预加载,即使它们不是第一个查找的或查找得最频繁的应用程序资源。
  • 对需求不太高的模块使用惰性加载。
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-07-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 京程一灯 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
教程|在 Angular 4 中加载功能模块(上)
过去几年来,Angular 作为单页 Web 应用程序的开发框架变得越来越流行。尽管 Angular 4 最初是为 JavaScript 而设计的,但它在 Angular 2 基础之上添加了对更多语言的支持,比如 Dart 和 Typescript。
疯狂的技术宅
2019/03/28
2.8K0
教程|在 Angular 4 中加载功能模块(上)
Angular 路由配置(预加载配置,懒加载配置)
(1)RouterModule对象提供了两个静态的方法:forRoot()和forChild()来配置路由信息。
玖柒的小窝
2021/11/04
3.7K0
Angular2 之 路由与导航基础知识路由模块组件路由路由守卫
最开始的路由,我们是直接写在app.module.ts文件中的,像这样,我们可以实现简单的导航。
贺贺V5
2018/08/21
4K0
Angular 从入坑到挖坑 - 路由守卫连连看
Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实现对于特性模块的惰性加载
程序员宇说
2020/06/04
4.5K0
Angular 启用预加载
在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。
玖柒的小窝
2021/11/03
1.8K0
Angular 启用预加载
🔥【Angular教程】路由入门
路由的概念在前端的框架中得到了广泛的应用,对于路由的感念不做阐述,路由的应用无外乎就是嵌套、传参,高级一些的功能如懒加载、预加载,再高级一些的如:路由守卫等。本篇我们就一起来看一看在Angular中如何使用路由。
前端小鑫同学
2022/12/25
4.8K0
🔥【Angular教程】路由入门
模块化开发 Angular 应用 [含懒加载]
然后,我们将学习怎么使用我们的模块来启用延迟加载,从而使应用更小,使用户体验更好。
Jimmy_is_jimmy
2022/09/19
3.5K0
模块化开发 Angular 应用 [含懒加载]
angular2路由预加载
1. 实现PreloadingStrategy 类 import { PreloadingStrategy, Route } from "@angular/router"; import { Observable } from "rxjs"; /** * 预加载策略 */ export class SelectivePreloadingStrategy implements PreloadingStrategy { preload(route: Route, load: Function): O
用户1437675
2018/08/20
1.1K0
了解 Angular 开发的内容
阅读本文,是在你了解 Angular 基本知识的前提下,如果读者还不了解,请前往官网了解。
Jimmy_is_jimmy
2022/04/15
1.2K0
了解 Angular 开发的内容
angular 路由使用
创建路由模块 ng generate module app-routing --flat --module=app 修改app-routing.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; // 引入路由模块 import { Routes, RouterModule } from '@angular/router'; // 引入被路由的组件 import
路过君
2020/06/19
1.3K0
ionic4初级教程-含登录、访问权限验证功能
如果第一次安装的时候失败,没关系 删掉已经生成的ioinc4Learn文件包,重新运行命令
lilugirl
2019/05/28
2.6K0
ionic4初级教程-含登录、访问权限验证功能
Angular 从入坑到挖坑 - Router 路由使用入门指北
Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递。至于路由守卫、路由懒加载等“高级”特性,并不会在本篇文章中呈现
程序员宇说
2020/05/19
4.9K0
用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)
为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库. 可以在项目里面建立一个database.sql, 并且建立一个数据库连接的profile(参考
solenovex
2018/03/29
2.6K0
用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)
Angular 项目实现权限控制
上一篇文章我们讲到了 Angular 组件通信。本文我们讲讲,在项目开发中,你是否会遇到这样的需求:
Jimmy_is_jimmy
2022/04/15
9320
Angular 项目实现权限控制
Angular 2 + 折腾记 :(4)初步了解路由及使用
路由就是控制视图与视图之间的跳转,之间还可以传递参数什么的,路由的退后及前进不会完整的请求整个页面,还可以完全不请求(在生命周期里面控制);
CRPER
2018/08/28
3.3K0
Angular学习(01)-架构概览
官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主。
请叫我大苏
2019/03/19
4.3K0
Angular学习(01)-架构概览
angular 路由懒加载_angular路由
在angular中路由即能加载组件又能加载模块,而我们说的懒加载实际上就是加载模块,目前还没有看到懒加载组件的例子。 加载组件使用的是component关键字 加载模块则是使用loadChildren关键字
全栈程序员站长
2022/11/08
1.6K0
Angular Provider 作用域
Services 是每个 Angular 应用程序的基本块之一。Service 是一个普通的 TypeScript 类,它也可以没有使用 @Injectable 装饰器。 比如下面是我们定义一个 UserService 类:
阿宝哥
2019/11/05
2K0
lerna-lite 轻量化 monorepo 管理利器
微前端是一个新旧项结合挺常见的一种技术,我司也成功借助京东前端团队推出的 micro-app 完成了一主两从 3 个独立项目的完美结合。但随着项目整体 sass 化逐步转型开始,迭代差异化增加就,相对应的造成了项目依赖安装、启动、编译等一系列事项的频率变高,解决这个拖慢研发节奏的问题我想到的方案就是引入 Monorepo 单仓库的管理。
前端小鑫同学
2024/04/24
4190
lerna-lite 轻量化 monorepo 管理利器
angular面试题及答案_angular面试
ngAfterContentInit:当把内容投影进组件之后调用,第一次调用ngDocheck()之后调用,只调用一次,只适用于组件
全栈程序员站长
2022/11/02
13.3K0
相关推荐
教程|在 Angular 4 中加载功能模块(上)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档