Menu
When it comes to ui.router modules I can think of three different ways to set a default header and footer for every view:
DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER
<html>
<div ng-include src="'header.html'"></div>
<div id="content" ui-view></div>
1.1. Pasting code into index.html
<html>
<div><!-- my header code here --></div>
<div id="content" ui-view></div>
home.html
<!-- content -->
<!-- /content -->
<footer></footer>
footerDirective.js
module.directive('footer', function () {
return {
restrict: 'E',
replace: true,
templateUrl: "footer.html",
controller: ['$scope', '$filter', function ($scope, $filter) {
}]
}
});
http://gon.to/2013/03/23/the-right-way-of-coding-angularjs-how-to-organize-a-regular-webapp/
State wrapper would then contain the header and footer and won't be callable.
$stateProvider
.state('wrapper', {
templateUrl: 'wrapper.html', // contains html of header and footer
controller: 'WrapperCtrl'
})
.state('wrapper.home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
Which one is preferred? Or, is there a more desirable way to do it with Angular 1.x?
743
There is also another way where you take advantage of the state's views property. It enables one to define multiple named views for a certain state. UI docs.
Consider the below example where state myapp has three named views, where the content view will be the view with dynamic content.
$stateProvider
.state('myapp', {
views: {
'header': {
template:'header <hr />',
controller:'mainController as main'
},
'content': {
template:'<div ui-view></div>'
},
'footer': {
template:'<hr /> footer',
controller:'mainController as main'
}
}
})
//States below will live in content view
.state('myapp.one', {
template:'View 1 <button ui-sref="myapp.two">next page</button>',
controller:'firstController as first',
})
.state('myapp.two', {
template:'Another page <button ui-sref="myapp.one"> Go back</button>',
controller:'secondController as second',
})
And the HTML will look like this:
<div ui-view="header"></div>
<div ui-view="content"><!-- Where your content will live --></div>
<div ui-view="footer"></div>
Jsbin example
150
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
