角度控制器 - 为什么将它命名为控制器?

时间:2014-12-11 13:24:55

标签: javascript angularjs model-view-controller

来自here

  

一般情况下,控制器不应该尝试做太多。这应该   仅包含单个视图所需的业务逻辑。

我无法理解为什么它是控制器。它必须是模型。请解释。

编辑:
这是官方开发人员指导的例子:

angular.module('invoice1', [])
.controller('InvoiceController', function() {
  this.qty = 1;
  this.cost = 2;
  this.inCurr = 'EUR';
  this.currencies = ['USD', 'EUR', 'CNY'];
});

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="invoice.cost" required >
    <select ng-model="invoice.inCurr">
      <option ng-repeat="c in invoice.currencies">{{c}}</option>
    </select>
  </div>

我不明白的是控制器=模型。我不对吗?

3 个答案:

答案 0 :(得分:4)

请理解控制器只执行业务逻辑。

MVC-model views and controllers.

model:only the data

view:View is display of model that is your data.  only the visible part(html)

controller: which handles and manipulates the data.

模型是数据 ,而非业务逻辑, 控制器处理 。另请阅读this

答案 1 :(得分:3)

模型通常包含与该数据直接连接的数据和方法。控制器将该数据与视图(以及Angular的服务等)连接起来。 Angular的控制器究竟做了什么。当人们为模型或控制器提供大量逻辑时,这是常见的做法。在Angular方式中,有许多其他东西包含逻辑。模型仅包含数据,控制器仅用于将所有部件连接在一起。仔细查看ng-model指令:它实际上绑定到只查看变量!

[后来添加,添加到问题后的示例] 呵呵!这是一个棘手的例子。在它控制器实际上看起来像一个模型。在这个例子中看起来更好

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}
  ];

  $scope.orderProp = 'age';
});

此处控制器是控制器,phonesorderProp是模型,$scope是范围。 =) 看这张图片: enter image description here 您可以看到模型位于控制器范围内。

MVC实际上只是模式。您可以以不同的神秘方式自由使用它,没有关于错误模式使用的编译器错误。但使用它的唯一原因 - 使事情变得更加直截了当。所以不那么棘手的方法会更好!

答案 2 :(得分:3)

Angular并不严格遵循MVC。 它更接近MVVM:Model-View-ViewModel(或Model-View-Whatever,但并不是它非常有用)。

简而言之:

  • Angular Controller和Scope进入ViewModel层:
  

ViewModel可以被视为一个专门的控制器,充当数据转换器。 (From here)。

它的职责是仅表示View所需的数据并将它们粘贴到View。此处的数据通常是从实际的模型层复制或引用的。

  • Model层(在MVVM中)对View一无所知。这就是Angular Services的用武之地,以及您希望放置大部分业务逻辑的地方,以保持Angular Controller(即ViewModel层)的精简。

在各种教程中经常出现的典型违反此模式的方法是将服务器请求放入Controller。想象一下,你想改变你的后端 - 现在你正在重写你的控制器!每一个与你的后端交谈的人!相反,您的控制器不应该知道有关服务器的任何信息。该信息将进入您的模型(Angular Services)。然后,对后端进行任何更改,您只需要重写专门处理它的服务。更清洁,更易于维护。