I want to know if there is any way to write multiple named view for all states, the best example is when i want the nav bar and footer to appear in all routes.
$stateProvider
.state('home',{
views: {
'home': {
templateUrl: 'home.html',
controller: controller
},
'nav': {
templateUrl: 'nav.html',
controller:controller
},
'footer': {
templateUrl: 'footer.html',
controller: controller
},
}
})
I dont want to use ng-include, because the nav and the footer is showing before the home state is resolved in this case.
Yes you can, its actually written in the ui-router
's guide on how to manage Multiple Named Views.
First, you need to define a specific set of named views in an abstract state, including the view where you would put all your content views such as your home.html
and put it in a nameless view (empty string).
As you may have noticed, the demo below shows a root state named app
, which is also an abstract state (this means you can't navigate in this state). It has three views, each represents a name that corresponds to the ui-view
s defined in the index.html
.
Within the nameless view, contains the content.html
that has a nameless ui-view
that will represent all the child states of the app
state. By doing this, you can share the nav.html
and footer.html
to all your states if you add these states under the app
state. An example to this would be the app.home
and app.items
state. To learn more about this, read the link I've added above.
DEMO
Javascript
$urlRouterProvider.otherwise('/home');
$stateProvider.state('app', {
abstract: true,
views: {
nav: {
templateUrl: 'nav.html',
controller: 'NavController as Nav'
},
'': {
templateUrl: 'content.html',
controller: 'ContentController as Content'
},
footer: {
templateUrl: 'footer.html',
controller: 'FooterController as Footer'
}
}
})
.state('app.items', {
url: '/items',
templateUrl: 'items.html',
controller: 'ItemsController as Items'
})
.state('app.home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeController as Home'
});
HTML
index.html
<ui-view name="nav"></ui-view>
<ui-view></ui-view>
<ui-view name="footer"></ui-view>
content.html
<hr>
<ui-view></ui-view>
<hr>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With