AngularJS路由配置

AngularJS路由配置

十一月 28, 2018

项目上要实现一个监控大屏全屏效果，h5提供的requestFullScreen出于安全策略，认为要实现全屏必须伴随用户的一个gesture，也就是js不能主动触发；首页点击一个按钮可以触发全屏，但是跳转大屏后会退出全屏效果，也就是页面之间的切换会退出全屏模式。之前搭框架的人是把login和home页面分开的，没有采用router去跳转，这就涉及到刚才提到的页面切换退出全屏。在此背景下，要实现全屏，就必须采用router形式进行页面跳转，记录下踩坑经历。

项目原有框架

  1. index.html 登陆页面
  2. home.html 首页（首页中局部区域页面切换采用的router）
  3. monitor.html 监控页面

流程如下：

1
2
3
4
5
6
7
graph LR

A[登陆页] -->C{首页}

    C -->|大屏| D[大屏页面]

    C -->|局部切换| E{首页}

用户浏览器敲入地址后默认跳转登陆页，登陆后跳转（window.location.href形式）首页：

  1. 首页点击菜单局部切换页面（采用router形式）；
  2. 首页如果点击大屏切换按钮则跳转大屏页面（因为之前的框架home页面并不是路由形式跳转，monitor页面也只能采用window的方式跳转）。

Router重新配置

重新整理后的流程如下：

1
2
3
4
5
6
st=>start: 浏览器敲入地址
op=>operation: 登陆页面
cond=>condition: 首页

st->op->cond
cond(yes)->op

index页面放ui-view标签，管理登陆页，首页和监控页面跳转，其中首页页面中加入子路由，控制首页菜单点击局部页面切换。系统默认进入首页中的欢迎页面，当然所有的页面进入会有监听$locationChangeStart，如果是进入登陆或者app部分页面不需要拦截，其他页面进入要判断是否有token或者token是否超时，如果没有或者超时直接弹出提示并跳转登陆页。

嵌套路由代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$urlRouterProvider.when('', '/home/system-shouye');
$stateProvider
    .state('login', {
        url: '/login',
        templateUrl: '/dist/mab-view/login/login.html',
        controller: 'indexCtrl'
    })
    .state('home', {
        url: '/home',
        templateUrl: '/dist/view/home.html',
        controller: 'homeCtrl'
    })
    .state('home.welcome', {
        url: '/welcome',
        templateUrl: '/dist/view/shouye/system-shouye.html',
        controller: 'systemShouyeCtrl'
    })
    .state('home.adminis-division', {
        url: '/adminis-division',
        templateUrl: '/dist/view/baseInfo/adminis-division.html',
        controller: 'adminisDivisionCtrl'
    })
    .state('home.industry-type', {
        url: '/industry-type',
        templateUrl: '/dist/view/baseInfo/industry-type.html',
        controller: 'industryTypeCtrl'
    });

跳转拦截

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//当location.path 发生变化或者$location.url发生变化时触发
    $rootScope.$on('$locationChangeStart',function (event, toState, toParams, fromState, fromParams) {
        var temp = toState.substring(toState.lastIndexOf('/') + 1);
        // 如果是跳转登陆或者app h5跳转直接放行
        if ('login' === temp || toState.indexOf('app.html') > -1) {
            // do nothing
        } else {
            var token = localFactory.get('access_token');
            if (!token) {
                // 阻止跳转
                event.preventDefault();
                $state.go('login');
            } else if ((new Date()).getTime() > Number(sessionFactory.get('expired'))) {
                // 阻止跳转
                event.preventDefault();
                // 弹出提示
                $rootScope.alert.error('用户在线时长超过限制，请重新登陆', '页面跳转');
                setTimeout(function () {
                    $state.go('login');
                }, 2000);
            }
        }
    });

页面跳转

1
2
3
4
5
6
// $state跳转 传参和路由中配置的state字段相同
$state.go('login');
$state.go('home.welcome');
// $location跳转 对应到路由配置中的url，嵌套路由应包含父url
$location.url('/login');
$location.url('home/welcome');

路由修改后即可在首页点击大屏切换按钮后，使用路由方式跳转到monitor，同时调用全屏api进入全屏模式，bingo！