title: How to write common header & footer in Angularjs using ui router states
body: <p>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 &amp; footer.</p>
  
  <pre><code>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: '&lt;h1&gt;First header&lt;/h1&gt;',
                      controller: function($scope) {}
                  },
                  content: {
                      template: '&lt;p&gt;First content&lt;/&gt;',
                      controller: function($scope) {}
                  },
                  footer: {
                      template: '&lt;div&gt;First footer&lt;/div&gt;',
                      controller: function($scope) {}
                  }
              }
          })
          .state('second', {
              url: "/second",
              views: {
                  header: {
                      template: '&lt;h1&gt;Second header&lt;/h1&gt;',
                      controller: function($scope) {}
                  },
                  content: {
                      template: '&lt;p&gt;Second content&lt;/&gt;',
                      controller: function($scope) {}
                  },
                  footer: {
                      template: '&lt;div&gt;Second footer&lt;/div&gt;',
                      controller: function($scope) {}
                  }
              }
          });
  
  });
  </code></pre>
  
  <p>Jsfiddle : <a href="http://jsfiddle.net/karthikreddy/b7cnszdf/" rel="nofollow">http://jsfiddle.net/karthikreddy/b7cnszdf/</a></p>