Issue with Nested State in Angular UI-Router

Question

I'm trying to create 2 separate URL states within the same config file.

I was following this template below.

 $stateProvider.state('parent', { data:{ customData1: "Hello", customData2: "World!" } }) .state('parent.child', { data:{ // customData1 inherited from 'parent' // but we'll overwrite customData2 customData2: "UI-Router!" } }); 

My code is below. The /reports/moveFrom works fine; however, the /drillDown route is not even registering. Hitting that url sends me back to my apps homepage.

I'm wondering if the parent.child notation is getting messed up by the app.report_moveFrom.drillDown as it has 2x (.)

Any help would be greatly appreciated.

  $stateProvider .state('app.report_moveFrom', { url: '/reports/moveFrom', views:{ 'main': { template: require('./moveFrom.html'), controller: 'moveFromController as $ctrl' } }, title: 'moveFrom' }) .state('app.report_moveFrom.drillDown', { url: '/drillDown', views:{ 'main': { template: require('./drillDown.html'), controller: 'moveFromController as $ctrl' } }, title: 'drillDown' }) 

Answer 1

Can you please add the code that you using to make a call. You should be calling something like this:

/reports/moveFrom/drillDown

If you are not doing this, kindly change it once and check

This is the piece from the lib:

$stateProvider .state('contacts', { abstract: true, url: '/contacts',

    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>'
})
.state('contacts.list', {
    // url will become '/contacts/list'
    url: '/list'
    //...more
})
.state('contacts.detail', {
    // url will become '/contacts/detail'
    url: '/detail',
    //...more
})

Answer 2

The point is: each . (dot) in state name represents nesting. Ie

// child of the 'app' state
.state('app.report_moveFrom', {
// child of the above 'app.report_moveFrom'
.state('app.report_moveFrom.drillDown', {

Also, any view targeting, is using by default relative naming. It means, UI-Router searches for (un)named view in the parent state. So, the 'app.report_moveFrom' must contain app.report_moveFrom if we use this syntax as this:

// parent for next state
.state('app.report_moveFrom', {
...
// the default view name resolution is related to parent
.state('app.report_moveFrom.drillDown', {
  url: '/drillDown',
  views:{
     // that ui-view="main" target must be in the above state
    'main': {
    ...

and finally, if we have a child, it inherits the parent url as well

// parent url
.state('app.report_moveFrom', {
  url: '/reports/moveFrom',
  ...
})
//child url - is later extended with parent part
.state('app.report_moveFrom.drillDown', {
  url: '/drillDown',
  ...
  // and in runtime this state has '/reports/moveFrom' +  '/drillDown'
  // i.e.: '/reports/moveFrom/drillDown'

But we can change this default behavior, with just a few tricks.

1) Reset url, to start at root, and 2) target grand parent, with absolute view naming

.state('app.report_moveFrom.drillDown', {
  // this sign at the beginning will rest url evaluation - to root level
  url: '^/drillDown',
  views:{
    // we use absolute naming here, so this state will be placed into grand parent 'app'
    'main@app': {
      ...

But the best would be (in my view) simply remove the '.' from the state name, and by default create a sibling (not a child)

.state('app.report_moveFrom', {
// remove dot
//.state('app.report_moveFrom.drillDown', {
.state('app.report_moveFrom_drillDown', {

...and now all will be working by design - because we did not created too much nested state