title: Define a nested view
body: <p>I have a website by AngularJS, <code>index.html</code> has</p>
  
  <pre><code>&lt;body&gt;
      &lt;ui-view ng-cloak&gt;&lt;/ui-view&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And in <code>angularApp.js</code>:</p>
  
  <pre><code>app.config(['$stateProvider', function ($stateProvider) {
      $stateProvider
          .state('home', {
              url: '/home',
              templateUrl: '/htmls/home.html',
              controller: 'MainCtrl'
          }
          .state('help', {
              url: '/help',
              templateUrl: '/htmls/help.html',
              controller: 'HelpCtrl'
          }   
  }])
  </code></pre>
  
  <p>In <code>home.html</code> and <code>help.html</code> (along with other pages), I always have a same navigation bar on the top of the page. So I want to avoid from repeating the code and make a <code>/htmls/header.html</code> and a controller <code>NavCtrl</code>. As a result, I will be able to write <code>&lt;div ui-view="header"&gt;&lt;/div&gt;</code> in these htmls.</p>
  
  <p>Does anyone know how to modify my <code>angularApp.js</code> and maybe <code>index.html</code> to let them accept the nested <code>header</code> view?</p>