1.案例说明
angularjs在做一些小型项目时没有什么大的问题,但是项目迭代越多的时候会发现项目加载index.html的时候很慢,这是因为我们的架构有问题,加载index.html的时候会加载其下面所有引用的js、css文件,这是一个很费时间的过程,所以我们要引入requirejs让它按需加载。 requirejs-api
项目文件目录:
2.代码解释
2.1 index.html做如下改造。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div ng-controller="indexController">
<div>
<div ng-include="'views/common/menu.html'"></div>
<div ng-cloak ui-view></div>
<script src="libs/require.js" data-main="main" id="main"></script>
</div>
</div>
</body>
</html>
这里我们取消了ng-app这个指令,加入了一个引入require的<script>标签,requirejs就会根据data-main的值main去找main.js这个文件。
2.2 main.js
main.js主要是将需要引用的js在这个文件中都列出来,并定义他需要的依赖。其中的angular.bootstrap并不是那个bootstrap框架,
而是angular中的一个方法名,用这个方法我们来创建一个module(securityManage)来替代之前的ng-app方法。
(function(){
/**
* 文件依赖
*/
var config = {
paths:{
"angular" : 'libs/angular.min',
"jquery" : 'libs/jquery-1.7.2.min',
"uiRouter" : 'libs/angular-ui-router',
"router": 'router'
},
waitSeconds : 7, //出现网络慢加载文件慢的时候 设置最长等待时间7s
shim : { //这里shim等于快速定义一个模块,定义模块需要的依赖
'angular':{
exports:'angular'
},
uiRouter: {
deps: ['angular'] //依赖什么模块
}
}
};
require.config(config);
require(['router','jquery','uiRouter',],function(){
angular.bootstrap(document,['securityManage']);
});
})(window);
2.3 app.js
定义module模块,securityManage要跟main.js中用angular.bootstrap方法定义的要一致。
define(
[
'angular'
], function (angular) {
return angular.module('securityManage',
[
'ui.router',
]);
}
)
2.4 router.js
此文件主要是定义路由,其中app.register中定义的参数是为了后续定义对应的类型文件而做的设置,后面会讲到。
define(['app'],function(app){ //app对应的是app.js
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register = {
//得到$controllerProvider的引用
controller : $controllerProvider.register,
//同样的。这里也可以保存directive / filter /service 的引用
directive : $compileProvider.register,
filter : $filterProvider.register,
service : $provide.service,
factory : $provide.factory
};
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('user', {
url: '/user',
templateUrl: 'views/user/users.html',
controller: 'usersController',
resolve: {
loadCtrl: ['$q',
function ($q) {
var deferred = $q.defer();
//异步加载controller/directive/filter/service
require([
'module/user/controller/usersController.js'
], function () {
deferred.resolve();
});
return deferred.promise;
}]
}
})
//解决路由异常的方法
$urlRouterProvider.otherwise('/user');
});
});
2.5 定义service服务
define(['app'],function(app){
app.register.factory('usersService',
[
'$http',
function($http){
return{
//查询所有待复核信息
getAllUsers:function(data){
return $http.post('http://localhost:8080/user/getAllUsers.json',data);
}
}
}
])
});
2.6 定义controller
define(['app','module/service/usersService'],function(app){
app.register.controller('usersController', [ '$scope',
'usersService'
function($scope,usersService){
$scope.conf = {};
}
])
})
要在controler中引入service,只需在头部引入service文件的路径然后在模块中引入service即可。
3. 总结
以上简单讲解了require怎么在angular中起作用的,以及对之前写法的变化,具体效果可在我发布的git项目上查看。
给出了一个demo,其中进入到people.html中时才会加载peopleController,可在F12下验证。Demo