溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-10-22 21:05:20 來源：腳本之家 閱讀：111 作者：左手121 欄目：web開發(fā)

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

$q

簡介：

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

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

  • 中午點外買，打電話要了份炒飯，要求送到公司并給了老板具體地址。這個過程就是 $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;

按需加載

首先我們要了解一下幾點：

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

在 ngRoute 和 uiRoute 中都提供了 resolve 屬性里的值會在路由成功前被預(yù)先設(shè)定好，然后注入到控制器中。通俗地將，就是等數(shù)據(jù)都“就位”后，才進(jìn)行路由（其實我覺得也不能叫路由，因為路由是一些列的操作，其中就包括了設(shè)置 resolve 屬性等等）?？梢詤⒖嘉业纳掀恼?。

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

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

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

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

實現(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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手