在此之前我们首先要先了解几个东西：
$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不能直接使用，所以我们把它存在主模块下面。通过存下来的方法，可以用来注册异步加载回来的页面组件。
通过上述我们知道了需要异步加载文件
实现
// controller
define(["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.js
define(["app"], function(app) {
app.registerController("ctrl.file", function($scope) {
$scope.title = "--测试 ";
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
