浅谈Angular2 模块懒加载的方法

 更新时间:2017年10月04日 09:26:08   作者:冰冻鱼  
本篇文章主要介绍了浅谈Angular2 模块懒加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了。所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验。

下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/

先看项目文件结构:

home模块放到src/app/home目录下,里面的home目录是home组件。

home模块有单独的定义和路由(home.module.ts,home-routing.module.ts)

创建HOME模块和HOME组件:

cd src/app/
mkdir home
cd home
ng g module home
ng g component home

创建HOME模块的路由配置模块

创建 home-routing.module.ts:

import {Routes, RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {NgModule} from "@angular/core";

const routes: Routes=[
 {
  path:'',
  component:HomeComponent
 }
]

@NgModule({
 imports:[RouterModule.forChild(routes)],
 exports:[RouterModule],
 providers:[]

})
export class HomeRoutingModule{}

模块下的页面都可以单独在该模块自己的的路由配置模块上配置,而不用在app-routing.module.ts里配置,注意RouterModule.forChild(routes)

home.module.ts导入路由模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import {HomeRoutingModule} from "./home-routing.module";

@NgModule({
 imports: [
  CommonModule,
  HomeRoutingModule
 ],
 declarations: [HomeComponent]
})
export class HomeModule { }

在app-routing.module.ts配置路由:

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {UserListComponent} from "./user/user-list/user-list.component";
import {UserDetailComponent} from "./user/user-detail/user-detail.component";
import {RxjsComponent} from "./rxjs/rxjs.component";
import {UserEditComponent} from "./user/user-edit/user-edit.component";
import {environment} from "../environments/environment";

const routes: Routes = [
 {
  path:'home',
  loadChildren:'app/home/home.module#HomeModule'
 }

];

@NgModule({
 imports: [RouterModule.forRoot(routes,{ useHash: environment.useHash })],
 exports: [RouterModule],
 providers: []
})
export class AppRoutingModule { }

配置home路径,使用loadChildren加载home模块

完成后打开chrome的开发者工具,切到Network,看看不同的页面是不是加载了不同的文件。

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

相关文章

  • Ionic + Angular.js实现验证码倒计时功能的方法

    Ionic + Angular.js实现验证码倒计时功能的方法

    验证码倒计时这个功能相信对大家每个人来说都不陌生,之前介绍了在Android中的实现方法,下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料,文中介绍的非常详细,需要的朋友们下面来一起看看吧。
    2017-06-06
  • angular实现表单验证及提交功能

    angular实现表单验证及提交功能

    这篇文章主要为大家详细介绍了angular实现表单验证及提交功能的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 如何在Angular2中使用jQuery及其插件的方法

    如何在Angular2中使用jQuery及其插件的方法

    本篇文章主要介绍了如何在Angular2中使用jQuery及其插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • AngularJS的依赖注入实例分析(使用module和injector)

    AngularJS的依赖注入实例分析(使用module和injector)

    这篇文章主要介绍了AngularJS的依赖注入,结合实例形式分析了依赖注入的原理及使用module和injector实现依赖注入的步骤与操作技巧,需要的朋友可以参考下
    2017-01-01
  • angularJS 入门基础

    angularJS 入门基础

    这篇文章主要介绍了angularJS 入门基础的相关资料,需要的朋友可以参考下
    2015-02-02
  • Angular模板表单校验方法详解

    Angular模板表单校验方法详解

    这篇文章主要为大家详细介绍了Angular模板表单校验方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • angular中默认路由的理解用法详解

    angular中默认路由的理解用法详解

    这篇文章主要介绍了angular中的默认路由的用法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-02-02
  • Angular 4根据组件名称动态创建出组件的方法教程

    Angular 4根据组件名称动态创建出组件的方法教程

    组件是我们在学习angular中必不可少的一部分,下面这篇文章主要给大家介绍了关于Angular 4如何根据组件名称动态创建出组件的相关资料,文中通过图文与示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-11-11
  • Angular.js中angular-ui-router的简单实践

    Angular.js中angular-ui-router的简单实践

    本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • AngularJS实现controller控制器间共享数据的方法示例

    AngularJS实现controller控制器间共享数据的方法示例

    这篇文章主要介绍了AngularJS实现controller控制器间共享数据的方法,结合简单实例形式分析了AngularJS控制器数据共享的实现方法,需要的朋友可以参考下
    2017-10-10

最新评论