Embed template in parent view with ui-router
I have an abstract state declared as
$stateProvider.state('myapp', {
abstract: true,
templateUrl : 'index.html'
});
And everything <ui-view>
in the 'index.html' template will be populated with the child states:
$stateProvider.state('myapp.home', {
url : "/",
views : {
"main" : {
controller : 'HomeCtrl',
templateUrl : 'includes/home.html'
}
}
});
I don't understand why the template from home state is not injected in the parent view, but it works when used "main@"
as the name of the view.
If I understand correctly, it "@"
targets the absolute state of root and only with the help "main"
sets the parent state.
But isn't the abstract state the parent myapp.home
here?
thank
source to share
I would argue that significant confusion can arise from the fact that our super-root state 'myapp'
uses a named template . index.html
I would suggest changing this name and this corrected example , then it should work. Index.html will only be used as a start page (link to angular, UI-Router ...)
<!DOCTYPE html>
<html ng-app="MyApp" ng-strict-di>
<head>
<title>my app</title>
<script src="angular.js"></script>
<script src="angular-ui-router.js"></script>
<script ...
</head>
<body>
// place for our root state
<div ui-view=""></div>
</body>
</html>
We can now customize this ui-view in 3 ways. We can use the implicit or explicti relative or explicit naming structure aboslute as . These three errors are the same: viewName@stateName
// I. no views : {} needed, we target parent unnamed
.state('myapp', {
abstract: true,
templateUrl: 'tpl.myapp.html'
})
// II. we target explicit parent unnamed view - relative notation
.state('myapp', {
abstract: true,
views : {
'': {
templateUrl: 'tpl.myapp.html'
}
}
})
// III. we target explicit parent unnamed view - absolute notation
.state('myapp', {
abstract: true,
views : {
'@': { // before @ is view name, after @ is state name, empty for root
templateUrl: 'tpl.myapp.html'
}
}
})
How can we sei for the "myapp" state, we used different . Its content is different from index.html, it could be: templateUrl: 'tpl.myapp.html'
<div>
<h2>the root myapp template</h2>
place for child states:
<div ui-view="main"></div>
</div>
And now we have to target this view only explicitly (but can be relative or absolute:
.state('myapp.home', {
url: "/",
views: {
// could be "main@myapp" as well
"main": {
controller: 'HomeCtrl',
templateUrl: 'includes/home.html'
}
}
})
Check out an example here
Read more about this here:
source to share
You are using named views. The use of main @ indicates that a child view will be added to the u-view named "main". If your parent does not have a ui-view named main then the view will not be inserted into the html.
For parent child relationships, you don't need named views. Just update your state to the next one and it will work. Also, you will need to remove the name from the ui-view in the html.
$stateProvider.state('myapp.home', {
url : "/",
controller : 'HomeCtrl',
templateUrl : 'includes/home.html'
});
source to share