Nested states UI Router

Question

I am struggling to get nested states working with UI router

I want a page to view a device to be have a URL like /device/SERIAL_NUMBER/info where

/device is fixed
/SERIAL_NUMBER is variable aka :id
/info refers to a nested state

I have a number of nested states I want, but for simplicity I'm only showing a one state. Note that for info it shares the same controller as the parent view, other nested views do not.

State setup

.state('device', {
    url: '/device/:id',
    templateUrl: '/views/devices/device.html',
    controller: 'viewDeviceController'
})
.state('device.info', {
    url: 'info',
    templateUrl: '/views/devices/device_info.html'
})

My main HTML looks something like this

<body>
   <header><h1>Title</h1></header>
   <div ui-view>
       <!-- This is where /views/devices/device.html goes -->
   </div>

/views/devices/device.html looks like so:

<div>General text about a device</div>
<div ui-view>
   <!-- This is where /views/devices/device_info.html should go -->
</div>

If I navigate to /#/device/L340009 I see the main page and the device.html, I do not see device_info.html - this is expected but ideally I'd like the default to be to load the first route (info)

If I navigate to /#/device/L340009/info it redirects me to home (which is my otherwise) so something is wrong with the route

Where am I going wrong?

Radim Köhler Radim Köhler · Accepted Answer · 2015-10-16T14:21:36

The url here should start with '/'

.state('device.info', {
    // instead of this
    // url: 'info',
    // we need this
    url: '/info',
    templateUrl: '/views/devices/device_info.html'
})

that will support url concatenation

'/#/device/L340009' + '/info' 
is '/#/device/L340009/info'

Nested states UI Router

1 Answers