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?

score 3 · Accepted Answer · answered Oct 16 '15 at 14:21

3

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'

answered Oct 16 '15 at 14:21

Radim Köhler

122,561
47
239
335

I feel stupid - that worked! How do I get `info` to act as the default route if one isn't specified? – Chris Oct 16 '15 at 14:23
Sorry, not fully sure about this "..How do I get info to act as the default route if one isn't specified?..." I do not fully understand. Are you asking about how to do default redirection if wrong state is provided? In case that yes, we can use `$urlRouterProvider.otherwise('/home');` - check this plunker http://plnkr.co/edit/4pjoofCXq444kjXLqGx8?p=info – Radim Köhler Oct 16 '15 at 14:24
I already have an otherwise for the top level route, what I mean is if someone goes to `/device/XXXXX` how do I make them auto go to `/device/XXXXX/info` – Chris Oct 16 '15 at 14:27
I see... I will try to find some example ... This one I do like the most http://stackoverflow.com/q/29491079/1679310 – Radim Köhler Oct 16 '15 at 14:28
1

Great if that helped anyhow! Enjoy mighty UI-Router, sir ;) – Radim Köhler Oct 16 '15 at 14:34

Nested states UI Router

1 Answers1