AngulerJS學(xué)習(xí)之按需動態(tài)加載文件

在此之前我們首先要先了解幾個東西：

寧鄉(xiāng)網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。創(chuàng)新互聯(lián)自2013年起到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

簡介：

$q：主要解決的是異步編程的問題，是指描述通過一個承諾行為與對象代表的異步執(zhí)行的行動結(jié)果的交互，可能會也可能不會再任何時候完成。

我們通過一個小故事理解 $q 服務(wù)。

中午點(diǎn)外買，打電話要了份炒飯，要求送到公司并給了老板具體地址。這個過程就是 $q.defer；
飯菜不可能立即送到，因此這是一個延期響應(yīng)的請求；
老板說盡快送到。也就是老板給了我一個承諾 promise；
我可以邊工作邊等待，說明這個請求是個異步執(zhí)行的過程。
這樣這個延期異步請求就算建立完成了。就是一個deferred。
飯菜送到我去接受，這個過程稱為 deferred.resolve(data) 響應(yīng)事件；
如果米飯賣完了老板會告訴我做不了了，也就是拒絕我的請求了，就是 deferred.reject(error)；
老板可以再任何時候跟我說做不了，只要在他還沒把飯送來之前都可以。
快到樓下了，通知我去取。這就是通知 deferred.notify(data) 這樣整個異步回調(diào)過程就完成了。
第二天我們好多人都要訂餐。所以我就可以發(fā)起 $q.all(req1,req2,req3.)；

使用

我們在服務(wù)中這樣定義，在請求開始之間建立deferred，然后return deferred.promise.在獲取到數(shù)據(jù)的時候deferred.resolve(data)。同樣我們在中間可以收到通知或者拒絕等。

var def = $q.defer();
def.resolve(data);
return def.promise;

按需加載

首先我們要了解一下幾點(diǎn)：

1、什么時機(jī)下加載：

在 ngRoute 和 uiRoute 中都提供了 resolve 屬性里的值會在路由成功前被預(yù)先設(shè)定好，然后注入到控制器中。通俗地將，就是等數(shù)據(jù)都“就位”后，才進(jìn)行路由（其實(shí)我覺得也不能叫路由，因?yàn)槁酚墒且恍┝械牟僮鳎渲芯桶嗽O(shè)置 resolve 屬性等等）。可以參考我的上篇文章。

2、加載后的文件如何注冊：

angular有個啟動函數(shù)，叫做bootstrap。根據(jù)angular的代碼設(shè)計，你需要在啟動之前定義所有的controller。就好似有個袋子，你在bootstrap之前想往里塞什么就塞什么。可是一旦bootstrap了，他就不再接受你任何往里塞的controller了。

解決這個問題，只有一個方法，就是利用主模塊的provider主動注冊controller。但是由于provider不能直接使用，所以我們把它存在主模塊下面。通過存下來的方法，可以用來注冊異步加載回來的頁面組件。

通過上述我們知道了需要異步加載文件

實(shí)現(xiàn)

// controller
define(["app"], function(app) {
  app.config(["$stateProvider", "$urlRouterProvider", "$controllerProvider",
    function($stateProvider, $urlRouterProvider, $controllerProvider) {
      // angular有個啟動函數(shù)，叫做bootstrap；
      // 根據(jù)angular的代碼設(shè)計，你需要在啟動之前定義所有的controller；
      // 就好似有個袋子，你在bootstrap之前想往里塞什么就塞什么；
      // 可是一旦bootstrap了，他就不再接受你任何往里塞的controller了；
      // 解決這個問題，只有一個方法，就是利用主模塊的provider主動注冊controller；
      // 但是由于provider不能直接使用，所以我們把它存在主模塊下面；
      // 通過存下來的方法，可以用來注冊異步加載回來的頁面組件。
      app.registerController = $controllerProvider.register;
      app.loadFile = function(js) {
        return function($rootScope, $q) {
          //通過$q服務(wù)注冊一個延遲對象 deferred
          var def = $q.defer(),
            deps = [];
          angular.isArray(js) ? (deps = js) : deps.push(js);
          require(deps, function() {
            $rootScope.$apply(function() {
              // 成功
              def.resolve();
              // def.reject() 不成功
              // def.notify() 更新狀態(tài)
            });
          });
          //通過deferred延遲對象，可以得到一個承諾promise，而promise會返回當(dāng)前任務(wù)的完成結(jié)果
          return def.promise;
        };
      }
      $urlRouterProvider.otherwise('/index');
      $stateProvider.state("index", {
        url: "/index",
        template: "這是首頁頁面"
      });
      $stateProvider.state("computers", {
        url: "/computers",
        template: "這是電腦分類頁面{{title}}",
        controller: "ctrl.file",
        resolve: {
          loadFile: app.loadFile("file")
        }
      });
      $stateProvider.state("printers", {
        url: "/printers",
        template: "這是打印機(jī)頁面"
      });
      $stateProvider.state("blabla", {
        url: "/blabla",
        template: "其他"
      });
    }
  ]);
});

// file.js
define(["app"], function(app) {
  app.registerController("ctrl.file", function($scope) {
    $scope.title = "--測試 ";
  });
});

源碼：requireLearn_jb51.rar

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：AngulerJS學(xué)習(xí)之按需動態(tài)加載文件
文章源于：http://m.kartarina.com/article28/jedojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、面包屑導(dǎo)航、域名注冊、微信公眾號、網(wǎng)站改版、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容