Multiple views for large screens, single view for small screens
<p>I have seen a design interface <a href="http://www.uplabs.com/posts/facebook-messenger-redesign" rel="nofollow noreferrer">here</a>, and I liked it.</p>

<p><a href="https://i.stack.imgur.com/Madgn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Madgn.png" alt="enter image description here"></a></p>

<p>I was doing it with AngularJS, and <a href="https://github.com/angular-ui/ui-router" rel="nofollow noreferrer">ui-router</a> which allows to have multiple views on a single page. </p>

<p>I have an issue for smartphone, because I want to display only one view, not two like tablets/desktops.</p>

<p><strong>Question :</strong>
What would be the best way to display only one view for small screens, and two for larger screens ?</p>

<p>I had basic ideas :</p>

<p><strong>Idea 1 (not so so good)</strong> : I was thinking to create multiple routes, then route to one or the other route depending the screen size.</p>

<p><em>Inside angular config</em></p>

<pre><code>app.config(function($stateProvider) {
  $stateProvider
    .state('listForLargeScreens', {
      url: "/listForLargeScreens",
      views: {
        "primary": { templateUrl: "list.html" },
        "secondary": { templateUrl: "detail.html" }
      }
    })
    .state('listForSmallScreens', {
      url: "/listForSmallScreens",
      views: {
        "primary": { templateUrl: "list.html" }
      }
    })
    ...;
</code></pre>

<p><em>Inside a random controller</em></p>

<pre><code>app.controller('RandomCtrl', function ($scope, $state) {
   $scope.changePage = function () {
       if (isLargeScreen) {
           $state.go('indexForLargeScreens');
       } else {
           $state.go('indexForSmallScreens');
       }
   }
});
</code></pre>

<p><strong>Problem</strong> : this idea seems to me too "dirty" for maintaining.</p>

<p><strong>Idea 2</strong> : I was thinking to declare primary and secondary views, then I could hide with CSS the secondary one with CSS :</p>

<p><em>Inside angular config</em></p>

<pre><code>app.config(function($stateProvider) {
  $stateProvider
    .state('list', {
      url: "/",
      views: {
        "primary": { templateUrl: "list.html" },
        "secondary": { templateUrl: "detail.html" }
      }
    })
    .state('detail', {
      url: "/detail/:id",
      views: {
        "secondary": { templateUrl: "list.html" },
        "primary": { templateUrl: "detail.html" }
      }
    })
    ...;
</code></pre>

<p><em>Inside html</em></p>

<pre><code> &lt;div ui-view="main"&gt;&lt;/div&gt;
 &lt;div ui-view="secondary"&gt;&lt;/div&gt; &lt;!-- For small screens, hide this view with CSS --&gt;
</code></pre>

<p><strong>Problem</strong> : different URLS can have the same views, but with inverted priorities, see :</p>

<p><a href="https://i.stack.imgur.com/SBbOZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SBbOZ.png" alt="enter image description here"></a></p>

<p>So, on small screens, it could work, but on larger screens, in some URLs, views can be inverted, (see the image above), so in HTML, <code>list.html</code> and <code>detail.html</code> templates will be inverted too. </p>

<p>It could solve the problem if I could invert <code>&lt;div ui-view="primary"&gt;&lt;/div&gt;</code> and <code>&lt;div ui-view="secondary"&gt;&lt;/div&gt;</code> on some views...</p>