I have an abstract state declared as
$stateProvider.state('myapp', {
abstract: true,
templateUrl : 'index.html'
});
And all the <ui-view>
in the 'index.html' template will be populated by the children states:
$stateProvider.state('myapp.home', {
url : "/",
views : {
"main" : {
controller : 'HomeCtrl',
templateUrl : 'includes/home.html'
}
}
});
What I don't understand is why the template from the home state isn't injected in the parent named view but it works when using "main@"
as view name.
If I understood correctly, "@"
target the absolute root state and just using "main"
targets the parent state.
But isn't the abstract state the parent of myapp.home
here?
Thanks
I would say, that a significant confusion could come from the fact, that our super root state
'myapp'
uses template namedindex.html
.I would suggest to change that naming and this adjusted example then should work. The index.html, will be used only as a starting page (referencing angular, UI-Router...)
Now, we can target this ui-view 3 ways. We can use implicit, or explicti relative or explicit aboslute naming build as
viewName@stateName
. These three defintions are the same:As we can se,, for the 'myapp' state we used different
templateUrl: 'tpl.myapp.html'
. Its content is different the index.html, it could be:And now we have to target this view only explicit way (but could be relative or absolute:
Check the example here
Read more about it here: