AngularJS中的按需加载ocLazyLoad示例


Posted in Javascript onJanuary 11, 2017

一、前言

ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好。二来,分模块加载易于团队协作,减低代码冲突。

二、按需加载的对象

各个Controller模块、Directive模块、Server模块、template模板,其实这些都是一些 .js文件或者 .html文件 。

三 、按需加载的场景

1 路由加载(resolve/uiRouter)

基于uiRouter的resolve是在加载controller和template之前所执行的一系列操作,它帮助我们初始化我们所要前往的那一个视图。只有be solved(操作完成),controller才会被实例化。因此,我们可以在resolve步骤里面加载我们所需要的controller。

$stateProvider
    .state('index', {
      url: '/',
      views: {
        'lazyLoadView': {
          templateUrl: 'partials/main.html',
          controller: 'AppCtrl'
        }  
      },
      resolve: {
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){
          return $ocLazyLoad.load('js/AppCtrl.js')
        }]
      }
    })

其中,'js/AppCtrl.js'里面放着一个我们所需要的controller

angular.module('myApp')
.controller('AppCtrl', ['$scope', function($scope){
//...
}])

2 依赖加载

在依赖项里面导入我们所需要的一系列模块(这里有一层'[ ]'符合哦)

angular.module('gridModule', [[
  'bower_components/angular-ui-grid/ui-grid.js',
  'bower_components/angular-ui-grid/ui-grid.css'
]]).controller('GridModuleCtrl', ['$scope', function($scope){
  //...
}])

3 Cotroller里动态加载

angular.module('myApp')
.controller('AppCtrl', ['$scope','$ocLazyLoad', function($scope, $ocLazyLoad){
  $scope.loadBootstrap = function(){
    $ocLazyLoad.load([
     'bower_components/bootstrap/dist/js/bootstrap.js',
     'bower_components/bootstrap/dist/css/bootstrap.css'
    ])
  }
  var unbind = $scope.$on('ocLazyLoad.fileLoaded', function(e, file){
    $scope.bootstrapLoaded = true;
     console.log('下载boot完成');
     unbind();
  })
}])

4 template包含加载(config)

如何处理我们所加载的html模板里面嵌套的controller呢?这里需要oc-lazy-load指令和$ocLazyLoadProvider的配置

/*template A.html*/
<h1>hi i am hzp </h1>
  <div oc-lazy-load="gridModule">
    <div ng-controller="GridModuleCtrl">
      <span>{{test}}</span><br/>
      <div ui-grid="gridOptions" class="gridStyle"></div>
    </div>
  </div>
</div>


  $ocLazyLoadProvider.config({
    modules: [{
      name: 'gridModule',
      files: [
        'js/gridModule.js'
      ]
    }]
  })

四、如何组织按需加载

分路由、按功能来区分、打包成不同的多个或单个controller.directive.server模块

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

Javascript 相关文章推荐
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
js与applet相互调用的方法
Jun 22 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
JS动画定时器知识总结
Mar 23 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 #Javascript
JavaScript实现大图轮播效果
Jan 11 #Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 #Javascript
canvas 弹幕效果(实例分享)
Jan 11 #Javascript
JQuery实现动态操作表格
Jan 11 #Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 #Javascript
You might like
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
利用python实现周期财务统计可视化
2019/08/25 Python
简单了解python中的与或非运算
2019/09/18 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
企业领导对照检查材料
2014/08/20 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
销售助理岗位职责
2015/02/11 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python