3

私は現在、AngularJSを潜在的なMVCフレームワークとして評価しています。次のシナリオを実装するための「正しい」方法は何か疑問に思っています-

ユーザー詳細ページをデザインしているとしましょう。基本情報タブ（名前、メール...）、ユーザーの興味タブ（スポーツ、音楽などのドロップダウン）などのさまざまなタブに分かれています。

したがって、コードは次のようになります。

                    <!-- main.html-->
                    <div ng-controller="UserController">
            <div ng-switch on="renderPath">
                <div ng-switch-when="basicInfo">
                     <div ng-include src="basicUrl"></div>
                </div>
                <div ng-switch-when="interests">
                     <div ng-include src="interestUrl"></div>
                </div>
            </div>
        </div>

そしてinterests.htmlは次のようになります

    <div>
        <div class="dropdown">
            <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
            I like to play:
             </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li ng-repeat="sport in sports">{{sport}}</li>
            </ul>
            <a class="dropdown-toggle" id="A1" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
            I like to listen to:
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li ng-repeat="genre in genres">{{genre}}</li>
            </ul>
        </div>
    </div>

したがって、問題は、UserControllerの他に、「 basicInfo 」タブと「interests」タブに別々のコントローラーを作成する必要があるかどうかです。InterestsControllerを作成したい理由は、考える必要がないからです。

$scope.sports= ['baseball', 'bastketball'];
$scope.genres= ['pop', 'classical'];

Interest.htmlのみが関心のさまざまな選択を考慮しているため、 UserControllerに存在する必要があります。また、ページには他の多くのタブがあるため、 UserControllerは非常にすばやく取得する可能性があります。

しかし同時に、Angularのドキュメントでは-* " Angularでは、モデルはAngularScopeオブジェクトのプロパティとして到達可能な任意のデータです"*、InterestsControllerなどがある場合、そのモデルはそのタブに必要な情報のみが含まれているため、かなり恣意的です。

では、ベストプラクティスは何ですか？はっきりと説明したいと思います。ありがとうございました。

4

1 に答える 1

5

Angularアプリを設計するための1つのアプローチは次のとおりです。

  1. モデルについて考えてください（例：ユーザー）。それらのモデルのサービスを作成します。
  2. モデルをどのように表示するかを考えてください-ビュー（たとえば、ユーザーメイン（タブ付き）、ユーザー基本、ユーザーインタレスト）。それらのビューのHTMLテンプレートを作成します。
  3. 最後に、コントローラーを各ビューに接続します（ng-viewとルーティングを使用するか、ng-switchやng-includeで行っていることなど、他のすべての方法でng-controllerを使用します）。ビューがその仕事をするために必要なモデルデータのみをコントローラーに検索/取得させます。
    「コントローラをできるだけ薄くする」-これはDoubleClickの講演のどこかで述べられています。

あなたの特定の例では、basicInfoタブとinterestsタブは、2つの異なるビューであるため、独自のコントローラーを持つ必要があると思います。各ページには複数のビューを含めることができることに注意してください。すべてが表示されるか、一部のみが表示されます。「ビュー」がどれだけ大きいか小さいかはあなた次第です。

$ scope、モデル、およびサービスについて混乱があります。ミスコはこのYouTube動画で、「スコープはモデルではありません。スコープはモデルをアタッチするものです」と述べています
。 ブランドンティリーとのコメント交換で、モデルをサービスに組み込むことについて次のように述べています。オブジェクトをモデル化するのは、それらを注入できるため、テストで簡単にモックアップできるからです。」

于 2013-02-07T21:38:00.350 に答える