e起飞young
一个前端码农的技术博客
angularJS插件:ocLazyLoad实现懒加载模块和组件
[ 2017/06/16, 4332阅, 0评 ]
ocLazyLoad
Lazy load modules & components in AngularJS
代码库:https://github.com/ocombe/ocLazyLoad

壹、特性

Dependencies are automatically loaded
Debugger friendly (no eval code)
The ability to mix normal boot and load on demand
Load via the service or the directive
Use the embedded async loader or use your own (requireJS, ...)
可加载js (angular or not) / css / templates files
兼容AngularJS 1.2.x/1.3.x/1.4.x/1.5.x/1.6.x

贰、个人常用:按路由动态加载所需文件

<script type="text/javascript" src=".../angular.min.js"></script>
<script type="text/javascript" src=".../angular-route.min.js"></script>
<script type="text/javascript" src=".../ocLazyLoad.min.js"></script>
var myApp = angular.module('myApp', [
	'ngRoute',
	'oc.lazyLoad'
])
.config(function($routeProvider,$controllerProvider,$compileProvider,$filterProvider,$provide){
	myApp.controller = $controllerProvider.register;
	myApp.directive = $compileProvider.directive;
	myApp.filter = $filterProvider.register;
	myApp.factory = $provide.factory;
	myApp.service = $provide.service;
	myApp.constant = $provide.constant;
	//路由
	var version = "?ver=1.0";
    $routeProvider.
	//...加载单个文件
    when('/aaa', {
        templateUrl: 'app/views/aaa.html'+version,
		controller: 'aaaController',
        resolve: {
			loadMyCtrl: function($ocLazyLoad){
				return $ocLazyLoad.load('app/controller/aaa.js'+version);
			}
		}
    }).
	//...加载多个文件
    when('/bbb', {
        templateUrl: 'app/views/bbb.html'+version,
		controller: 'bbbController',
        resolve: {
			loadMyCtrl: function($ocLazyLoad){
				return $ocLazyLoad.load([
					'app/controller/bbb.js'+version,
					'app/statics/js/echarts.simple.min.js'
				]);
			}
		}
    }).
    otherwise({
        redirectTo: '/login'
    });
})

叁、参考资料

AngularJs 实现动态(懒)加载

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

有朋自远方来...评论一下呗O(∩_∩)O

  • 搜索