Javascript AngularJS控制器设计

我目前正在评估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>

应该位于用户控制器中，因为只有Interest.html关心不同的兴趣选择。另外，UserController可能会很快变得很胖，因为页面将有许多其他选项卡

但同时，在Angular的文档中-*“在Angular中，模型是作为Angular Scope对象的属性可访问的任何数据”*，我觉得如果我真的有一个兴趣控制器，其模型是相当任意的，因为它只包含该选项卡所需的信息

那么最佳实践是什么？我希望我能解释清楚。

---

谢谢。

这里有一种设计角度应用程序的方法：

想想你的模型（例如，用户）。为这些模型创建服务

考虑一下您希望如何查看模型——您的视图（例如，用户主视图（选项卡式）、用户基本视图、用户兴趣）。为这些视图创建HTML模板

最后，将控制器连接到每个视图（使用ng view and routing，或使用ng controller进行其他操作，例如使用ng switch和ng include所做的操作）。让控制器仅查找/获取视图执行其工作所需的任何模型数据。
“使控制器尽可能薄”--这是在

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

关于$scope、model和services存在混淆。Misko在YouTube视频中说“
在与Brandon Tilley的评论交流中，他谈到了将模型放入服务中的问题：“服务对于模型对象特别有用，因为它们可以被注入，因此在测试中很容易被模仿。”

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

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