zoukankan      html  css  js  c++  java
  • [AngularJS] Default Child state and nav between child state

    Let's say we want a parent state which is a abstract state. Two children states, one is for sinlge account view and another is for multi-accounts view. 

    By default, we want to go single account view:

                .state('selfcare.my-services', {
                    url: 'my-services',
                    abstract: true,
                    resolve: {
                        authenticate: authenticate
                    }
                })
                .state('selfcare.my-services.single', {
                    url: '',
                    views: {
                        'main@': {
                            template: '<clm-my-services></clm-my-services>'
                        }
                    },
                    resolve: {
                        router: ($q, UserService) => {
                            let loginName = UserService.userProfileDataFromJWT.loginName;
                            return UserService.getServiceDetails(loginName)
                                .then((res) => {
                                    if (_.size(res.billAccounts) > 1) {
                                        return $q.reject('TO_MULTI_SERVICES');
                                    } else {
                                        return $q.when();
                                    }
                                });
                        }
                    }
                })

    The idea is:

    • Keep the default child state's url empty, so it knows this child state is default one, it will have the same url as parent.
    • Make parent state as abstract state.
    • authenticate is only need for parent, because it always goes from parent to children, so if parent is authenticated then it means child state is also authenticated.

    Then in the code we have:router resolve block, you can name it anything you want:

    router: ($q, UserService) => {
                            let loginName = UserService.userProfileDataFromJWT.loginName;
                            return UserService.getServiceDetails(loginName)
                                .then((res) => {
                                    if (_.size(res.billAccounts) > 1) {
                                        return $q.reject('TO_MULTI_SERVICES');
                                    } else {
                                        return $q.when();
                                    }
                                });

    It says that if there is multi service accounts then go multi-service account. So reject the promise, it will be handled by $stateChangeError.

    $stateChangeError:

    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
                switch (error) {case 'TO_SINGLE_SERVICE':
                        return $state.go('selfcare.my-services.single');
                    case 'TO_MULTI_SERVICES':
                        return $state.go('selfcare.my-services.compsite');
                    default:
                        $state.go('login.main');
                }
    
                $('.progress-bar')
                    .hide();
            });

    The same as to handle multi-account view. And because you cannot access abstract directly by url, so to access the account, you need to do:

    ui-sref="selfcare.my-services.single"
  • 相关阅读:
    数据结构基础(21) --DFS与BFS
    数据结构基础(20) --图的存储结构
    数据结构基础(19) --堆与堆排序
    数据结构基础(18) --哈希表的设计与实现
    数据结构基础(17) --二叉查找树的设计与实现
    数据结构基础(16) --树与二叉树
    数据结构基础(15) --基数排序
    数据结构基础(14) --链式队列的设计与实现
    在centOS6.5 上安装使用pipework
    数据结构基础(13) --链式栈的设计与实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5542949.html
Copyright © 2011-2022 走看看