搜尋

首頁 >web前端 >js教程 >探索angularjs+requirejs全面實現按需載入的套路_AngularJS

探索angularjs+requirejs全面實現按需載入的套路_AngularJS

PHP中文网
PHP中文网原創
2016-05-16 15:13:121477瀏覽

在進行有一定規模的專案時，通常希望實現以下目標：1、支援複雜的頁面邏輯（根據業務規則動態展現內容，例如：權限，資料狀態等）；2、堅持前後端分離的基本原則（不分離的時候，可以在後端用模版引擎直接生成好頁面）；3、頁面加載時間短（業務邏輯複雜就需要引用第三方的庫，但很可能加載的庫和用戶本次操作沒關係）；4，也要程式碼好維護（加入新的邏輯時，影響的文件盡量少）。

想同時實現這些目標，就必須有一套按需加載的機制，頁面上展現的內容和所有需要依賴的文件，都可以根據業務邏輯需要按需加載。最近都是基於angularjs做開發，所以本文主要圍繞在angularjs提供的各種機制，探索全面實作按需載入的套路。

一、一步一步實現
基本思路：1、先開發一個框架頁面，它可以完成一些基本的業務邏輯，並且支援擴充的機制；2、商業邏輯變得複雜，需要把部分邏輯拆分到子頁面中，子頁面按需加載；3、子頁面中的展現內容也變了複雜，又需要進行拆分，按需加載；4、子頁面的內容複雜到依賴外部模組，需要按需載入angular模組。

1、框架頁
提到前端的按需加載，就會想到AMD（ Asynchronous Module Definition），現在用requirejs的非常多，所以先考慮引入requires。

index.html

<script src="static/js/require.js" defer async data-main="/test/lazyspa/spa-loader.js"></script>

注意：採用手動啟動angular的方式，因此html中沒有ng-app。

spa-loader.js

require.config({
  paths: {
    "domReady": &#39;/static/js/domReady&#39;,
    "angular": "//cdn.bootcss.com/angular.js/1.4.8/angular.min",
    "angular-route": "//cdn.bootcss.com/angular.js/1.4.8/angular-route.min",
  },
  shim: {
    "angular": {
      exports: "angular"
    },
    "angular-route": {
      deps: ["angular"]
    },
  },
  deps: [&#39;/test/lazyspa/spa.js&#39;],
  urlArgs: "bust=" + (new Date()).getTime()
});

spa.js

define(["require", "angular", "angular-route"], function(require, angular) {
  var app = angular.module(&#39;app&#39;, [&#39;ngRoute&#39;]);
  require([&#39;domReady!&#39;], function(document) {
    angular.bootstrap(document, ["app"]); /*手工启动angular*/
    window.loading.finish();
  });
});

2、隨選載入子頁

2、隨選載入子頁

angular的routeProvider+ng-view已經提供完整的子頁面載入的方法，直接使用。

注意必須設定html5Mode，否則url變化以後，routeProvider不截獲。 

<div>
  <a href="/test/lazyspa/page1">page1</a>
  <a href="/test/lazyspa/page2">page2</a>
  <a href="/test/lazyspa/">main</a>
</div>
<div ng-view></div>
index.html

app.config([&#39;$locationProvider&#39;, &#39;$routeProvider&#39;, function($locationProvider, $routeProvider) {
  /* 必须设置生效，否则下面的设置不生效 */
  $locationProvider.html5Mode(true);
  /* 根据url的变化加载内容 */
  $routeProvider.when(&#39;/test/lazyspa/page1&#39;, {
    template: &#39;<div>page1</div>&#39;,
  }).when(&#39;/test/lazyspa/page2&#39;, {
    template: &#39;<div>page2</div>&#39;,
  }).otherwise({
    template: &#39;<div>main</div>&#39;,
  });
}]);
spa.js


3、隨選載入子頁中的內容

用routeProvider的前提是url要發生變化，但是有的時候只是子頁面中的局部要發生變化。如果這些變化主要是和綁定的資料相關，不影響頁面佈局，或者影響很小，那麼透過ng-if一類的標籤基本上就解決了。但有的時候要根據頁面狀態，完全改變局部的內容，例如：使用者登入前和登入後局部要發生的變化等，這就意味著局部的佈局可能也挺複雜，需要作為獨立的單元來對待。

