AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件
在此之前我們首先要先了解幾個(gè)東西:
$q
簡(jiǎn)介:
$q:主要解決的是異步編程的問題,是指描述通過一個(gè)承諾行為與對(duì)象代表的異步執(zhí)行的行動(dòng)結(jié)果的交互,可能會(huì)也可能不會(huì)再任何時(shí)候完成。
我們通過一個(gè)小故事理解 $q 服務(wù)。
- 中午點(diǎn)外買,打電話要了份炒飯,要求送到公司并給了老板具體地址。這個(gè)過程就是 $q.defer;
- 飯菜不可能立即送到,因此這是一個(gè)延期響應(yīng)的請(qǐng)求;
- 老板說盡快送到。也就是老板給了我一個(gè)承諾 promise;
- 我可以邊工作邊等待,說明這個(gè)請(qǐng)求是個(gè)異步執(zhí)行的過程。
- 這樣這個(gè)延期異步請(qǐng)求就算建立完成了。就是一個(gè)deferred。
- 飯菜送到我去接受,這個(gè)過程稱為 deferred.resolve(data) 響應(yīng)事件;
- 如果米飯賣完了老板會(huì)告訴我做不了了,也就是拒絕我的請(qǐng)求了,就是 deferred.reject(error);
- 老板可以再任何時(shí)候跟我說做不了,只要在他還沒把飯送來之前都可以。
- 快到樓下了,通知我去取。這就是通知 deferred.notify(data) 這樣整個(gè)異步回調(diào)過程就完成了。
- 第二天我們好多人都要訂餐。所以我就可以發(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í)我覺得也不能叫路由,因?yàn)槁酚墒且恍┝械牟僮?,其中就包括了設(shè)置 resolve 屬性等等)。可以參考我的上篇文章。
2、加載后的文件如何注冊(cè):
angular有個(gè)啟動(dòng)函數(shù),叫做bootstrap。 根據(jù)angular的代碼設(shè)計(jì),你需要在啟動(dòng)之前定義所有的controller。就好似有個(gè)袋子,你在bootstrap之前想往里塞什么就塞什么??墒且坏゜ootstrap了,他就不再接受你任何往里塞的controller了。
解決這個(gè)問題,只有一個(gè)方法,就是利用主模塊的provider主動(dòng)注冊(cè)controller。但是由于provider不能直接使用,所以我們把它存在主模塊下面。通過存下來的方法,可以用來注冊(cè)異步加載回來的頁面組件。
通過上述我們知道了需要異步加載文件
實(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è)問題,只有一個(gè)方法,就是利用主模塊的provider主動(dòng)注冊(cè)controller;
// 但是由于provider不能直接使用,所以我們把它存在主模塊下面;
// 通過存下來的方法,可以用來注冊(cè)異步加載回來的頁面組件。
app.registerController = $controllerProvider.register;
app.loadFile = function(js) {
return function($rootScope, $q) {
//通過$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)
});
});
//通過deferred延遲對(duì)象,可以得到一個(gè)承諾promise,而promise會(huì)返回當(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 = "--測(cè)試 ";
});
});
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript框架Angular和React深度對(duì)比
這篇文章主要介紹了JS框架中Angular和React不同和差異,以及兩個(gè)框架的深度對(duì)比介紹。2017-11-11
AngularJS $on、$emit和$broadcast的使用
本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼有興趣的小伙伴可以參考下2016-09-09
angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法
今天小編就為大家分享一篇angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
基于angular實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的生日插件
這篇文章主要為大家詳細(xì)介紹了基于angular實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的生日插件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下2018-08-08
AngularJS實(shí)現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)單一頁面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法,結(jié)合實(shí)例形式分析了AngularJS路由操作相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2017-06-06
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08

