在重构前端项目的过程中，需要根据主模块动态加载控制器，但Angular要求在开启服务前必须将所有控制器、服务、依赖的模块全部加载完成，下面详细说一下搭建项目过程中的解决方案。
目录结构
main/
controllers/
view/
index.html
app.js
main.js
首先，index.html中主要内容：
<div ng-view></div>
<script data-main="main.js" src="libs/require.js">
在引入main.js后，这时我们在main.js中配置require需要加载的内容：
requirejs.config({
paths: {
jQuery: '../lib/jquery.min',
angular: '../lib/angular.min',
angularRouter: '../lib/angular-route.min',
angularAnimate: '../lib/angular-animate.min'
},
shim: {
'angular': {
deps: ['jQuery'],
exports: 'angular'
},
angularRouter: {
deps: ['angular'],
exports: 'ngRoute'
},
angularAnimate: {
deps: ['angular']
}
}
});
// 手动开启angular服务
require(['angular', 'app'], function(angular){
angular.element(document).ready(function(){
angular.bootstrap(document, ['yceMain']);
});
});
- requireJs的具体用法就不多说了，主要用来配置加载项以及规范。
- angular.bootstrap是手动开启ng服务的选项，就不需要在html代码中加入ng-app指令开启了。
- app.js中的内容接下来会详细说。
app.js中的内容是最精髓最重要的东西：
(define['angular', 'angularRouter'], function(angular){
var yceMain = angular.module('yceMain', ['ngRoute']);
yceMain.config(['$routeProvider', '$controllerProvider', function ($routeProvider, $controllerProvider){
var ctrlRegister = function(ctrlName, ctrlModule) {
return function ($q) {
var defer = $q.defer();
require(ctrlModule, function (controller) {
$controllerProvider.register(ctrlName, controller);
defer.resolve();
});
return defer.promise;
}
};
$routeProvider
.when('/dashBoard', {
templateUrl: 'views/dashBoard.html',
controller: 'dashBoardCtrl',
resolve: {
delay: ctrlRegister('dashBoardCtrl',['controllers/dashBoard.js'])
}
})
.when('/appManage', {
templateUrl: 'views/appManage.html',
controller: 'appManageCtrl',
resolve: {
delay: ctrlRegister('appManageCtrl',['controllers/appManage.js'])
}
})
});
return yceMain;
});
首先使用ngRoute提供的routeProvider服务进行路由配置，resolve是做什么的呢？
- 在页面跳转时，只有当resolve对象中所有的参数都执行resolve()方法后，才会进行页面渲染、实例控制器等操作。
- resolve对象中的参数名称都是由自己定义的，这时会发生一件事情，在实例控制器时，参数名会注入到对应的控制器中。
- resolve一般用来预加载的工作。
下面详细说一下ctrlRegister函数的作用：
var ctrlRegister = function(ctrlName, ctrlModule) {
return function ($q) {
//实例一个promise对象
var defer = $q.defer();
//angular不仅可以通过module去注册控制器
//还可以使用$controllerProvider去注册控制器，如下
require(ctrlModule, function (controller) {
$controllerProvider.register(ctrlName, controller);
//注册成功后，执行defer.resolve()，表示完成一个promise任务
//这个返回值自动赋给defer.promise
defer.resolve();
});
// 每个promise在创建并执行后，必须给调用它的函数返回promise
return defer.promise;
}
};
angular将promise封装在了$q中，$q是angular的一种内置服务，它可以使你异步地执行函数，并且当函数执行完成时它允许你使用函数的返回值（或异常）。
关于promise文档，请看这里。
接下来的事情就比较简单了，在需要加载的controller(dashBoard.js)中这样写：
define(function(){
return function dashBoardCtrl($scope, $http){
// xxx
}
})
这样搭建项目的好处是当点击#/dashBoardsh时，只会加载dashBoard对应的html和controller，节省带宽。
