angularjs ocLazyLoad分步加载js文件实例


Posted in Javascript onJanuary 17, 2017

用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在页面载入时并没有加载:

 页面初始化:

angularjs ocLazyLoad分步加载js文件实例

angularjs ocLazyLoad分步加载js文件实例

当点击子页面和三级页面时,会依次加载所依赖的js文件.实现分步加载.

点击子页面:

angularjs ocLazyLoad分步加载js文件实例

angularjs ocLazyLoad分步加载js文件实例

三级页面:

angularjs ocLazyLoad分步加载js文件实例

angularjs ocLazyLoad分步加载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"]
         })
       }]
     }
  });

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

Javascript 相关文章推荐
jQuery弹出(alert)select选择的值
Apr 21 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
再探JavaScript作用域
Sep 24 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 Javascript
微信小程序 登陆流程详细介绍
Jan 17 #Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 #Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 #Javascript
js处理层级数据结构的方法小结
Jan 17 #Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 #Javascript
JavaScript的事件机制详解
Jan 17 #Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 #Javascript
You might like
十天学会php之第七天
2006/10/09 PHP
删除数组元素实用的PHP数组函数
2008/08/18 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
浅析python递归函数和河内塔问题
2017/04/18 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
python中bytes和str类型的区别
2019/10/21 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
什么是唯一索引
2015/07/05 面试题
广告传媒专业应届生求职信
2014/03/01 职场文书
公司授权委托书
2014/04/04 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书