When dealing with ui.router modules, I have identified three different methods for setting a default header and footer for every view:
DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER
1. Using ng-include - inserting your header/footer in the initial .html file (index.html).
<html>
<div ng-include src="'header.html'"></div>
<div id="content" ui-view></div>
1.1. Embedding code into index.html
<html>
<div><!-- my header code here --></div>
<div id="content" ui-view></div>
2. Utilizing directives to interpret the header and footer.
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) {
}]
}
});
3. Establishing an additional state on ui.router without URL.
The state wrapper would encompass the header and footer and will not be accessible directly.
$stateProvider
.state('wrapper', {
templateUrl: 'wrapper.html', // contains html of header and footer
controller: 'WrapperCtrl'
})
.state('wrapper.home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
Which approach is preferable? Or is there a better way to achieve this using Angular 1.x?