浅谈Angular2 模块懒加载的方法


Posted in Javascript onOctober 04, 2017

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

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

先看项目文件结构:

浅谈Angular2 模块懒加载的方法

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,看看不同的页面是不是加载了不同的文件。

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

Javascript 相关文章推荐
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
JQuery遍历DOM节点的方法
Jun 11 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
利用python分析access日志的方法
Oct 26 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
浅谈angular2路由预加载策略
Oct 04 #Javascript
浅谈Angular路由复用策略
Oct 04 #Javascript
React-Native之定时器Timer的实现代码
Oct 04 #Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
You might like
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
hadoop中一些常用的命令介绍
2013/06/19 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
php对象工厂类完整示例
2018/08/09 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
js实现微信聊天界面
2020/08/09 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
使用python实现省市三级菜单效果
2016/01/20 Python
python处理html转义字符的方法详解
2016/07/01 Python
python基础之入门必看操作
2017/07/26 Python
python中的闭包函数
2018/02/09 Python
python实现爬取百度图片的方法示例
2019/07/06 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
物业管理应届生求职信
2013/10/28 职场文书
大学生的应聘自我评价
2013/12/13 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
模范家庭事迹材料
2014/02/10 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
计算机系本科生求职信
2014/05/31 职场文书
小学生环保标语
2014/06/13 职场文书
经济纠纷起诉状
2015/05/20 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python
基于Python实现对比Exce的工具
2022/04/07 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技