Child state loads parent state templateUrl in nested routes of UI-Router

Question

I'm using UI-Router module for routing. I have 2 states that router should match the urls with them according to nested routes laws :

// Dashboard
.state('dashboard', {
    url: "/dashboard",
    templateUrl: "dashboard/views/index.html",
    controller: "DashboardController",
    ...
})

// Users
.state('users', {
    url: "/users",
    templateUrl: "users/views/index.html",
    controller: "UsersController",
    ...
})

// Single User
.state('users.id', {
    url: "/{id:(?:[a-z0-9_-]{3,16})}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})

also I have set a default route :

$urlRouterProvider.otherwise("/dashboard");

Problem :

when I go to http://127.0.0.1:8000/app/#/users/testuser123 , it shows index.html from users state instead of show.html from users.id state. What's the Problem ?

Answer 1

You should add users within your url definition for users.id if you call http://127.0.0.1:8000/app/#/users/testuser123

.state('users.id', {
    url: "/users/{id:(?:[a-z0-9_-]{3,16})}",
    templateUrl: "users/views/show.html",
    controller: "UserController",
    ...
})