AngularJS ocLazyLoad按需加载控制器/js文件的延迟加载（一）

一、ocLazyLoad说明

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

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

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

二、相关链接：

Git源代码地址：https://github.com/ocombe/ocLazyLoad

官方网址：https://oclazyload.readme.io

官方Api文档：https://oclazyload.readme.io/docs

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

1.引用

<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/Angular/angular.min.js"></script>
<script src="../Scripts/Angular/ocLazyLoad.min.js"></script>
<script src="../Scripts/Angular/angular-ui-router.min.js"></script>

    <h3>Lazy load测试</h3>
    <div id="example" ng-app="myApp" ng-controller="TestController"></div>

2.js

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

四、实例2，在控制器中动态加载其他依赖

1.html

<div class="container" ng-app="myApp" ng-controller="myCtrl">
    <ul class="nav nav-pills">
        <li role="presentation"><a href="#/home">首页</a></li>
        <li role="presentation"><a href="#/about">关于页面</a></li>
    </ul>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <div class="panel-title">模板内容</div>
        </div>
        <div class="panel-body" ui-view></div>
    </div>
</div>

2.js

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

五、实例3，全局配置+路由处理

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 '<h1>这是首页</h1>';
        },
        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  //事件绑定是否启用
    });
});

更多：

AngularJS 动态加载控制器实例-ocLoazLazy(二)

AngularJS路由之ui-router（一）