title: Is there a better way to go about building layouts using ui.router?
body: <p>I am currently using <code>&lt;div ng-include src="'js/app/partials/layout/header.html'"&gt;&lt;/div&gt;</code> just above my <code>&lt;div ui-view&gt;</code> in my <code>index.blade.php</code> file while using Angular with Laravel. </p>
  
  <p>I have looked into parent state inheritance in <code>ui.router</code> but it seems to not work, and feels complicated / or perhaps an overkill for layouts. I just want to inject a header and a footer.</p>
  
  <p>This is what I was doing earlier in my attempt to use ui.router states to create a layout injection system. As you can see below.</p>
  
  <pre><code>&lt;div ui-view="header"&gt;&lt;/div&gt;
  &lt;div ui-view&gt;&lt;/div&gt;  
  </code></pre>
  
  <hr>
  
  <pre><code>.state('root', {
      url: '/',
      abstract: true,
      views: {
          'header': {
              templateUrl: 'js/app/partials/header.html'
          }
      },
      data: {
          requireLogin: false
      }
  })
  .state('root.login', {
      url: '/login',
      templateUrl: 'js/app/partials/login.html',
      controller: 'LoginCtrl',
      data: {
          requireLogin: false
      }
  })
  </code></pre>