My app has a view called mainContent.
<div class = "wrapper"
ui-view = "mainContent">
</div>
There is only one route for this view.
$stateProvider
.state("home",
{
url: "/home",
views: {
'mainContent': {
templateUrl: "app/home/home.html"
}
}
});
I am loading home.html into the named view mainContent, which also contains a named view appContent.
home.html
<div class = "row"
ui-view = "appContent">
</div>
The routes for the nested named view appContent are as follows.
$stateProvider
.state("request",
{
parent: "home",
abstract: true,
url: "/request"
})
.state("request.create", {
url: "/create",
views: {
appContent: {
templateUrl: "app/requests/create/createRequest.html",
controller: "RequestController as vm"
}
}
});
However, when I try to load , the RequestController is not created and the view createRequest.html is not loaded.
To navigate from the view to the request.create state, I use:
<a ui-sref = "request.create"><i class = "fa fa-plus"></i>New</a>
Thank you.