AngularJS - 为什么有多个控制器

Question

AngularJS应用程序中有多个控制器的原因是什么？我现在已经构建了一些角度应用程序,我从来没有遇到过一个问题,我认为多个控制器会让我更容易.

我还是一个n00b,从来没有写过单元测试,我的代码也不像它那样可管理,所以我确定这只是无知.而且我听说其他人有多个控制器.

换句话说:如何知道他们应该创建一个新的控制器？

Answer 1

从我所看到的,Angular应用程序应该有单独的控制器用于不同的范围.例如,几乎所有应用程序都有用户数据.您希望将此数据附加到用户控制器内的用户模型:

function UserCtrl ($scope) {
    $scope.user = {
        name: "bmorrow",
        lastLogin: "4/16/2013"
    };
}

模板(我们的视图)将位于应用程序结构的特定部分内.例如,导航栏的右侧,或用户详细信息页面上的右侧.我们通过使用指定控制器来确定该部分的位置ng-controller.这将创建scope所述控制器并将相应的模型绑定到它.模型(我们的数据)通过控制器连接到视图(HTML).

假设应用程序有一个用户书面文章的页面.我们可以创建另一个仅限于专门保存文章内容的HTML部分的控制器.

function ArticleCtrl ($scope) {
    $scope.article = {
        title: "Hello World",
        body: "Lorem ipsum...."
    };
}

在上面的简单示例中,组合两个控制器不会造成任何伤害.但是,一旦您的应用程序开始增长,根据它所代表的数据逻辑地组织您的控制器/视图将使您的代码更清晰,更容易理解.减少不必要的复杂性将使您的一切变得更加轻松.并且使用一个控制器来实现一切都是不必要的复杂性.

您也可以在Basarat的答案中看到这一点.您不一定需要为每个路由使用一个控制器,但这样做有助于逻辑地构建应用程序.

因此,要回答您的问题,您通常应该为每个类别的数据配备一个控制器.用户,文章,水果,蔬菜,交易等.

如果您还没有,请阅读有关角度控制器和模型 - 视图 - 控制器模式的更多信息.我希望这有帮助.

Answer 2

当您开始将应用程序拆分为多个视图时,您肯定开始需要更多控制器.

例如,当您开始使用路线(也称为深度链接)时,您有一个模板URL以及一个控制器来使用该模板(请查看http://docs.angularjs.org/tutorial/step_07),例如

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});
}]);