Geek Answers Handbook

Angular default ui.router header footer

When it comes to ui.router modules, I can imagine three different ways to set a default header and footer for each view:

DEFAULT HEADER <CONTENT> DEFAULT FOOTER

1. ng-include - attach your header / footer to the original .html file (index.html).

 <html> <div ng-include src="'header.html'"></div> <div id="content" ui-view></div>

1.1. Paste code in index.html

 <html> <div><!-- my header code here --></div> <div id="content" ui-view></div>

2. Using directives to parse 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) { }] } });

http://gon.to/2013/03/23/the-right-way-of-coding-angularjs-how-to-organize-a-regular-webapp/

3. Creating an extra state on ui.router without a url.

The state wrapper will then contain the header and footer and will not be called.

 $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 preferable? Or is there a more desirable way to do this with Angular 1.x?

+6
source share
1 answer

There is also another way to use the state views property. This allows you to define multiple named views for a specific state. User Interface Documents

Consider the example below, in which the state myapp has three named views, where the content view will be a dynamic content view.

 $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

+10
source

More articles:


All Articles