title: Angular UI- Router Inherited Views
body: <p>My index.html file is as follows..</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div ui-view&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My home.html file is as follows..</p>
  
  <pre><code>&lt;div login id="loginBox"&gt;&lt;/div&gt;
    &lt;div ng-show="users.length"&gt;
    &lt;hr/&gt;
  
    &lt;div ui-view="header"&gt;&lt;/div&gt;
  
    &lt;div ui-view="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My app.js file is as follows</p>
  
  <pre><code>var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
    myapp.config(['$stateProvider', '$routeProvider' ,'$urlRouterProvider',function($stateProvider,$routeProvider,$urlRouterProvider) {
  
      $urlRouterProvider.otherwise('/home');
  
  
  
  
  $stateProvider
                  .state('home', {
                      abstract:true,
                      url : "/home",
                      templateUrl : 'views/home.html',
                      controller : 'homeCtrl'
                      // views: {
                      // "": {
                      // url:"/home",
                      // templateUrl: 'views/home.html',
                      // controller: 'homeCtrl'
                      // },
                      // "header@home": {
                      // templateUrl: "views/header.html"
                      // }
                      // }
                  })
  
                  .state('header', {
                      url : '/header',
                      templateUrl : 'views/header.html'
                          })
                  .state('footer', {
                      url : '/footer',
                      templateUrl : 'views/footer.html'
                          })     
         }]);
  </code></pre>
  
  <p>Which is an incomplete one. How should i design my app.js such that i can have following flow of view.</p>
  
  <p>Home is parent in which header and footer are views..</p>