脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → 路由延迟加载 Angular 模块

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

 更新时间：2017年10月12日 08:22:42   作者：冠军  
这篇文章主要介绍了详解使用路由延迟加载 Angular 模块,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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/

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

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

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

仅仅功能模块被加载了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • AngularJS服务service用法总结

    AngularJS服务service用法总结

    这篇文章主要介绍了AngularJS服务service用法,结合实例形式总结分析了服务Service的概念、功能及自定义服务的相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • Angular4实现图片上传预览路径不安全的问题解决

    Angular4实现图片上传预览路径不安全的问题解决

    这篇文章主要给大家介绍了关于Angular4实现图片上传预览路径不安全问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。
    2017-12-12
  • 使用Angular CLI从蓝本生成代码详解

    使用Angular CLI从蓝本生成代码详解

    这篇文章主要介绍了使用Angular CLI从蓝本生成代码详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 通过AngularJS实现图片上传及缩略图展示示例

    通过AngularJS实现图片上传及缩略图展示示例

    本篇文章主要介绍了通过AngularJS实现图片上传及缩略图展示，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • AngularJS入门教程二：在路由中传递参数的方法分析

    AngularJS入门教程二：在路由中传递参数的方法分析

    这篇文章主要介绍了AngularJS在路由中传递参数的方法,结合实例形式分析了AngularJS实现路由中传递参数的相关技巧,并总结了相关操作步骤与注意事项,需要的朋友可以参考下
    2017-05-05
  • 详解angular2封装material2对话框组件

    详解angular2封装material2对话框组件

    本篇文章主要介绍了详解angular2封装material2对话框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Angular 多模块项目构建过程

    Angular 多模块项目构建过程

    这篇文章主要介绍了Angular 多模块项目构建过程，本文大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 基于angularJS的表单验证指令介绍

    基于angularJS的表单验证指令介绍

    下面小编就为大家带来一篇基于angularJS的表单验证指令介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • AngularJS 2.0新特性有哪些

    AngularJS 2.0新特性有哪些

    本文介绍了其在AtScript、改善依赖入驻、Annotations、路由方案等方面的改变。虽然不知道打破原有是否是件好事，不过由于不向后兼容，我们需要为迁移做好计划
    2016-02-02
  • AngularJS 验证码60秒倒计时功能的实现

    AngularJS 验证码60秒倒计时功能的实现

    最近在做AngularJS 项目，这是写的一个60秒倒计时功能，下面小编给大家介绍AngularJS 验证码60秒倒计时功能的实现，需要的朋友参考下吧
    2017-06-06

最新评论