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 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
three.js 如何制作魔方
Jul 31 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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 rsa加密解密使用详解
2015/01/14 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
详解node nvm进行node多版本管理
2017/10/21 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
从零学Python之hello world
2014/05/21 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
python设置中文界面实例方法
2020/10/27 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
财政专业求职信范文
2014/02/19 职场文书
法制宣传月活动总结
2014/04/29 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
暑期培训班招生方案
2014/08/26 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
筑梦中国心得体会
2016/01/18 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
一行Python命令实现批量加水印
2022/04/07 Python