【JS】angularjs 搭建项目、使用uirouter配置路由,封装$http,超时退出

Z时代
2024-01-10
分类：技术分享

有两种方式搭建项目一种是重开始配置（1.npm init 2.配置package.json文件），另外一种是下载网上已经有的基础模板，我在这里说下第二种搭建方法

下载基础模板

`git clone https://github.com/angular/angular-seed.git` * 1

安装依赖

`npm install` * 1

启动项目

`npm start` * 1

效果如下

【JS】angularjs 搭建项目、使用uirouter配置路由,封装$http,超时退出

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`
*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24

`index.html代码如下` * 1

 `<htm ng-app='myProject'>
<head>
</head>
<body ng-controller=indexCtrl>
<div class='df_load'>
<img width='100%' src='https://segmentfault.com/a/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 >
</div>
</section>
</div>
</body>
</html>`
*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18

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`
*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11

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