angularjs 搭建项目、使用uirouter配置路由,封装$http,超时退出
有两种方式搭建项目一种是重开始配置（1.npm init 2.配置package.json文件），另外一种是下载网上已经有的基础模板，我在这里说下第二种搭建方法
1. 下载基础模板
git clone https://github.com/angular/angular-seed.git
2. 安装依赖
npm install
- 启动项目
npm start
4. 效果如下
5.路由配置：
新建app.js入口文件，和index.html，router.js;引入uirouter配置路由，index.html用ui-view进行路由映射
app.js代码如下
import angular from 'angular'
import 'oclazyload'
import uirouter from 'angular-ui-router'
import uiBootstrap from 'angular-ui-bootstrap'
import debounce from './static/scripts/factory/debounce.js'
import headerDev from './static/scripts/diredctive/headerDev.js'
import slidemenuDev from './static/scripts/diredctive/slidemenuDev.js'
import routing from './router.js' //路由
import indexCtrl from './static/components/index/indexCtrl.js' //主页
import netWork from './static/components/index/netWork.js' //网络
import commonService from './static/service/commonService.js' //封装请求$hrrp和$q
window.app = angular.module('myProject',['uirouter','uiBootstrap','oclazyload'])
.config(routing)
.run(['$rootScope',function($rootScope){
$rootScope.$on('$stateChangeSuccess',function(event,toState){
$rootScope.$broadcast('to-menu', {
state: toState.name})
})
}])
.service('commonService',commonService)
.directive('headerDev',headerDev)
.directive('slidemenuDev',slidemenuDev)
.controller('indexCtrl',indexCtrl)
.controller('netWork',netWork)
export default app
index.html代码如下
<htm ng-app='myProject'>
<head>
</head>
<body ng-controller=indexCtrl>
<div class='df_load'>
<img width='100%' src='./loading.svg' alt='资源加载中'/>
</div>
<div class='wrapper'>
<header-dev></header-dev>
<slidemenu-dev></slidemenu-dev>
<section>
<help-dev></help-dev>
<div class=df-uiview-setting ui-view style='height: 100%;overflow-x: hidden;overflow-y: auto;float: left;ba\rgb(255,255,255);' >
</div>
</section>
</div>
</body>
</html>
rouer.js代码如下
routing $inject = ['$urlRouterProvider','$stateProvider']
function routing($urlRouterProvider,$stateProvider){
'use strict'
$urlRouterProvider.otherwise('/home')
$urlRouterProvider.state('netWork',{
url: './network',
template: requestAnimationFrame('./static/components/network.html'),
controller: 'netWork',
})
}
export default routing
6.封装$http请求到commonServce.js;代码如下，请求中增加了session过期重新登录
commonService.$inject = ['$http', '$q']
function commonService($http, $q){
let service = {
}
let auten ='asasas',
let path = global.ajaxServer + ':' + global.ajaxPort
let lastTime = global.lastRequestTime;
let outTime = 60*60*1000
function checkSessionTime(){
let nowTime = new Date();
if((nowTime-lastTime)>outTime){
window.location.href = path + '/logout'
}else{
lastRequestTime = nowTime
}
}
service.get = function (url, params){
let deferred = $q.defer();
checkSessionTime();
$http({
method: 'get',
url: path + url,
withCredentials: 'true',
heaers:{
'auther': window.authen
},
params: params
}).then(function (data){
defferred.resolve(data)
}).catch(function(err){
deferred.reject('error')
})
return deferred.promise
};
service.post = function (url, params){
let deferred = $q.defer();
checkSessionTime();
$http({
method: 'post',
url: path + url,
withCredentials: 'true',
heaers:{
'auther': window.authen
},
params: params
}).then(function (data){
defferred.resolve(data)
}).catch(function(err){
deferred.reject('error')
})
return deferred.promise
};
}
export default commonService