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

本文介绍了如何通过下载Angular Seed模板快速搭建Angular项目。首先，通过`git clone`克隆模板，然后运行`npm install`安装依赖，接着启动项目。项目包含路由配置，如在app.js中设置uirouter，并在index.html中使用ui-view进行路由映射。同时，文章展示了如何封装$http请求到commonService.js中，以实现会话超时检查。

有两种方式搭建项目一种是重开始配置（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