AngulerJS學(xué)習(xí)之按需動(dòng)態(tà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è)試 "; }); });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript框架Angular和React深度對(duì)比
這篇文章主要介紹了JS框架中Angular和React不同和差異,以及兩個(gè)框架的深度對(duì)比介紹。2017-11-11AngularJS $on、$emit和$broadcast的使用
本文主要介紹AngularJS $on、$emit和$broadcast的使用,這里整理了詳細(xì)的資料及簡(jiǎn)單示例代碼有興趣的小伙伴可以參考下2016-09-09angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法
今天小編就為大家分享一篇angularJs復(fù)選框checkbox選中進(jìn)行ng-show顯示隱藏的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧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-05AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下2018-08-08AngularJS實(shí)現(xiàn)單一頁(yè)面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)單一頁(yè)面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法,結(jié)合實(shí)例形式分析了AngularJS路由操作相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2017-06-06angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08