在此之前我們首先要先了解幾個東西：
$q
簡介：
$q：主要解決的是異步編程的問題，是指描述通過一個承諾行為與對象代表的異步執行的行動結果的交互，可能會也可能不會再任何時候完成。
我們通過一個小故事理解 $q 服務。
使用
我們在服務中這樣定義，在請求開始之間建立deferred，然后return deferred.promise.在獲取到數據的時候deferred.resolve(data)。同樣我們在中間可以收到通知或者拒絕等。
var def = $q.defer();def.resolve(data);return def.promise;
按需加載
首先我們要了解一下幾點：
1、什么時機下加載：
在 ngRoute 和 uiRoute 中都提供了 resolve 屬性里的值會在路由成功前被預先設定好，然后注入到控制器中。通俗地將，就是等數據都“就位”后，才進行路由（其實我覺得也不能叫路由，因為路由是一些列的操作，其中就包括了設置 resolve 屬性等等）。可以參考我的上篇文章。
2、加載后的文件如何注冊：
angular有個啟動函數，叫做bootstrap。 根據angular的代碼設計，你需要在啟動之前定義所有的controller。就好似有個袋子，你在bootstrap之前想往里塞什么就塞什么。可是一旦bootstrap了，他就不再接受你任何往里塞的controller了。
解決這個問題，只有一個方法，就是利用主模塊的provider主動注冊controller。但是由于provider不能直接使用，所以我們把它存在主模塊下面。通過存下來的方法，可以用來注冊異步加載回來的頁面組件。
通過上述我們知道了需要異步加載文件
實現
// controllerdefine(["app"], function(app) { app.config(["$stateProvider", "$urlRouterProvider", "$controllerProvider", function($stateProvider, $urlRouterProvider, $controllerProvider) { // angular有個啟動函數，叫做bootstrap； // 根據angular的代碼設計，你需要在啟動之前定義所有的controller； // 就好似有個袋子，你在bootstrap之前想往里塞什么就塞什么； // 可是一旦bootstrap了，他就不再接受你任何往里塞的controller了； // 解決這個問題，只有一個方法，就是利用主模塊的provider主動注冊controller； // 但是由于provider不能直接使用，所以我們把它存在主模塊下面； // 通過存下來的方法，可以用來注冊異步加載回來的頁面組件。 app.registerController = $controllerProvider.register; app.loadFile = function(js) { return function($rootScope, $q) { //通過$q服務注冊一個延遲對象 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() 更新狀態 }); }); //通過deferred延遲對象，可以得到一個承諾promise，而promise會返回當前任務的完成結果 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: "這是打印機頁面" }); $stateProvider.state("blabla", { url: "/blabla", template: "其他" }); } ]);});// file.jsdefine(["app"], function(app) { app.registerController("ctrl.file", function($scope) { $scope.title = "--測試 "; });});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
