angularjs1.4懒加载的基本用法

最新推荐文章于 2021-12-23 09:24:16 发布

讨厌走开啦

最新推荐文章于 2021-12-23 09:24:16 发布

阅读量2.6k

点赞数

分类专栏： angularjs 文章标签： angularjs 懒加载 oclazyload

本文链接：https://blog.csdn.net/lqlqlq007/article/details/79305989

版权

angularjs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

首先简单说明一下懒加载的作用：

顾名思义，懒即表示需要加载的资源不会在第一时间加载，而是在页面需要使用时再加载，通常用来提升首页加载效率。

下面用一个简单的例子来说明一下懒加载的基本用法：

例子功能说明：懒加载资源在controller中加载后供页面调用。

例子所需资源下载地址：
angular.min.js（1.4.6）下载地址：angular.min.js
oclazyload官网地址（需要npm，没有的话装个node吧）：https://oclazyload.readme.io/

基础页面：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ocLazyLoad.min.js"></script>
</head>
<body ng-controller="AppCtrl">
    <button onclick="lazyClick()">测试</button>
</body>
</html>
<script>
    var app = angular.module("app", ["oc.lazyLoad"]);
    app.controller("AppCtrl", function($ocLazyLoad) {
        $ocLazyLoad.load("lazy.js");
    });
    angular.bootstrap(document.body.parentElement, ["app"]);
</script>

懒加载资源：

function lazyClick() {
    alert("load lazy function success");
}

结果如下（懒加载资源可以正常调用）：

懒加载不仅能作用于普通的javascript文件，同样也能够作用于controller，把上面的例子修改一下：

例子（新增）所需资源下载地址：
angular-ui-router官网地址（下载需要npm，不过还支持CDN引用）：https://ui-router.github.io/ng1/

基础页面：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="ocLazyLoad.min.js"></script>
<script type="text/javascript" src="angular-ui-router.js"></script>
</head>
<body>
    <div ui-view></div>
</body>
</html>
<script>
    var app = angular.module("app", ["ui.router", "oc.lazyLoad"]);

    var routerConfigs = ["$stateProvider","$urlRouterProvider","$controllerProvider",
    function($stateProvider,$urlRouterProvider,$controllerProvider){

        app.controller = $controllerProvider.register;

        $urlRouterProvider.otherwise("/lazy");

        $stateProvider.state("lazy",{
            url:"/lazy",
            template:"<div><span>lazy page</span></div>",
            controller:"lazyCtrl",
            resolve:{
                deps:["$ocLazyLoad",function($ocLazyLoad){
                    return $ocLazyLoad.load("lazyCtrl.js");
                }]
            }
        });
    }];
    app.config(routerConfigs);
    angular.bootstrap(document.body.parentElement, ["app"]);
</script>

懒加载controller资源：

(function () {
    "use strict";
    var lazyCtrl = ["$rootScope", "$scope",
        function($rootScope , $scope){
            console.log("enter lazy controller");
        }];
    app.controller("lazyCtrl", lazyCtrl);
}());