[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"