利用ng-include可以解決頁面局部內容載入的問題。但是，我們可以再考慮更複雜的情況。這個頁面片段對應的程式碼是後端動態產生的，而且不只html還有js，js定義了程式碼片段對應的controller。這種情況下，不僅要考慮動態載入html的問題，還要考慮動態定義controller的問題。 controller是透過angular的controllerProvider的register方法註冊，因此需要取得controllerProvider的實例。

spa.js
app.config([&#39;$locationProvider&#39;, &#39;$routeProvider&#39;, &#39;$controllerProvider&#39;, 
function($locationProvider, $routeProvider, $controllerProvider) {
  app.providers = {
    $controllerProvider: $controllerProvider //注意这里！！！
  };
  /* 必须设置生效，否则下面的设置不生效 */
  $locationProvider.html5Mode(true);
  /* 根据url的变化加载内容 */
  $routeProvider.when(&#39;/test/lazyspa/page1&#39;, {
    /*!!!页面中引入动态内容!!!*/
    template: &#39;<div>page1</div><div ng-include="\&#39;page1.html\&#39;"></div>&#39;,
    controller: &#39;ctrlPage1&#39;
  }).when(&#39;/test/lazyspa/page2&#39;, {
    template: &#39;<div>page2</div>&#39;,
  }).otherwise({
    template: &#39;<div>main</div>&#39;,
  });
  app.controller(&#39;ctrlPage1&#39;, [&#39;$scope&#39;, &#39;$templateCache&#39;, function($scope, $templateCache) {
    /* 用这种方式，ng-include配合，根据业务逻辑动态获取页面内容 */
    /* !!!动态的定义controller!!! */
    app.providers.$controllerProvider.register(&#39;ctrlPage1Dyna&#39;, [&#39;$scope&#39;, function($scope) {
      $scope.openAlert = function() {
        alert(&#39;page1 alert&#39;);
      };
    }]);
    /* !!!动态定义页面的内容!!! */
    $templateCache.put(&#39;page1.html&#39;, &#39;<div ng-controller="ctrlPage1Dyna">
    <button ng-click="openAlert()">alert</button></div>&#39;);
  }]);
}]);


4、動態載入模組

採用上面子頁面的片段載入方式存在一個局限，就是各種邏輯（js）要加入到啟動模組中，這樣還是限制子頁面片段的獨立封裝。特別是，如果子頁面片段需要使用第三方模組，而這個模組在啟動模組中沒有事先載入時，就沒有辦法了。所以，必須要能夠實現模組的動態載入。實作模組的動態載入就是把angular啟動過程中載入模組的方式提取出來，再處理一些特殊情況。

但是，實際跑起來發現文章中的程式碼有問題，就是「$injector」到底是什麼？研究了angular的原始碼injector.js才大概搞懂是怎麼回事。

一個應用程式有兩個$injector，providerInjector和instanceInjector。 invokeQueue和用providerInjector，runBlocks用instanceProvider。如果$injector用錯了，就會找到需要的服務。 

template: &#39;<div ng-controller="ctrlModule1"><div>page2</div><div>
<button ng-click="openDialog()">open dialog</button></div></div>&#39;,
resolve: {
  load: [&#39;$q&#39;, function($q) {
    var defer = $q.defer();
    /* 动态加载angular模块 */
    require([&#39;/test/lazyspa/module1.js&#39;], function(loader) {
      loader.onload && loader.onload(function() {
        defer.resolve();
      });
    });
    return defer.promise;
  }]
}
routeProvider中動態載入模組檔。


動態載入angular模組

