CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-routing
monda
monda

Reputation: 3915

Angular ui routing check condition before loading state

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?

Upvotes: 1

Views: 2172

Answers (3)

anurag619
anurag619

Reputation: 712

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");
        }
    }
}

Upvotes: 1

Mistalis
Mistalis

Reputation: 18289

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.

Upvotes: 1

Prashanth VG
Prashanth VG

Reputation: 191

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()
       }
    });
 });

Upvotes: 0

Related Questions