AngularJS -为什么要有多个控制器?

AngularJS - Why have more than one controller

本文关键字:控制器 为什么 AngularJS      更新时间:2023-09-26

为什么在AngularJS应用程序中有多个控制器?我现在已经构建了一些angular应用程序,我从来没有遇到过我认为多个控制器会让事情变得更容易的问题。

我还是个菜鸟,从来没有写过单元测试,我的代码也不是很好管理,所以我肯定这只是无知。我听说其他人有多个控制器。

换句话说:人们怎么知道他们应该创建一个新的控制器?

在我看来,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的回答中看到这一点。你不一定需要为每条路由使用一个控制器,但这样做有助于从逻辑上构建应用程序。

所以,为了回答你的问题,你通常应该为每一类数据设置一个控制器。用户、物品、水果、蔬菜、交易等。

如果你还没有读过,请阅读Angular控制器和模型-视图-控制器模式以获取更多信息。

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

。当你开始使用路由(也称为深度链接)时,你有一个模板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'});
}]);

我喜欢把控制器看作"小部件"。在我的后台的一个页面,他们可以打开ViewUsers控制器(小部件),可以打开更多的UserDetail控制器。

我猜,如果你习惯了OOP,想要保持它们的作用域分离和封装是很自然的。