UI-Router considering url as state

Question

I have my routing defined as below

$stateProvider
    ('MasterPage', {
        url: '/',
        templateUrl: 'views/master.html',
})
.state('MasterPage.dashboard', {
    url: 'dashboard',
    templateUrl: 'views/dash.html',
})
.state('MasterPage.test', {
    url: 'test/:id',
    templateUrl: 'views/test.html',
})
$urlRouterProvider.otherwise('/');

I have links that allows me to navigate from mainpage to dashboard and then to the test page which works fine. When I navigate to the test page with an id:1234, which makes my url as <HOST>/#/test/1234, and try to refresh it fails. It gives me an error saying:

Cannot resolve state 'MasterPage.test/1234' from 'MasterPage.test'

Why is UI-Router considering the url segment as a state?

Update I dont have any ui-sref. I am going to the test page by using $state.go('MasterPage.test', {id:1234}).

Radim Köhler · Answer 1 · 2016-06-08T07:14:27.747

1

There is working plunker

This issue is usually related to wrong ui-sref setting

<a ui-sref="MasterPage.test/1234">

we need to split and pass 1) the state name, and 2) state params like this:

<a ui-sref="MasterPage.test({id:1234})">

In case, we want to use href, we just have to concatenate parent and child url definitions (parent '/', child 'test/:id') :

<a href="/test/1234">

EXTEND

So, these states (almost unchanged):

    .state('MasterPage', {
      url: '/',
      templateUrl: 'views/master.html',
    })
    .state('MasterPage.dashboard', {
      url: 'dashboard',
      templateUrl: 'views/dash.html',
    })
    .state('MasterPage.test', {
      url: 'test/:id',
      templateUrl: 'views/test.html',
    })

will work with these links

  <a href="#/">
  <a href="#/dashboard">
  <a href="#/test/1234">
  <a href="#/test/9875">
  <a ui-sref="MasterPage">
  <a ui-sref="MasterPage.dashboard">
  <a ui-sref="MasterPage.test({id:2222})">
  <a ui-sref="MasterPage.test({id:4444})">

There is working plunker

edited Jun 08 '16 at 07:14

answered Jun 08 '16 at 05:45

Radim Köhler

122,561
47
239
335

I dont have any ui-sref. I am going to the test page by using `$state.go('MasterPage.test', {id:1234})`. – BiJ Jun 08 '16 at 07:02
ui-sref and $state.go do have almost the same syntax... (ui-sref behind uses $state.go - http://stackoverflow.com/q/24526801/1679310... so, this must work `$state.go('MasterPage.test', {id:1234})`... I can try to create a plunker... – Radim Köhler Jun 08 '16 at 07:07
I created a plunker for you, showing your state def in action.. and it is working ;) – Radim Köhler Jun 08 '16 at 07:14

UI-Router considering url as state

1 Answers1

EXTEND