How to write common header & footer in Angularjs using ui router states

Question

I am using ui router states. I have two different controllers it may be extend also in future. How to write default and common header & footer.

var myApp = angular.module('myApp', ['ui.router']);

myApp.controller('MainCtrl', function($scope) {});

myApp.config(function($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/first");

    // ui router states
    $stateProvider
        .state('first', {
            url: "/first",
            views: {
                header: {
                    template: '<h1>First header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>First footer</div>',
                    controller: function($scope) {}
                }
            }
        })
        .state('second', {
            url: "/second",
            views: {
                header: {
                    template: '<h1>Second header</h1>',
                    controller: function($scope) {}
                },
                content: {
                    template: '<p>Second content</>',
                    controller: function($scope) {}
                },
                footer: {
                    template: '<div>Second footer</div>',
                    controller: function($scope) {}
                }
            }
        });

});

Jsfiddle : http://jsfiddle.net/karthikreddy/b7cnszdf/

Solution

Please see this demo : http://jsfiddle.net/tkf954a5/

You can define your footer and header like :

  var header = {
       template: '<h1>Im Header</h1>',
       controller: function($scope) {}

  }

and after that use it in your states :

 .state('first', {
            url: "/first",
            views: {
                header: header,
                content: {
                    template: '<p>First content</>',
                    controller: function($scope) {}
                },
                footer: footer
            }
        })