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(一)

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值