angularjs 单页面项目使用组件化开发模式,降低模块之间的耦合性,便于协同开发;使用ui-router 作为项目的路由切换,并结合ocLazyLoad 按需加载组件(component)、服务(service)。后续结合requirejs 动态加载js 文件,解决index 页面加载大量js 文件,可能导致js 阻塞的问题。
项目结构:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 模块
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 模块
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 模块
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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'); } }); }]);