欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2017年02月13日 10:15:01   作者:左手121  
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在此之前我們首先要先了解幾個(gè)東西:

$q

簡(jiǎn)介:

$q:主要解決的是異步編程的問(wèn)題,是指描述通過(guò)一個(gè)承諾行為與對(duì)象代表的異步執(zhí)行的行動(dòng)結(jié)果的交互,可能會(huì)也可能不會(huì)再任何時(shí)候完成。

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

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

使用

我們?cè)诜?wù)中這樣定義,在請(qǐng)求開始之間建立deferred,然后return deferred.promise.在獲取到數(shù)據(jù)的時(shí)候deferred.resolve(data)。同樣我們?cè)谥虚g可以收到通知或者拒絕等。

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

按需加載

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

1、什么時(shí)機(jī)下加載:

在 ngRoute 和 uiRoute 中都提供了 resolve 屬性里的值會(huì)在路由成功前被預(yù)先設(shè)定好,然后注入到控制器中。通俗地將,就是等數(shù)據(jù)都“就位”后,才進(jìn)行路由(其實(shí)我覺(jué)得也不能叫路由,因?yàn)槁酚墒且恍┝械牟僮?,其中就包括了設(shè)置 resolve 屬性等等)??梢詤⒖嘉业纳掀恼隆?br />

2、加載后的文件如何注冊(cè):

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

解決這個(gè)問(wèn)題,只有一個(gè)方法,就是利用主模塊的provider主動(dòng)注冊(cè)controller。但是由于provider不能直接使用,所以我們把它存在主模塊下面。通過(guò)存下來(lái)的方法,可以用來(lái)注冊(cè)異步加載回來(lái)的頁(yè)面組件。

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

實(shí)現(xiàn)

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

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

源碼:requireLearn_jb51.rar

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論