Issue with Nested State in Angular UI-Router - angularjs

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. I.e
// 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