详解使用路由延迟加载 Angular 模块


Posted in Javascript onOctober 12, 2017

Angular 非常模块化,模块化的一个非常有用的特性就是模块作为延迟加载点。延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源。这样 Angular 就不需要在第一个界面从服务器下载所有的文件,直到您请求它,才下载相应的模块。这对提供性能和减少首屏的初始下载文件尺寸有巨大的帮助。而且它可以很容易设置。

这里将使用一个简单示例来演示这个特性是如何工作的。将应用拆分为多个不同的模块,可以在需要的时候再进行延迟加载。

延迟加载的路由需要在根模块之外定义,所以,你需要将需要延迟加载的功能包含在功能模块中。

我们使用 Angular CLI 来创建一个演示项目:Demo.

ng new demo

然后,进入到 demo 文件夹中。安装必要的 package。

npm i

在安装之后,我们创建一个新的模块 shop。在 angular CLI 中,ng 是命令提示指令,g 表示 generate,用来创建某类新 item。

创建新的名为 shop 的模块就是:

ng g module shop

这会导致在 Angular 项目的 src/app 文件下创建一个新的文件夹,并添加一个名为 shop.module.ts 的模块定义文件。

然后,我们在默认的 app 模块和新创建的 shop 模块中分别创建组件。

ng g c home/home
ng g c shop/cart
ng g c shop/checkout 
ng g c shop/confirm

CLI 会将 home 分配到 app 模块中,将 cart、checkout、confirm 分配到 shop 模块中,比如,

此时的 shop.module.ts 内容如下:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

修改根组件

Angular CLI 默认生成的 app.component.ts 组件是应用的主页面,其中包含了一些关于 Angular 的介绍信息,我们将它修改成我们需要的内容。将默认生成的 app.component.html 内容修改为如下内容。

<!--The content below is only a placeholder and can be replaced.-->
<h1>Lazy Load Module</h1>
<a [routerLink]="['/shop']" >Shop Cart</a>
<router-outlet>
</router-outlet>

这里提供了一个占位的 router-outlet,各个组件将显示在这里面。

同时,提供了一个导航链接,可以直接导航到 /shop/cart 组件。

创建路由

根路由

首先创建根路由。

我们在 app 文件夹中,添加一个名为 main.routing.ts 的路由配置文件。内容如下:

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';

export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule' },
  { path: '**', component: HomeComponent }
];

其中,home 组件是正常的提前加载。

需要注意的是一下几点:

1. 我们使用了 loadChildren 来延迟加载一个模块。而不是使用提前加载所使用的 component。
2. 我们使用了一个字符串而不是符号来避免提前加载。
3. 我们不仅定义了模块的路径,还提供了模块的类名。

在 app.module.ts 中启用根路由。主要需要使用 forRoot 来启用根路由。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes)
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

模块路由

定义模块路由

对于 shop 模块来说,定义路由就没有什么特别了,我们这里可以定义一个名为 shop.route.ts 的路由定义文件,内容如下所示:

import { Routes } from '@angular/router'; 
import { CartComponent } from './cart/cart.component'; 
import { CheckoutComponent } from './checkout/checkout.component'; 
import { ConfirmComponent } from './confirm/confirm.component'; 
export const routes: Routes = [   
     { path: '', component: CartComponent },   
     { path: 'checkout', component: CheckoutComponent },  
     { path: 'confirm', component: ConfirmComponent } 
];

还需要修改一下模块定义文件 shop.module.ts 文件,以使用这个路由定义。注意我们需要使用 forChild 来启用子路由。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckoutComponent } from './checkout/checkout.component';
import { CartComponent } from './cart/cart.component';
import { ConfirmComponent } from './confirm/confirm.component';

import { routes } from './shop.routing'; 
import { RouterModule } from '@angular/router';

@NgModule({
 imports: [
  CommonModule,
  RouterModule.forChild(routes)
 ],
 declarations: [CheckoutComponent, CartComponent, ConfirmComponent]
})
export class ShopModule { }

已经一切就绪了。

测试延迟加载

现在启动应用。

ng serve

默认会在 4200 端口启动应用,请打开浏览器,访问:http://localhost:4200/

访问首页的网络访问如下,其中并不包含功能模块的内容。

详解使用路由延迟加载 Angular 模块

我们先将网络请求的历史记录清除掉。

然后点击链接,访问 /shop/cart 的时候,网络请求如下,可以看到一个新的脚本文件被加载,这里包含的就是延迟加载的功能模块。

详解使用路由延迟加载 Angular 模块

仅仅功能模块被加载了。

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

Javascript 相关文章推荐
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 #Javascript
js实现单张图片平移切换效果
Oct 11 #Javascript
jQuery自动或手动图片切换效果
Oct 11 #jQuery
简单实现vue验证码60秒倒计时功能
Oct 11 #Javascript
mui框架移动开发初体验详解
Oct 11 #Javascript
Scala解析Json字符串的实例详解
Oct 11 #Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
You might like
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
Python max内置函数详细介绍
2016/11/17 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
flask框架视图函数用法示例
2018/07/19 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
初二政治教学反思
2014/01/12 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
绩效管理实施方案
2014/03/19 职场文书
大学生求职自荐信
2015/03/24 职场文书
2015年资料员工作总结
2015/04/25 职场文书
入党积极分子考察意见
2015/06/02 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android