3

I am currently evaluating AngularJS as a potential MVC framework. I am wondering on what the "correct" way to implement the following scenario is -

Say I am designing an User detail page. It is broken down into different tabs like basic information tab(name, email...), user interests tab(drop downs like sports, music..), etc.

So the code looks like this:

                    <!-- 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>

and interests.html looks like

    <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>

So the question is, asides from the UserController, should I create a separate controller for the "basicInfo" and "interests" tabs? The reason why I may want to create InterestsController is because I don't necessary think 

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

should live in the UserController since only Interest.html cares about the different selections of interests. Also UserController may get real fat real quick since the page will have many other tabs.

But at the same time, in Angular's documentation - *"In Angular, a model is any data that is reachable as a property of an angular Scope object"*, I feel like if I do then have an InterestsController, etc, its model is rather arbitrary since it is just containing the information needed for that tab only.

So what's the best practice? I hope I explain myself clearly. Thank you.

4

1 回答 1

5

这是设计 Angular 应用程序的一种方法：

  1. 想想你的模型（例如，用户）。为这些模型创建服务。
  2. 想想你想如何查看你的模型——你的视图（例如，用户主（标签）、用户基本、用户兴趣）。为这些视图创建 HTML 模板。
  3. 最后，将控制器附加到每个视图（使用 ng-view 和路由，或 ng-controller 用于其他所有方式，例如使用 ng-switch 和 ng-include 执行的操作）。让控制器仅查找/获取视图完成其工作所需的任何模型数据。
    “使控制器尽可能薄”——这在DoubleClick 演讲中的某处说过。

对于您的特定示例，我认为 basicInfo 和兴趣选项卡应该有自己的控制器，因为它们是两个不同的视图。请注意，每个页面上都可以有多个视图——全部可见，或者只有一些。“视图”的大小取决于您。

关于 $scope、模型和服务存在混淆。Misko 在这段 YouTube 视频中说：“ Scope 不是您的模型。Scope 是您将模型附加到的东西。 ”
在与 Brandon Tilley 的评论交流中，他对将您的模型投入服务有这样的看法：“服务特别有利于模型对象，因为它们可以被注入，因此很容易在测试中模拟。”

于 2013-02-07T21:38:00.350 回答