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表示没有匹配的路由项进入到登录页面。