详解使用路由延迟加载 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 相关文章推荐
js一组验证函数
Dec 20 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
JavaScript 创建对象
Jul 17 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Bootstrap插件全集
Jul 18 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
js date 格式化
Feb 15 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
JavaScript 空间坐标的使用
Aug 19 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数据流应用的简单例子
2012/06/01 PHP
php中in_array函数用法分析
2014/11/15 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
SVG实现时钟效果
2018/07/17 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
python的三目运算符和not in运算符使用示例
2014/03/03 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
会计职业生涯规划书
2014/01/13 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL