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

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

1. 下载基础模板

---

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

*   1

1. 安装依赖

---

`npm install` 

*   1

1. 启动项目

`npm start` 

*   1

1. 效果如下

---

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

 `
    
    
    
        

            
        
        

            
            
            

                
                

                
            
        
    
` 

*   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