6

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

1. ng-include - attaching your header / footer into your initial .html file (index.html).

<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>

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 with no url.

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?

cbass
  • 2,548
  • 2
  • 27
  • 39
zurfyx
  • 31,043
  • 20
  • 111
  • 145
  • Use the 2nd way. Create custom tag (wrap your own components) is a recommend approach of code reuse. You can add control logic, some time when you have the need, without changing any code where the tag is used. – stanleyxu2005 Dec 29 '15 at 16:46

1 Answers1

11

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

cbass
  • 2,548
  • 2
  • 27
  • 39
  • 2
    A bonus for doing it this way is that you can redefine the header or footer in a substate, like `.state('myapp.one.substate', { views: "header@myapp": { template: "

    New header for myapp.one.substate.*" } })`

     – Chris T Dec 30 '15 at 17:42