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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
js实现简单的计算器功能
Jan 16 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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中Date获取时间不正确怎么办
2008/06/05 PHP
解析php中反射的应用
2013/06/18 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
Python实现配置文件备份的方法
2015/07/30 Python
python实现外卖信息管理系统
2018/01/11 Python
python tornado修改log输出方式
2019/11/18 Python
python计算导数并绘图的实例
2020/02/29 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
学生周末长期请假条
2014/02/15 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
通知的格式范文
2015/04/27 职场文书
歌剧魅影观后感
2015/06/05 职场文书
关于运动会的广播稿
2015/08/19 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS