AngularJS中的模型视图ViewModel

我现在正在读书 第一章提出,

控制器负责提供视图绑定的状态 指挥 视图可以发回控制器以执行工作单元。这释放了 视图不必维护状态（因为它只需要显示 控制器处于中），它将视图从必须执行的任何工作中解放出来（视图总是这样） 服从于控制器）

他所说的为视图提供绑定状态是什么意思

此外，他建议说，接下来

使用ViewModel可以反转传统上使用的应用程序流 存在于jQuerystyle中 应用。在jQuery中，您应该查询DOM并附加一个事件侦听器。 当触发该事件时，您将尝试解释该事件并解析DOM 用于状态，以便可以执行一些命令式操作。这将强制紧耦合 在HTML和驱动它的JavaScript之间。通过引入ViewModel， 你可以打破这种关系。控制员不再负责 用于侦听视图，但视图负责发出特定命令 连接到其操作的控制器

最后一行使我困惑

控制器不再负责收听视图， 但是视图负责向其操作的控制器发出特定命令

不是说儿子不再有责任听父亲的话，而是说父亲有责任向儿子发出具体的命令，儿子必须执行这些命令

即使儿子不负责任，儿子也要负责任。但它们（两个）不是都一样吗

---

他到底想说什么？

想想这些例子。以下是jQuerystyle应用程序：

jQuery（'element'）。在（'click'，clickHandler'）；

控制器从视图中获取一个元素并绑定到它

这里是一个角度的例子，关系是颠倒的。现在控制器公开了一个处理程序，视图绑定到它

功能控制器（）{
this.clickHandler=function（）{}；
}

---

希望这有帮助

以下是我对它的理解

在angular中，视图是您的HTML，控制器是您的角度控制器（这一点并不奇怪，视图模型是

$scope

对象，您可以从控制器或视图访问该对象（这有点像将控制器链接到视图的胶水）

为要绑定的视图提供状态意味着视图只知道如何显示数据（即，它知道数据的结构），但在任何情况下，它都不保存实际数据。此数据/状态由通过“放置”将其绑定到视图的控制器保存

$scope

对象上的数据，从而允许视图访问并显示数据

控制器不再负责侦听视图，而是 相反，视图负责向 它所操作的控制器

这是一种“告诉-不要问”的设计模式。如果发生了任何变化，视图将告诉控制器，而不是让控制器询问视图

e、 g:假设我们有一个带有submit按钮的表单，而不是让控制器询问视图是否有人单击了jQuery中的submit按钮：

$('submitButton').on('click', doSomething);

视图将发出控制器将执行的特定命令（方法）。因此，视图告诉控制器有人提交了表单：

控制器：

angular.module('myApp')
  .controller('myController', ['$scope', function ($scope) {
    $scope.submit = function () {
      //process form here
    }
  }]);

视图：

提交表单

---

如您所见，我们将

submit（）

方法“附加”到

$scope

对象上，以便我们可以从视图中调用

submit

。

scope是Angular的一个组成部分，它实际上是ViewModel的另一个术语是“粘合剂”（ViewModel）在控制器和视图之间

它在Angular中的工作方式是您有一个视图，这就是我们一直在使用指令、过滤器和数据绑定所做的。 但是我们不想把我们所有的逻辑都放到视图中，因为它不是非常可维护或可测试的，或者所有这些类型的东西

相反，我们将有一个特殊的小JavaScript对象——一个称为控制器的容器。控制器将驱动一切。它将最终控制哪些数据绑定到视图中。如果视图向上传递数据到控制器，它将处理传递到服务的问题，然后更新后端数据存储

视图和控制器之间的粘合称为范围，在Angular中，您将看到许多以$开头的对象或变量。$范围表示范围对象

当我说它是胶水时，它实际上是把控制器和视图联系起来的东西

视图不必知道控制器，控制器肯定不想知道视图。

您将看到，视图可以了解控制器，因为如果您想使用它，有一个指令，但是控制器本身，为了使其可测试，一些东西-松散耦合、模块化以及所有这些好东西-不应该了解视图的任何内容。事实上，您应该能够定义一个您需要的控制器可以绑定到不同的视图。可能您有移动视图、桌面视图或其他视图。 所以范围是g

<button ng-click="submit()">Submit Form</button>