title: ui-router Why parent states must be abstract
body: <p>Why parent views have to be abstract in order to have child views (nested views) rendered?</p>
  
  <pre><code>$stateProvider
              .state('A', {url: '/A', abstract: true, templateUrl: 'views/A.html'})
              .state('A.B', {url: '', abstract: true, templateUrl: 'views/B.html'})
              .state('A.B.C', {url:'', abstract:false, templateUrl:'views/C.html'});
  </code></pre>
  
  <p>The parent view 'A' is hosted in home.html as follow:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Yomingo&lt;/title&gt;
      &lt;link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"/&gt;
      &lt;link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ui-view&gt;
      &lt;/div&gt;
  &lt;script type="text/javascript" data-main="scripts/main" src="lib/require/require.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If any of the parent states 'A' or 'B' is marked as abstract=false the ui-view content is not rendered.</p>