title: Creating a popup like state using AngularJS ui-router
body: <p>I'm trying to create a state which acts like a popup, i.e it doesn't clear the current state, it just pops over it without completely destroying the current state (So that the user can gain access to it by dismissing the popup).</p>
  
  <p>Heavily simplified, my applications routes is something like the following:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('test', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider',
      function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('login', {
            url: '/login',
            template: '&lt;button&gt;&lt;a ui-sref="authenticated.home"&gt;Login&lt;/a&gt;&lt;/button&gt;'
          })
          .state('authenticated', {
            url: '/authenticated',
            template: '&lt;p&gt;We are now authenticated&lt;/p&gt;' +
              '&lt;a ui-sref="authenticated.home"&gt;home&lt;/a&gt;' +
              '&lt;a ui-sref="authenticated.statistics"&gt;statistics&lt;/a&gt;' +
              '&lt;a ui-sref="authenticated.popup"&gt;Popup!&lt;/a&gt;' +
              '&lt;div ui-view&gt;&lt;/div&gt;' +
              '&lt;div ui-view="popup"&gt;&lt;/div&gt;'
          })
          .state('authenticated.home', {
            url: '^/home',
            template: '&lt;p&gt;We are in home. &lt;br&gt;&lt;input&gt;&lt;/p&gt;'
          })
          .state('authenticated.statistics', {
            url: '^/statistics',
            template: '&lt;p&gt;We are in statistics. &lt;br&gt;&lt;input&gt;&lt;/p&gt;'
          })
          .state('authenticated.popup', {
            url: '^/popup',
            views: {
              popup: {
                template: '&lt;div id="popup"&gt;&lt;p&gt;popup is up&lt;/p&gt;' +
                  '&lt;a ui-sref="authenticated.home"&gt;close&lt;/a&gt;' +
                  '&lt;/div&gt;'
              }
            }
          });
        $urlRouterProvider.otherwise('/login');
      }
    ]);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    margin-right: 20px;
    text-decoration: none;
  }
  #popup {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"&gt;&lt;/script&gt;
  &lt;div ng-app="test"&gt;
    &lt;div ui-view&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>User is presented with a login screen</li>
  <li>Once logged in, user is redirected to <code>authenticated.home</code> state. The authenticated parent state holds a navigation menu and <code>&lt;ui-view&gt;</code> to attach subviews</li>
  <li>User can use this navigation to navigate around the application to other routes like <code>authenticated.statistics</code>, <code>authenticated.popup</code>.</li>
  </ul>
  
  <p>The problem is that, when I simply move to the popup state, even though I have specified <code>popup</code> view inside it's views object, it clears the other <code>ui-view</code> (makes sense though, because we're no longer in a state that matches it).</p>
  
  <p>One solution I can think of is to use something like <a href="http://christopherthielen.github.io/ui-router-extras/" rel="noreferrer">ui-router-extras</a>
  to go back to previous state, the problem with this is that any changes the user might have been making in the previous states will be lost.</p>
  
  <p>Another solution will be to have the template of popup in the <code>authenticated</code> states template and show/hide it. But the problem with this is that, the popup should be a bookmark-able  state, which loads data from server based on state params.</p>
  
  <p>Is there a better approach to create a state that acts like a popup over current state? maybe by changing the template structure or using something like <a href="https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states" rel="noreferrer">abstract-states</a> that I haven't thought of? </p>