3

AngularJS でアダプティブ (レスポンシブではありません) レイアウトを処理するための推奨される方法は何ですか? 私がする必要があるのは、デスクトップとモバイル用に異なる共有コンポーネント (共有ディレクティブとコントローラー) を持つ別のレイアウトを持つことです。私は ui-router の使用を考えていましたが、これが私が今持っているものです:

index.html (メイン ファイル):

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
    <script data-require="ui-router@0.2.15" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body data-ng-app="plunker" data-ng-strict-di>
    <header>
    <nav>
      <ul>
        <li><a data-ui-sref="mobile.user">Mobile</a></li>
        <li><a data-ui-sref="desktop.user">Desktop</a></li>
      </ul>
    </nav>
    </header>
    <main data-ui-view>
    </main>
  </body>

</html>

desktop.html (デスクトップ コンテンツのラッパー):

<h1>Desktop</h1>
<div data-ui-view>
</div>

mobile.html (モバイル コンテンツのラッパー):

<h1>Mobile</h1>
<div data-ui-view>
</div>

user.html (共有コンテンツ):

<div data-ng-controller="UserCtrl">
User name: {{name}}
</div>

app.js

var app = angular.module('plunker', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('mobile', {
      abstract: true,
      url: '/mobile',
      templateUrl: 'mobile.html'
    })
    .state('mobile.user', {
      url: '/user',
      templateUrl: 'user.html'
    })   
    .state('desktop', {
      abstract: true,
      url: '/desktop',
      templateUrl: 'desktop.html'
    })
    .state('desktop.user', {
      url: '/user',
      templateUrl: 'user.html'
    })
}]);

app.controller('UserCtrl', ['$scope', function($scope) {
  $scope.name = 'John';
}]);

プレビューと編集:

http://plnkr.co/edit/gRnTJkMa7hTLnffOERMT?p=preview

  1. これは、アダプティブ レイアウトを行うための推奨される方法ですか?

  2. どうすれば（このアプローチで）：

    1. モバイル/デスクトップの選択に基づいて index.html にクラスを追加します
    2. mobile.css または desktop.css を動的に読み込む

よろしくお願いします、

4

2 に答える 2

2

私は最近同じ問題に遭遇したので、いくつかの答えを探してここにたどり着きました。私の調査結果によると、2 つの異なるオプションがあるようです。

  1. アプローチを使用する

事実

  • ヘッダーとフッター、およびその他の body タグがまだ共有されているため、2 つの部分的に異なるレイアウト。それ以外の場合は、html に data-ui-view を適用する必要があります
  • これは、ui-router を使用する場合にのみ実現できます。これは、angular デフォルト ルーターでは機能しません。
  • 共有構成ファイルがあるため、デスクトップとモバイルの両方からすべてのルートと構成を読み込みます。これは、ユーザーがモバイル版のみにアクセスしている場合でも、どうにかしてすべての js ファイルをロードする必要があることを意味します。それ以外の場合は、モバイル バージョン用の新しい構成ファイルを作成し、それをモバイル レイアウト用に使用するか、検出されたデバイスに基づいて一部のルートを動的に除外する必要があります。
  • シングル ページ アプリケーション内で、リロードせずにモバイルからデスクトップに切り替えることができます。これが利点かどうかはわかりません。

良い部分:

サーバー ロジックを適用することはなく、サーバーから提供されるメインの index.html ファイルを分離することもありません。これは、ロジック全体がクライアント側にあることを意味します。

悪い部分:

デバイス間を明確に分離し、可能であれば未使用の js ファイルをロードしないようにする必要があるため、ロジックが複雑になります。これを行っている場合、基本的に別の SPA を行っていることになります。これは、SPA 内でデスクトップ バージョンを使用できないためです。

  1. 同じアプリを共有しますが、ドメインに基づくサーバーから別の html ファイルを提供できます。例: yoursite.com は最終的にデスクトップ バージョンをロードする index.html を提供し、m.yourside.com は最終的にモバイル バージョンをロードする mobile.html を提供します。

事実:

  • これはよりハードな分離に似ており、分離を行うサーバー ロジックを意味します。
  • モバイルとデスクトップから切り替えると、リロードが発生します。
  • 現在、デスクトップ バージョンを参照する app.js から同じ構成またはその他の変更を使用することはできないため、デスクトップに使用されているライブラリを参照しないようにいくつかのファイルを変更する必要がある場合があります。
  • このアプローチは、同じ名前の同じプロジェクト (フォルダー構造/アプリケーション フォルダー) 内の新しい angularJs アプリのように見えますが、多くの共有コンポーネントとサービスがありますが、依存関係が少なく、よりクリーンです。

私には、これはロジックの分離のように思えます。モバイル バージョンでこれらすべての js ファイルをサーバーする必要がないことを考慮すると、おそらくデスクトップ バージョンのすべての機能をモバイル バージョンで使用することはないでしょう。ここでプレゼンテーションレベルで見られる唯一の違いは、おそらく異なるルーティング、構成ファイル、コントローラー、およびビューです。まだ同じモデルで、サービスと大きなコンポーネントを共有しています。

決定を下すには、両方の状況について、それぞれの良い面と悪い面を考える必要があります。現時点では、どちらの決定を下すかはまだわかりません。おそらく 1 日か 2 日調査します。

良い一日と幸運。

アンドレイ

于 2015-10-14T16:14:50.780 に答える