ui-router changes the path in AngularJS

Question

My routing is:

$stateProvider.state('login', {
  url: '/login'
  views:
    appView:
      templateUrl: '/templates/login.html'
}).state('chooser', {
  url: '/chooser'
  views:
    appView:
      templateUrl: '/templates/chooser.html'
}).state('admin', {
  url: '/admin'
  views:
    appView:
      templateUrl: '/templates/admin.html'
}).state('admin.users', {
  url: '/admin/users'
  views:
    appView:
      templateUrl: '/templates/admin.html'
    adminView:
      templateUrl: '/templates/admin-users.html'
})

In my view, I have:

  <ul class="nav nav-pills nav-stacked">
    <li><a ui-sref="admin.users">Users</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
  </ul>

When I click the link for Users it goes to /admin/admin/users instead of /admin/users. What am I doing wrong?

Radim Köhler · Accepted Answer · 2014-06-10 17:53:44Z

1

A child state does inherit the parent url. So the mapping should look like this:

.state('admin.users', {
  //url: '/admin/users'
  url: '/users'
  views:
    appView:
      templateUrl: '/templates/admin.html'
    adminView:
      templateUrl: '/templates/admin-users.html'
})

And the resulting url will be /admin/users

The other option is to restart url evaluation, see: Absolute Routes (^):

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

.state('admin.users', {
  //url: '/admin/users'
  url: '^/admin/users'
  views:
    appView:
      templateUrl: '/templates/admin.html'
    adminView:
      templateUrl: '/templates/admin-users.html'
})

answered Jun 10, 2014 at 17:53

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

Comments

PandAngular · Accepted Answer · 2014-06-10 18:09:04Z

1

the state should be as follow as state inherits routes. change it as follow:

.state('admin.users', {
    url: '/users'
    views:
     appView:
       templateUrl: '/templates/admin.html' 
     adminView:
       templateUrl: '/templates/admin-users.html'
})

answered Jun 10, 2014 at 18:09

PandAngular

1013 bronze badges

Collectives™ on Stack Overflow

ui-router changes the path in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related