javascript - 大きな画面には複数のビュー、小さな画面には単一のビュー

Question

ここでデザインインターフェースを見たことがありますが、気に入りました。

私は AngularJS と、1 つのページに複数のビューを表示できるui-routerを使用してそれを行っていました。

タブレット/デスクトップのように2つではなく、1つのビューのみを表示したいため、スマートフォンに問題があります。

質問 : 小さな画面では 1 つのビューのみを表示し、大きな画面では 2 つのビューを表示するにはどうすればよいでしょうか?

私は基本的なアイデアを持っていました:

アイデア 1 (あまり良くない) : 複数のルートを作成し、画面サイズに応じていずれかのルートにルーティングすることを考えていました。

角度設定の内側

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" }
      }
    })
    ...;

ランダムコントローラーの内部

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

問題: このアイデアは、維持するにはあまりにも「汚い」ように思えます。

アイデア2 :プライマリビューとセカンダリビューを宣言することを考えていたので、CSSでセカンダリビューをCSSで非表示にすることができました:

角度設定の内側

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" }
      }
    })
    ...;

内部html

 <div ui-view="main"></div>
 <div ui-view="secondary"></div> <!-- For small screens, hide this view with CSS -->

問題: 異なる URL が同じビューを持つことができますが、優先順位が逆になっています。以下を参照してください。

したがって、小さな画面では機能する可能性がありますが、大きな画面では、一部の URL でビューが反転する可能性があるため (上の画像を参照)、HTML ではlist.html、detail.htmlテンプレートも反転されます。

<div ui-view="primary"></div>いくつかのビューで反転できれば問題を解決でき<div ui-view="secondary"></div>ます...