AngularJS中的按需加载ocLazyLoad

初学者,有不足的地方希望各位指出

一、前言

    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模块

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程坑太多

『中级篇』docker的数据持久化存储和数据共享(33)

PS:源码https://github.com/limingios/docker No.3 方便学习数据持久化存储

482
来自专栏北京马哥教育

各种 Python 实现的简单介绍与比较

1125
来自专栏编程坑太多

『中级篇』docker的数据持久化存储和数据共享(32)

PS:源码https://github.com/limingios/docker No.3 方便学习数据持久化存储

602
来自专栏逸鹏说道

Web Api 入门实战 (快速入门+工具使用+不依赖IIS)

平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,...

3265
来自专栏北京马哥教育

Linux 下使用 Sar 简介

介绍 Sar 最早是实现在 Salaris Unix 系统里,后来移植到了大部分其他的 Unix 系统(如AIX,HP-UX等)。Linux 下也有法国人写的 ...

3427
来自专栏我的博客

原生JavaScript第一天

首先:感谢李炎恢老师的无私奉献 其次:下面的学习总结都是根据李炎恢老师的视频以及参考网络资料编写,转载请注明出处:http://www.0377joyous.c...

2584
来自专栏前端架构与工程

webpack多页面开发与懒加载hash解决方案

本文内容只适用于webpack v1版本,webpack v2已经修复了hash计算规则。 之前讨论了webpack的hash与chunkhash的区别以及各...

1918
来自专栏哲学驱动设计

基于OEA框架的客户化设计(一) 总体设计

    这篇文章还是对工作内容的总结,主要是总结一下这几天做的产品的客户化工作内容。     关于产品线工程中客户化的理论知识和概念,请见金根的《产品线工程》。...

1998
来自专栏编程

重构的些许收获

题图:Pixabay 这个项目开始之初,赶时间上线。很多地方基本没怎么管代码规范,直到一期完毕回过头来看之前写的代码,不忍直视。为了之后接手的人能更加轻松,也为...

16710
来自专栏java架构学习交流

Java web开发,在一个jsp里放太多java代码的后果,摘自 java web轻量级开发面试教程

现要做一个简单的登录页面,如果用户通过验证,会显示Welcome用户名的欢迎词,反之则返回登录页面让用户再次输入 这部分的完整代码是JSPDemo项目里的log...

2017

扫描关注云+社区