本文共 2572 字，大约阅读时间需要 8 分钟。

一、ocLazyLoad说明

1.ocLazyLoad是AngularJS的第三方库，可以实现模块、控制器及其他依赖的动态加载/按需加载

2.$ocLazyLoad.load()支持多个文件，可以自定义指定文件类型，可以自定义指定是否缓存在客户端

3.存在问题，$ocLazyLoad.load()，返回动态类型$$state，对于js文件不存在或加载失败还没有找到相关处理的api

二、相关链接：

Git源代码地址：

官方网址：

官方Api文档：

三、实例1，在控制器中动态加载模块

1.引用

Lazy load测试
    
   

angular.module('myApp', ['oc.lazyLoad']).controller('TestController', function ($scope, $ocLazyLoad, $compile) {    //动态加载模块    $ocLazyLoad.load('../scripts/myjs/module1.js').then(function () {        var el, elToAppend;        elToAppend = $compile('
   ')($scope);        el = angular.element('#example');        el.append(elToAppend);        console.log('加载成功');    }, function (e) {        console.log('加载失败');        console.error(e);    });});

1.html

   
    
    
        
     
首页
        
     
关于页面
    
    
    
    
        
     
            
      
       模板内容
      
        
     
        
     
    
    
   

//动态加载依赖文件var app = angular.module('myApp', ['ui.router', 'oc.lazyLoad']);app.config(function ($stateProvider, $urlRouterProvider) {    $stateProvider.state('index', {        url: '',        templateProvider: function () {            return '
这是首页
';        }    });});app.controller('myCtrl', function ($scope, $ocLazyLoad) {    //在controller中动态加载依赖    $ocLazyLoad.load([        "../Content/bootstrap.min.css",        {            files: ["../Scripts/jquery-1.10.2.min.js"],            cache: true        }    ]);});

1.模板同上

2.js

var app = angular.module('myApp', ['oc.lazyLoad', 'ui.router']);//配置路由app.config(function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {    $stateProvider.state('index', {        url: '',        //templateUrl: '/template/home.html',        templateProvider: function () {            return '
这是首页
';        },        resolve: {            des: function ($ocLazyLoad) {                //var ctrl = $ocLazyLoad.load('/scripts/myjs/home.js');                var ctrl = $ocLazyLoad.load([                    {                        files: '/scripts/myjs/none.js',                        cache: true //指定是否启用缓存                    }                ]);                console.info(ctrl);                //此处可以对加载失败的js文件处理                //console.info(typeof ctrl.$$state);                // console.info(ctrl.$$state);                //$$state 是动态类型，没法直接获取属性和值                if (ctrl.$$state.status == 2)                    return undefined;                return ctrl;            }        }    });    //全局配置    $ocLazyLoadProvider.config({        debug: true, //知否启用调试模式        events:true  //事件绑定是否启用    });});

转载地址：http://vcogi.baihongyu.com/