title: AngularJS UI-Router multiple pages
body: <p>As Angular is SPA that's terrific, but what if I need some other page not related to index.html, how is realised by UI-Router states with different ui-views?</p>
  
  <p>For example, I have <strong>index.html</strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="npAdmin"&gt;
  &lt;head&gt;
  ...
  &lt;/head&gt;
  &lt;body&gt;
     &lt;header&gt;
        &lt;data-user-profile class="user-profile"&gt;&lt;/data-user-profile&gt;
    &lt;/header&gt;
  
    &lt;section class="content-wrapper"&gt;
        &lt;aside data-main-menu&gt;&lt;/aside&gt;
        &lt;div class="main-content" data-ui-view&gt;&lt;/div&gt;
    &lt;/section&gt;
  
    &lt;footer class="row"&gt;&lt;/footer&gt;
  ...
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong>:</p>
  
  <pre><code>var app = angular.module('npAdmin', ['ui.router']);
  
  app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) {
  
      $stateProvider
      .state('dashboard', {
          url: '/dashboard',
          templateUrl: '/app/dashboard/dashboard.html',
          controller: 'DashboardCtrl'
      })
      .state('crm', {
          url: '/crm',
          templateUrl: '/app/crm/crm.html',
          controller: 'CrmCtrl'
      })
  ...
  </code></pre>
  
  <p>Now I need <strong>login.html</strong> which is totally different from index.html (don't need index's header, footer, sidebar) but config stateProvider only looks to index.html ui-view and changes content to it by states. How to combine login.html?</p>
  
  <p>It seems not that hard, but I don't get it.</p>