AngularJS-app.js

app.js文件是angularjs的主入口，在這里會引用項目中的各個模塊，進行一些配置。路由模塊也可放到這里。

angular.module('liveApp',
    ['liveApp.controllers',
        'liveApp.services',
        'liveApp.directives',
        //'liveApp.filters',
        'liveApp.constants',
        'ui.router',
        'ui.bootstrap',
        'ng-iscroll',
        'ngAnimate'
    ])

然后進行項目的一些配置，如：

.run(['$rootScope','$location', 'socket', function ($rootScope, $location, socket) {
        //監控路由的跳轉成功后觸發
        $rootScope.$on('$stateChangeSuccess', function (event, to, toParams, from, fromParams) {
            //如果要進入的頁面不是直播的頁面，並且原頁面是直播頁面，那么關閉socket服務
            if (to.name !== 'liveroom' && to.name !== 'myliveroom') {
                if (from.name === 'liveroom' || from.name === 'myliveroom') {
                    socket.emit('close');
                }
            }
            else {
               // socket.emit('loadData');
            }
        })
        //在路由跳轉前觸發
        $rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
            if(angular.isDefined($rootScope.loginCheck)){
                //判斷用戶是否進行登錄，同時也對需要登錄驗證的頁面進行判斷，也就是說當進入需要登錄的頁面時，必須已經進行登錄驗證后才可以
                if (!$rootScope.loginCheck && toState.data.loginCheck) {
                    //$location.path('/');
                    event.preventDefault();
                    window.location.href="/#/login";
                    //$location.path('/');
                    //  $rootScope.$emit('needLogin');
                }
            }
            else{
               // window.location.href="/#/login";
            }
        })
    }])

上面是對路由添加了一些邏輯，其中run方法是在所有模塊加載完成后以及解析完他們的依賴后才會被調用。並且只會調用一次。

下面看一下angular-ui的基本路由配置：

  .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('main', {
                url: '/main',
                templateUrl: './views/main.html',
                controller: 'mainCtrl',
                data: {
                    loginCheck: false
                }
            })
            .state('main.index_1', {
                url: '/index_1',
                templateUrl: './views/mainView/index_1.html',
                controller: 'mainIndex1Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('main.index_2', {
                url: '/index_2',
                templateUrl: './views/mainView/index_2.html',
                controller: 'mainIndex2Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('main.index_3', {
                url: '/index_3',
                templateUrl: './views/mainView/index_3.html',
                controller: 'mainIndex3Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('main.index_4', {
                url: '/index_4',
                templateUrl: './views/mainView/index_4.html',
                controller: 'mainIndex4Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('divertingmain', {
                url: '/divertingmain',
                templateUrl: 'views/divertings/divertingmain.html',
                controller: 'divertingMainCtrl',
                data: {
                    loginCheck: false
                }
            })
            .state('divertingmain.index_1', {
                url: '/index_1',
                templateUrl: './views/divertingMainView/index_1.html',
                controller: 'divertingMainIndex1Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('divertingmain.index_2', {
                url: '/index_2',
                templateUrl: './views/divertingMainView/index_2.html',
                controller: 'divertingMainIndex2Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('divertingmain.index_3', {
                url: '/index_3',
                templateUrl: './views/divertingMainView/index_3.html',
                controller: 'divertingMainIndex3Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('divertingmain.index_4', {
                url: '/index_4',
                templateUrl: './views/divertingMainView/index_4.html',
                controller: 'divertingMainIndex4Ctrl',
                data: {
                    loginCheck: false
                }
            })
            .state('liveroom', {
                url: '/liveroom/:roomid',
                templateUrl: './views/rooms/liveroom.html',
                controller: 'liveRoomCtrl',
                data: {
                    loginCheck: false
                }
            })
            .state('myliveroom', {
                url: '/myliveroom/:roomid',
                templateUrl: './views/rooms/myliveroom.html',
                controller: 'myLiveRoomCtrl',
                data: {
                    loginCheck: true
                }
            })
            .state('register', {
                url: '/register',
                templateUrl: 'views/register.html',
                controller: 'registerCtrl',
                data: {
                    loginCheck: false
                }
            })
            .state('addliveroom', {
                url: '/addliveroom',
                templateUrl: 'views/rooms/addliveroom.html',
                controller: 'addliveroomCtrl',
                data: {
                    loginCheck: true
                }
            })
            .state('addliveroomphoto', {
                url: '/addliveroomphoto/:roomid',
                templateUrl: 'views/rooms/addliveroomphoto.html',
                controller: 'addliveroomphotoCtrl',
                data: {
                    loginCheck: true
                }
            })
            .state('myroomlist', {
                url: '/myroomlist',
                templateUrl: 'views/rooms/myroomlist.html',
                controller: 'myRoomListCtrl',
                data: {
                    loginCheck: true
                }
            })
            .state('login', {
                url: '/login',
                templateUrl: 'views/login.html',
                controller: 'loginCtrl',
                data: {
                    loginCheck: false
                }
            })
            .state('my', {
                url: '/my',
                templateUrl: 'views/my.html',
                controller: 'myCtrl',
                data: {
                    loginCheck: false
                }
            })
            .state('userinfo', {
                url: '/userinfo',
                templateUrl: 'views/users/userinfo.html',
                controller: 'userInfoCtrl',
                data: {
                    loginCheck: true
                }
            })
            .state('discovermain', {
                url: '/discovermain',
                templateUrl: 'views/discovers/discovermain.html',
                controller: 'discoverMainCtrl',
                data: {
                    loginCheck: false
                }
            })
        $urlRouterProvider.otherwise('/login');
    });

angular-ui的路由比原有的路由更為強大，也更為方便，所以在項目中普遍是用這個路由進行配置。其中需要解釋的一個參數就是data，data里的變量loginCheck，是代表這個頁面是否需要登錄驗證。

最后一行的otherwise表示沒有匹配的路由項進入到登錄頁面。