angular ui.router state.go('statename') not working

Question

This is the angular.ui.router definition

app.config([   '$stateProvider',   '$urlRouterProvider',   function($stateProvider, $urlRouterProvider){     $urlRouterProvider.otherwise('/');       $stateProvider.state('/login',{           url: "/",           controller: 'Login',           templateUrl: 'login.html'       })       .state('/useractivities',{           url: "/activities",           controller: 'activitiesController',           templateUrl: 'useractivities.html'       })   } ]); 

In the login controller I am executing

$state.go('useractivities', {}); 

This gives an error "Could not resolve 'useractivities' from state '/'"

I have tried a few things like

$location.url('useractivities')  

but no luck, can anyone tell me whats going wrong?

Answer 1

The issue here is that to param of the $state.go() call must be existing state name. And the 'activities' is not existing name... it is the '/activities'

I would firstly suggest to use different state naming:

$stateProvider   // instead of this   // .state('/',{   // let's use this state name         .state('login',{          // this is a STATE Name       url: "/",       controller: 'Login',       templateUrl: 'login.html'   })   // instead of this   // .state('/activities',{   // use this   .state('activities',{      // this is a STATE Name       url: "/activities",       controller: 'activitiesController',       templateUrl: 'useractivities.html'   }) 

And then this will work

$state.go('activities', {}); // we use STATE Name here $state.go('login', {});      // also state name... 

Check here for more details:

$state.go(to [, toParams] [, options])

to

String Absolute State Name or Relative State Path

The name of the state that will be transitioned to or a relative state path. If the path starts with ^ or . then it is relative, otherwise it is absolute.

Some examples:

$state.go('contact.detail') will go to the 'contact.detail' state $state.go('^') will go to a parent state. $state.go('^.sibling') will go to a sibling state. $state.go('.child.grandchild') will go to a grandchild state. 

Answer 2

This issue can also occur if you try to use a "." in your state name. E.g.,

$stateProvider.state("Activities.Details", { url: ... }) ... $state.go("Activities.Details"); 

If you use a "_" or some other non-reserved character, it will work fine.

$stateProvider.state("Activities_Details", { url: ... }) ... $state.go("Activities_Details");