angularjs1.4懒加载的基本用法

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

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

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

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

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

基础页面:


<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");
}

结果如下(懒加载资源可以正常调用):
angularjs1.4懒加载的基本用法_第1张图片

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

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

基础页面:


<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:"
lazy page
"
, 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懒加载后工作正常):
angularjs1.4懒加载的基本用法_第2张图片

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

你可能感兴趣的:(angularjs)