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 · Accepted Answer · 2015-10-16 14:21:36Z

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, 2015 at 14:21

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

5 Comments

Chris Over a year ago

I feel stupid - that worked! How do I get info to act as the default route if one isn't specified?

Radim Köhler Over a year ago

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 plnkr.co/edit/4pjoofCXq444kjXLqGx8?p=info

Chris Over a year ago

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

Radim Köhler Over a year ago

I see... I will try to find some example ... This one I do like the most stackoverflow.com/q/29491079/1679310

Radim Köhler Over a year ago

Great if that helped anyhow! Enjoy mighty UI-Router, sir ;)

Collectives™ on Stack Overflow

Nested states UI Router

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related