详解使用路由延迟加载 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 相关文章推荐
jquery 打开窗口返回值实现代码
Mar 04 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
javascript基本语法
May 31 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
实例分析js事件循环机制
Dec 13 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
python查看FTP是否能连接成功的方法
2015/07/30 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
python中最小二乘法详细讲解
2021/02/19 Python
世界上最大的各式箱包网络零售店:eBag
2016/07/21 全球购物
高二美术教学反思
2014/01/14 职场文书
中专生自荐信
2014/06/25 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
工作时间调整通知
2015/04/24 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
详解CSS故障艺术
2021/05/25 HTML / CSS