Angular ui routing check condition before loading state

Question

Using angular ui-router I'm trying to make nested routing based on condition.i.e Want to check a condition before loading a state.

    .state('main.home', {
        url: "/:cnt",
        abstract: true,
        templateUrl: function ($stateParams) {
            return template1;
        },
        controller: "myController",
        resolve: {
            //Some model
            }],

            lazy: ['$ocLazyLoad', '$stateParams', function ($ocLazyLoad, $stateParams) {
               //lazily loaded controllers
            }]
        },
        onEnter: updateAppValues,
    }).state('main.home.default', {
        url: '',
        templateUrl: function ($stateParams) {
            return template2;
        },
        resolve: {
            lazy: ['$ocLazyLoad', function ($ocLazyLoad) {
                //lazily loaded controllers
            }]
        },
        controller: 'myDefaultController',
    })

basically the nested router main.home.default must be loaded conditionally

if(something){
    //loaded state main.home.default
}

How can I achieve this?

you can write a if condition in resolve and in negative case use $location path to redirect to other route — Vinod Louis
– Vinod Louis, Commented Jan 24, 2017 at 8:49

Mistalis · Accepted Answer · 2017-01-24 09:20:53Z

1

You can catch the event of route changing with:

$rootScope.$on("$routeChangeStart", function(event, next, current) {
    if(next.$$route == 'routeYouWantToAvoid') { // Or whatever you want
        $state.transitTo('main.home.default');
    }
});

next is the route you are going to.
current the route you are coming from.

Here is the documentation if you need more information.

answered Jan 24, 2017 at 9:20

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anurag619 · Accepted Answer · 2017-01-24 10:50:22Z

1

You can add if condition in the resolve of main.home.default. ex:

 resolve:{
    "check":function($location){   
        if('Your Condition'){ 
            //Do something
        }else{
            $location.path('/');    //redirect user to home.
            alert("You dont belong here");
        }
    }
}

answered Jan 24, 2017 at 10:50

anurag619

7128 silver badges17 bronze badges

Comments

Prashanth VG · Accepted Answer · 2017-01-24 08:59:33Z

0

app.run(function($rootScope, $state) {
   $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) { 
     if (toState.name == 'login'){ //if the name of that state is login
    //go to login page
      }
   });
});

Does this give you any idea? or

app.run(function($rootScope, $state){
   $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {
      if(*your condition*) {
         $state.transitTo('stateYouWantToGo')
         event.preventDefault()
       }
    });
 });

edited Jan 24, 2017 at 8:59

answered Jan 24, 2017 at 8:49

Prashanth VG

1911 silver badge14 bronze badges

Collectives™ on Stack Overflow

Angular ui routing check condition before loading state

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related