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

转载于:https://www.cnblogs.com/BestMePeng/p/AngularJS_ocLazyLoad.html

AngularJS中的按需加载ocLazyLoad相关推荐

.NET中的按需加载/延迟加载 LazyT
业务场景: 在项目开发中,经常会遇到特定的对象使用的加载问题,有的实例对象我们创建之后并非需要使用,只是根据业务场景来调用,所以可能会导致很多无效的实例加载延迟初始化出现于.NET 4.0,主要用于 ...
webpack中实现按需加载
当页面中一个文件过大并且还不一定用到的时候,我们希望在使用到的时候才开始加载这个文件俗称按需加载.这样可以减少页面的响应时间,提高访问速度. 使用webpack打包的出来的文件要实现以上的要求有两种方 ...
vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
这种场景你可能需要把模态框包装成插件.vue插件开发和组件的区别 - 水秋玄im.mkinit.com vue插件和组件的区别使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件.不 ...
devtools 无法加载 sourcemap_用 babel-plugin 实现按需加载
注意:本文并不是Babel的初学者教程,您需要具备一定的基础知识.在阅读本文前应具备babel基础知识,或者阅读用户手册本文主要介绍babel的工作流程,插件的工作原理,以及一些在实战中实现按需加载 ...
React-router 4 按需加载的实现方式及原理(Code Splitting)
React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,ge ...
ionic入门教程第十六课-在微信中使用ionic的解决方案（按需加载加强版）
对于微信端来说,其实使用ionic是一个比较大的前端框架. 有更多比较轻量化的前端框架可以选择. 但是使用ionic有一个明显的优点就是,能够做到一端开发,三端同步上线. 这个梗说了好多遍了,但确实是 ...
angularJS+requireJS实现controller及directive的按需加载
最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: ...
echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...

AngularJS中的按需加载ocLazyLoad

AngularJS中的按需加载ocLazyLoad相关推荐

最新文章

热门文章