angularjs ocLazyLoad分步加载js文件实例
更新时间：2017年01月17日 11:04:46 作者：Ricky_Huang
本篇文章主要介绍了angularjs ocLazyLoad分步加载js文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此:
问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ui-router-lazyload</title>
<link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
<script src="../angular/angular.min.js"></script>
<script src="../angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="index.js"></script>
</head>
<style>
body{
font-family: "Microsoft JhengHei UI";
}
.navigator{
width: 500px;margin: 0 auto
}
.navigator li{
color: #000;font-size: 14px;
}
</style>
<body ng-controller="myController">
<ul class="navigator nav nav-pills">
<li role="presentation" class="active"><a href="#home" ng-click="isActive($event)">主页</a></li>
<li role="presentation" class="active"><a href="#child">子页面</a></li>
<li role="presentation" class="active"><a href="#third" ng-click="isActive($event)">三级页面</a></li>
</ul>
<div ui-view style="width: 500px;margin: 50px auto 0"></div>
</body>
</html>
js代码:
var myApp=angular.module("myApp",["ui.router","oc.lazyLoad"]);
myApp.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.when("","/home");
$stateProvider.state('home',{
url:"/home",
templateUrl: 'homepage.html',
resolve:{
loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:"homeApp",
files:["homepage.js"]
})
}]
}
});
$stateProvider.state('index',{
url:"/home",
templateUrl:'index.html'
});
$stateProvider.state('child',{
url:"/child",
templateUrl:'child.html',
resolve:{
loadMyCtrl:function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:'childApp',
files:["child.js"]
})
}
}
})
$stateProvider.state('third',{
url:"/third",
templateUrl:'third.html',
resolve:{
loadMyCtrl:function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:'grandApp',
files:["third.js"]
})
}
}
})
});
myApp.controller("myController",function ($state,$scope,$location) {
$scope.turnPage=function () {
// $state.go('home');
$location.path('/home')
}
});
页面初始效果如下图,打开浏览器控制台,可以看到child.js以及third.js在页面载入时并没有加载:
页面初始化:
当点击子页面和三级页面时,会依次加载所依赖的js文件.实现分步加载.
点击子页面:
三级页面:
填坑:网上关于angular按需加载的文章也蛮多的,也有人使用的是requireJS来进行这个操作,而且ocLazyLoad的使用方法也有很多.之前按照一些文档的方法,在配置路由时,加了下面的蓝色代码,页面是能跳转,但是homepage.html的js代码却执行了两次,难道是控制器加载了两次么.对于这个坑,我还在探索中,也希望大家能够发表意见或者建议.
$stateProvider.state('home',{
url:"/home",
controller:'homeController',
templateUrl: 'homepage.html',
resolve:{
loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {
return $ocLazyLoad.load({
name:"homeApp",
files:["homepage.js"]
})
}]
}
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
大家都是在Reactive Extensions for Javascript诞生于几年前，随着angular2正式版的发布，它将会被更多开发者所认知。这篇文章我们来详细介绍RxJs提供的Observable对象，有需要的朋友们可以参考借鉴。2016-09-09
这篇文章主要介绍了AngularJS实现的锚点楼层跳转功能,涉及AngularJS事件响应实现锚点跳转功能的相关操作技巧,需要的朋友可以参考下2018-01-01
这篇文章主要介绍了angular多语言配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
详解Angular 中 ngOnInit 和 constructor 使用场景
最初学习Angular的时候总是搞不清楚ngOnInit和constructor的区别，现在我们来稍微理一下两者之间的区别。2017-06-06
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等2015-12-12
angularJs中ng-model-options设置数据同步的方法
今天小编就为大家分享一篇angularJs中ng-model-options设置数据同步的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）
这篇文章主要介绍了Angularjs中的验证input输入框只能输入数字和小数点的写法,需要的朋友可以参考下2017-08-08
我们所说的模块，是你的AngularJS应用程序的一个组成部分，它可以是一个Controller，也可以是一个Service服务，也可以是一个过滤器(Filter)，也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ，感兴趣的朋友一起学习吧2016-01-01
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码，非常不错具有参考借鉴价值，感兴趣的朋友一起看看吧2016-05-05
这篇文章主要为大家介绍了Angular中懒加载模块初始化技术实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
最新评论