angular._lazyLoadModule = function(moduleName) {
  var m = angular.module(moduleName);
  console.log(&#39;register module:&#39; + moduleName);
  /* 应用的injector，和config中的injector不是同一个，是instanceInject，返回的是通过provider.$get创建的实例 */
  var $injector = angular.element(document).injector();
  /* 递归加载依赖的模块 */
  angular.forEach(m.requires, function(r) {
    angular._lazyLoadModule(r);
  });
  /* 用provider的injector运行模块的controller，directive等等 */
  angular.forEach(m._invokeQueue, function(invokeArgs) {
    try {
      var provider = providers.$injector.get(invokeArgs[0]);
      provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
    } catch (e) {
      console.error(&#39;load module invokeQueue failed:&#39; + e.message, invokeArgs);
    }
  });
  /* 用provider的injector运行模块的config */
  angular.forEach(m._configBlocks, function(invokeArgs) {
    try {
      providers.$injector.invoke.apply(providers.$injector, invokeArgs[2]);
    } catch (e) {
      console.error(&#39;load module configBlocks failed:&#39; + e.message, invokeArgs);
    }
  });
  /* 用应用的injector运行模块的run */
  angular.forEach(m._runBlocks, function(fn) {
    $injector.invoke(fn);
  });
};


定義模組

define(["angular"], function(angular) {
  var onloads = [];
  var loadCss = function(url) {
    var link, head;
    link = document.createElement(&#39;link&#39;);
    link.href = url;
    link.rel = &#39;stylesheet&#39;;
    head = document.querySelector(&#39;head&#39;);
    head.appendChild(link);
  };
  loadCss(&#39;//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css&#39;);
  /* !!! 动态定义requirejs !!!*/
  require.config({
    paths: {
      &#39;ui-bootstrap-tpls&#39;: &#39;//cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min&#39;
    },
    shim: {
      "ui-bootstrap-tpls": {
        deps: [&#39;angular&#39;]
      }
    }
  });
  /*!!! 模块中需要引用第三方的库，加载模块依赖的模块 !!!*/
  require([&#39;ui-bootstrap-tpls&#39;], function() {
    var m1 = angular.module(&#39;module1&#39;, [&#39;ui.bootstrap&#39;]);
    m1.config([&#39;$controllerProvider&#39;, function($controllerProvider) {
      console.log(&#39;module1 - config begin&#39;);
    }]);
    m1.controller(&#39;ctrlModule1&#39;, [&#39;$scope&#39;, &#39;$uibModal&#39;, function($scope, $uibModal) {
      console.log(&#39;module1 - ctrl begin&#39;);
      /*!!! 打开angular ui的对话框 !!!*/
      var dlg = &#39;<div class="modal-header">&#39;;
      dlg += &#39;<h3 class="modal-title">I\&#39;m a modal!</h3>&#39;;
      dlg += &#39;</div>&#39;;
      dlg += &#39;<div class="modal-body">content</div>&#39;;
      dlg += &#39;<div class="modal-footer">&#39;;
      dlg += &#39;<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>&#39;;
      dlg += &#39;<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>&#39;;
      dlg += &#39;</div>&#39;;
      $scope.openDialog = function() {
        $uibModal.open({
          template: dlg,
          controller: [&#39;$scope&#39;, &#39;$uibModalInstance&#39;, function($scope, $mi) {
            $scope.cancel = function() {
              $mi.dismiss();
            };
            $scope.ok = function() {
              $mi.close();
            };
          }],
          backdrop: &#39;static&#39;
        });
      };
    }]);
    /* !!!动态加载模块!!! */
    angular._lazyLoadModule(&#39;module1&#39;);
    console.log(&#39;module1 loaded&#39;);
    angular.forEach(onloads, function(onload) {
      angular.isFunction(onload) && onload();
    });
  });
  return {
    onload: function(callback) {
      onloads.push(callback);
    }
  };
});

定義模組

module1. >

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,user-scalable=no,initial-scale=1.0" name="viewport">
    <base href=&#39;/&#39;>
    <title>SPA</title>
  </head>
  <body>
    <div ng-controller=&#39;ctrlMain&#39;>
      <div>
        <a href="/test/lazyspa/page1">page1</a>
        <a href="/test/lazyspa/page2">page2</a>
        <a href="/test/lazyspa/">main</a>
      </div>
      <div ng-view></div>
    </div>
    <div class="loading"><div class=&#39;loading-indicator&#39;><i></i></div></div>
    <script src="static/js/require.js" defer async data-main="/test/lazyspa/spa-loader.js?_=3"></script>
  </body>
</html>
二、完整的程式碼

index.html
window.loading = {
  finish: function() {
    /* 保留个方法做一些加载完成后的处理，我实际的项目中会在这里结束加载动画 */
  },
  load: function() {
    require.config({
      paths: {
        "domReady": &#39;/static/js/domReady&#39;,
        "angular": "//cdn.bootcss.com/angular.js/1.4.8/angular.min",
        "angular-route": "//cdn.bootcss.com/angular.js/1.4.8/angular-route.min",
      },
      shim: {
        "angular": {
          exports: "angular"
        },
        "angular-route": {
          deps: ["angular"]
        },
      },
      deps: [&#39;/test/lazyspa/spa.js&#39;],
      urlArgs: "bust=" + (new Date()).getTime()
    });
  }
};
window.loading.load();

spa-loader.js

&#39;use strict&#39;;
define(["require", "angular", "angular-route"], function(require, angular) {
  var app = angular.module(&#39;app&#39;, [&#39;ngRoute&#39;]);
  /* 延迟加载模块 */
  angular._lazyLoadModule = function(moduleName) {
    var m = angular.module(moduleName);
    console.log(&#39;register module:&#39; + moduleName);
    /* 应用的injector，和config中的injector不是同一个，是instanceInject，返回的是通过provider.$get创建的实例 */
    var $injector = angular.element(document).injector();
    /* 递归加载依赖的模块 */
    angular.forEach(m.requires, function(r) {
      angular._lazyLoadModule(r);
    });
    /* 用provider的injector运行模块的controller，directive等等 */
    angular.forEach(m._invokeQueue, function(invokeArgs) {
      try {
        var provider = providers.$injector.get(invokeArgs[0]);
        provider[invokeArgs[1]].apply(provider, invokeArgs[2]);
      } catch (e) {
        console.error(&#39;load module invokeQueue failed:&#39; + e.message, invokeArgs);
      }
    });
    /* 用provider的injector运行模块的config */
    angular.forEach(m._configBlocks, function(invokeArgs) {
      try {
        providers.$injector.invoke.apply(providers.$injector, invokeArgs[2]);
      } catch (e) {
        console.error(&#39;load module configBlocks failed:&#39; + e.message, invokeArgs);
      }
    });
    /* 用应用的injector运行模块的run */
    angular.forEach(m._runBlocks, function(fn) {
      $injector.invoke(fn);
    });
  };
  app.config([&#39;$injector&#39;, &#39;$locationProvider&#39;, &#39;$routeProvider&#39;, &#39;$controllerProvider&#39;, 
  function($injector, $locationProvider, $routeProvider, $controllerProvider) {
    /*＊
     ＊ config中的injector和应用的injector不是同一个，是providerInjector，获得的是provider，
     而不是通过provider创建的实例
     ＊ 这个injector通过angular无法获得，所以在执行config的时候把它保存下来
    */
    app.providers = {
      $injector: $injector,
      $controllerProvider: $controllerProvider
    };
    /* 必须设置生效，否则下面的设置不生效 */
    $locationProvider.html5Mode(true);
    /* 根据url的变化加载内容 */
    $routeProvider.when(&#39;/test/lazyspa/page1&#39;, {
      template: &#39;<div>page1</div><div ng-include="\&#39;page1.html\&#39;"></div>&#39;,
      controller: &#39;ctrlPage1&#39;
    }).when(&#39;/test/lazyspa/page2&#39;, {
      template: &#39;<div ng-controller="ctrlModule1"><div>page2</div><div>
      <button ng-click="openDialog()">open dialog</button></div></div>&#39;,
      resolve: {
        load: [&#39;$q&#39;, function($q) {
          var defer = $q.defer();
          /* 动态加载angular模块 */
          require([&#39;/test/lazyspa/module1.js&#39;], function(loader) {
            loader.onload && loader.onload(function() {
              defer.resolve();
            });
          });
          return defer.promise;
        }]
      }
    }).otherwise({
      template: &#39;<div>main</div>&#39;,
    });
  }]);
  app.controller(&#39;ctrlMain&#39;, [&#39;$scope&#39;, &#39;$location&#39;, function($scope, $location) {
    console.log(&#39;main controller&#39;);
    /* 根据业务逻辑自动到缺省的视图 */
    $location.url(&#39;/test/lazyspa/page1&#39;);
  }]);
  app.controller(&#39;ctrlPage1&#39;, [&#39;$scope&#39;, &#39;$templateCache&#39;, function($scope, $templateCache) {
    /* 用这种方式，ng-include配合，根据业务逻辑动态获取页面内容 */
    /* 动态的定义controller */
    app.providers.$controllerProvider.register(&#39;ctrlPage1Dyna&#39;, [&#39;$scope&#39;, function($scope) {
      $scope.openAlert = function() {
        alert(&#39;page1 alert&#39;);
      };
    }]);
    /* 动态定义页面内容 */
    $templateCache.put(&#39;page1.html&#39;, &#39;<div ng-controller="ctrlPage1Dyna">
    <button ng-click="openAlert()">alert</button></div>&#39;);
  }]);
  require([&#39;domReady!&#39;], function(document) {
    angular.bootstrap(document, ["app"]);
  });
});
spa-loader.js

&#39;use strict&#39;;
define(["angular"], function(angular) {
  var onloads = [];
  var loadCss = function(url) {
    var link, head;
    link = document.createElement(&#39;link&#39;);
    link.href = url;
    link.rel = &#39;stylesheet&#39;;
    head = document.querySelector(&#39;head&#39;);
    head.appendChild(link);
  };
  loadCss(&#39;//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css&#39;);
  require.config({
    paths: {
      &#39;ui-bootstrap-tpls&#39;: &#39;//cdn.bootcss.com/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min&#39;
    },
    shim: {
      "ui-bootstrap-tpls": {
        deps: [&#39;angular&#39;]
      }
    }
  });
  require([&#39;ui-bootstrap-tpls&#39;], function() {
    var m1 = angular.module(&#39;module1&#39;, [&#39;ui.bootstrap&#39;]);
    m1.config([&#39;$controllerProvider&#39;, function($controllerProvider) {
      console.log(&#39;module1 - config begin&#39;);
    }]);
    m1.controller(&#39;ctrlModule1&#39;, [&#39;$scope&#39;, &#39;$uibModal&#39;, function($scope, $uibModal) {
      console.log(&#39;module1 - ctrl begin&#39;);
      var dlg = &#39;<div class="modal-header">&#39;;
      dlg += &#39;<h3 class="modal-title">I\&#39;m a modal!</h3>&#39;;
      dlg += &#39;</div>&#39;;
      dlg += &#39;<div class="modal-body">content</div>&#39;;
      dlg += &#39;<div class="modal-footer">&#39;;
      dlg += &#39;<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>&#39;;
      dlg += &#39;<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>&#39;;
      dlg += &#39;</div>&#39;;
      $scope.openDialog = function() {
        $uibModal.open({
          template: dlg,
          controller: [&#39;$scope&#39;, &#39;$uibModalInstance&#39;, function($scope, $mi) {
            $scope.cancel = function() {
              $mi.dismiss();
            };
            $scope.ok = function() {
              $mi.close();
            };
          }],
          backdrop: &#39;static&#39;
        });
      };
    }]);
    angular._lazyLoadModule(&#39;module1&#39;);
    console.log(&#39;module1 loaded&#39;);
    angular.forEach(onloads, function(onload) {
      angular.isFunction(onload) && onload();
    });
  });
  return {
    onload: function(callback) {
      onloads.push(callback);
    }
  };
});


spa.jsmodule1.js以上就是探索angularjs+requirejs全面實現按需加載的套路_AngularJS的內容，更多就是探索angularjs+requirejs全面實現按需加載的套路_AngularJS的內容，更多相關內容請關注PHP中文網（www.php.cn）！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JavaScript實作iframe自動高度調整和不同主域名跨域_javascript技巧下一篇：JavaScript實作iframe自動高度調整和不同主域名跨域_javascript技巧

相關文章

看更多