详解AngularJS通过ocLazyLoad实现动态（懒）加载模块和依赖

最近在使用angularjs，发现angularjs菜鸟教程上的东西太过于基础，很多东西都没有提及，比如今天的一个关于前端的优化问题，懒加载。通过路由实现地址分发的时候，再通过懒加载模式加载你所需的文件，比如是相关的controller，就是js，这样有利于提高首次加载的负担。

下面就是一个懒加载的实现过程。

实现的过程主要是引用3个主要的js文件：

<script src="angular/1.4.8/angular/angular.min.js"></script>
<script src="angular/ui-router/release/angular-ui-router.min.js"></script>
<script src="angular/oclazyload/src/oclazyload.min.js"></script> 

然后通过 app 配置，将依赖的脚本进行注入操作：

var app = angular.module('pkcms', ["ui.router", "oc.lazyload"]);

　　app.config(["$provide", "$compileprovider", "$controllerprovider", "$filterprovider",

　　 　　function ($provide, $compileprovider, $controllerprovider, $filterprovider) {

　　　　　　　app.controller = $controllerprovider.register;

　　　　　　　app.directive = $compileprovider.directive;

　　　　　　　app.filter = $filterprovider.register;

　　　　　　　app.factory = $provide.factory;

　　　　　　　app.service = $provide.service;

　　　　　　　app.constant = $provide.constant;

　　 　　}]);

　　　　// 按模块化加载其他的脚本文件

　　　　　　app.constant('modules_config', [

　　　　　　　{

　　　　　　　　　name: 'treecontrol',

　　　　　　　　　serie: true,

　　　　　　　　 files: [

　　　　　　　　　　　"scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"

　　　　　　　　　]<br>}]);

　　　　　　app.config(["$oclazyloadprovider","modules_config",routefn]);

　　　　　　function routefn($oclazyloadprovider,modules_config){

　　　　　　　$oclazyloadprovider.config({

　　　　　　　debug:false,

　　　　　　　events:false,

　　　　　　　modules:modules_config

　　　});

}; 

以上是初始化动态加载的配置过程。

接着是建立路由：

"use strict"
app.config(["$stateprovider","$urlrouterprovider",routefn]);
function routefn($stateprovider,$urlrouterprovider){
 $urlrouterprovider.otherwise("/main");
 $stateprovider
 .state("main",{
 url:"/main",
 templateurl:"views/main.html",
 controller:"mainctrl",
 controlleras:"main",
 resolve:{
 deps:["$oclazyload",function($oclazyload){
 return $oclazyload.load("controllers/main.js");
 }]
 }
 })
 .state("adminuser",{
 url:"/adminuser",
 templateurl:"views/adminuser.html",
 controller:"adminuserctrl",
 controlleras:"adminuser",
 resolve:{
 deps:["$oclazyload",function($oclazyload){
 return $oclazyload.load("controllers/adminuser.js");
 }]
 }
 })
};

最后是按路由配置的在对应目录下建2个html页面文件和2个js文件用做测试

main.html

<div>
 {{main.value}}
</div>

adminuser.html

<div>
 {{adminuser.value}}
</div>

main.js 

/**
 * mainctrl
 * created by pkcms.cn on 2016/6/24.
 */
(function () {
 "use strict"
 app.controller("mainctrl", mainctrlfn);
 function mainctrlfn() {
 this.value = "hello world";
 }
}())

adminuser.js

 /**
 * adminuserctrlfn
 * created by pkcms.cn on 2016/6/24.
 */
(function () {
 app.controller('adminuserctrl',adminuserctrlfn);
 function adminuserctrlfn() {
 this.value = "welcome to admin user";
 }
}());

demo下载:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。