angularjs1.4懒加载的基本用法

- 日理万妓 2022-05-31 07:05 62阅读 0赞

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

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

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

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

例子所需资源下载地址：  
angular.min.js（1.4.6）下载地址：[angular.min.js][]  
oclazyload官网地址（需要npm，没有的话装个node吧）：[https://oclazyload.readme.io/][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");
    }

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

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

例子（新增）所需资源下载地址：  
angular-ui-router官网地址（下载需要npm，不过还支持CDN引用）：[https://ui-router.github.io/ng1/][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);
    }());

结果如下（controller懒加载后工作正常）：  
![懒加载controller][controller]

同理，service、factory等等同样可以懒加载，且懒加载支持预配置等功能，有兴趣的同学可以自行前往oclazyload官网学习。

[angular.min.js]: https://code.angularjs.org/1.4.6/angular.min.js
[https_oclazyload.readme.io]: https://oclazyload.readme.io/
[20180210180557849]: /images/20220531/92f46761f0734805bb70d7b121bb2d84.png
[https_ui-router.github.io_ng1]: https://ui-router.github.io/ng1/
[controller]: /images/20220531/123d594a6e65411f82e55789c27bda54.png