CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Eno
Eno

Reputation: 10850

Cannot transition state using Angular ui-router

Im trying to get stateful routing working in an AngularJS app. My config is as follows:

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('index', {          
      url: '^/',               
      templateUrl: 'templates/home.html'
    })
    .state('messsage', {          
      url: '/message/:id',       
      templateUrl: 'templates/message.html'
  });

  // internal redirect to '/' as default
  $urlRouterProvider.otherwise("/");
});

The home state renders, but when I click on a link to the second state I get an error in the console basically saying it cannot transition state:

Error: Could not resolve '#/message/0' from state 'index'

The docs / API refs I could find did not help me much.

Upvotes: 1

Views: 587

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123861

The issue here is caused by inappropriate use of the ui-sref directive. There is a plunker showing the issue.

If, inside of the index state template we do create link like this:

<a ui-sref="#/message/0">...

we'll get the Error: Could not resolve '#/message/0' from state 'index'

The syntax which will work must be like this (both are the same):

<a href="#/message/0">...     
<a ui-sref="message({id:0})">...

Check it here

Upvotes: 2

Related Questions