angularjs 单页面项目使用组件化开发模式，降低模块之间的耦合性，便于协同开发；使用ui-router 作为项目的路由切换，并结合ocLazyLoad 按需加载组件（component）、服务（service）。后续结合requirejs 动态加载js 文件，解决index 页面加载大量js 文件，可能导致js 阻塞的问题。
项目结构：
index.html app.js js |__ jquery.js |__ angular.js |__ angular-resource.js |__ angular-ui-router.js |__ ocLazyLoad.js css |__ main.css plugins |__ bootstrap |__ js |__ css |__ ng-table |__ js |__ css login |__ module.js |__ component.js |__ template.html home |__ module.js |__ component.js |__ service.js |__ template.html users |__ module.js |__ service.js |__ list |__ component.js |__ template.html |__ detail |__ component.js |__ template.html
项目内容：
主页 index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>my project</title> <link href="css/main.css" rel="stylesheet" /> <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet" /> <link href="plugins/ng-table/css/ng-table.css" rel="stylesheet" /> </head> <body ng-app="myProject" ng-strict-di> <div ui-view></div> <script src="js/jquery.js"></script> <script src="plugins/bootstrap/js/bootstrap.js"></script> <script src="js/ocLazyLoad.js"></script> <script src="js/angular.js"></script> <script src="js/angular-ui-router.js"></script> <script src="plugins/ng-table/js/ng-table.js"></script> <script src="login/module.js"></script> <script src="users/module.js"></script> <script src="home/module.js"></script> <script src="app.js"></script> </body> </html>
启动模块 app.js
angular.module('myProject',[
'ui.router',
'oc.lazyLoad',
//引入各个模块，以备依赖
'login',
'home',
'users'
])
//服务端与客户端在一起时，指定空字符串
.constant('basePath','')
.config(['$compileProvider','$httpProvider',function($compileProvider,$httpProvider){
//禁用调试数据
$compileProvider.debugInfoEnabled(false);
$compileProvider.commentDirectivesEnabled(false);
/*$compileProvider.cssClassDirectivesEnabled(false);*/
//允许携带cookie，跨域设置
$httpProvider.defaults.withCredentials = true;
}])
.run(['$urlService','$state',function($urlService,$state){
if(!$urlService.url()){
//登录后系统默认进入的状态。注意home状态会做重定向
$state.go('home');
};
}]);
login 模块
angular.module('login', [
'ui.router',
'oc.lazyLoad',
'ngResource'
])
.factory('loginService',['$resource', 'basePath','$injector', function($resource,basePath,$injector){
return $resource(
'',
{},
{
'login':{
url:basePath+'/login',
method:'post',
headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
},
'logout':{
url:basePath+'/logout',
method:'post'
}
});
}])
.config(['$transitionsProvider','$httpProvider','$stateProvider',function($transitionsProvider,$httpProvider,$stateProvider){
//拦截服务器响应，处理服务器登录态失效的情况
$httpProvider.interceptors.push(['$q', '$injector', '$state', function($q, $injector, $state){
return {
'responseError': function(response) {
if(response.status==401){
//移除客户端的登录态
sessionStorage.removeItem("currentUser");
//回到登录状态
$state.go('login');
};
//标记此次响应失败
return $q.reject(response);
}
}
}]);
$stateProvider.state('login', {
url: '/login',
component: 'login',
lazyLoad: function($transition$){
return $transition$.injector().get('$ocLazyLoad').load(['login/component']);
},
resolve:{
returnTo: ['$transition$', '$state', function($transition$,$state){
var from = $transition$.from();
if(from.name){
return $state.target(from,$transition$.params("from"));
};
//默认登录后进入的状态
return $state.target('home');
}]
}
});
}]);
home 模块
angular.module('home', [
'ui.router',
'oc.lazyLoad'
])
.config(['$stateProvider',function($stateProvider){
$stateProvider.state('home', {
url: '/home',
component: 'home',
redirectTo: 'home.users.list',
lazyLoad: function($transition$){
//注意不要加js后缀
return $transition$.injector().get('$ocLazyLoad').load('home/component');
}
});
}]);
users 模块
angular.module('users',[
'ui.router',
'oc.lazyLoad',
'ngResource',
'ngTable'
])
.config(['$stateProvider',function($stateProvider){
$stateProvider
.state('home.users',{
lazyLoad: function($transition$){
//加载此模块公共的服务
return $transition$.injector().get('$ocLazyLoad').load('users/service');
}
})
.state('home.users.list', {
url: '/users/list',
component: 'usersList',
dynamic:true,
lazyLoad: function($transition$){
//加载对应的组件
return $transition$.injector().get('$ocLazyLoad').load('users/list/component');
}
});
}]);