title: UI-Router inheriting views
body: <p>i'm beginning to have some serious repetitions in my code.</p>
  
  <p>Is there any way to declare a father view that outer views will inherit from ?</p>
  
  <p>my code is as below : </p>
  
  <pre><code>    var header = { templateUrl: "partials/header/header.html"};
      var footer = { templateUrl: "partials/footer/footer.html"};
  
      $stateProvider
          .state('main', {
              url: "/",
              views: {
                  "header": header,
                  "mainContent": { templateUrl: "partials/mainContent.html"},
                  "footer": footer
              }
          })
          .state('lesson', {
              url: "/lesson",
              views: {
                  "header": header,
                  "mainContent": { templateUrl: "partials/lesson/lesson.html"},
                  "footer": footer
              }
          })
          .state('register', {
              url: "/register",
              views: {
                  "header": header,
                  "mainContent": { templateUrl: "partials/register/register.html"},
                  "footer": footer
              }
          })
          .state('404', {
              url: "/404",
              views: {
                  "header": header,
                  "mainContent": { templateUrl: "partials/404/404.html"},
                  "footer": footer
              }
          });
  
      $urlRouterProvider.otherwise('/404');
  </code></pre>