AngularJS-app.js

发布时间:2017-5-30 1:01:37 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"AngularJS-app.js ",主要涉及到AngularJS-app.js 方面的内容,对于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表示没有匹配的路由项进入到登录页面。

上一篇:长连接心跳机制理解
下一篇:前端学HTTP之web攻击技术

相关文章

关键词: AngularJS-app.js

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。