AngularJS中的模型视图ViewModel

Question

我正在阅读Manning's AngularJS in Action by Lukas Ruebbelke 在第一章中，他提出了，

  

控制器负责为视图提供绑定状态   和命令       视图可以发回给控制器来完成工作单元。这释放了       从必须维持状态的视图（因为它只需要显示任何状态       控制器在）并且它使视图从必须做任何工作（作为视图始终       顺从控制器。）

为视图提供绑定 的状态是什么意思？

此外，他建议，

  

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

最后一行让我感到困惑。

控制器 不再负责收听 视图 ， 而 视图 负责 向 控制器发出特定命令 > 它可以继续运作。

不是说儿子不再负责听他的父亲，而是父亲负责 向发出特定命令 > 儿子 它（儿子）必须操作。

即使儿子不负责任，儿子实际上也要负起责任。但他们（两个）以上的陈述都不相同。

他到底想说什么？

Answer 1

以下是我的理解。

在角度方面，视图是您的HTML，控制器是您的角度控制器（这一点并不令人意外）， ViewModel 是您可以从 控制器或视图访问的$scope对象（它有点像将控制器链接到视图的粘合剂）。

为视图提供绑定状态意味着视图只知道如何显示数据（即它知道数据是如何构造的）但无论如何，它都不能保持实际数据。此数据/状态由控制器保存，控制器通过将数据“放置”到$scope对象上来将绑定到视图中，从而让视图访问数据并显示它。

  

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

这是告诉不要问设计模式。而不是让控制器询问视图是否有任何变化，视图将告诉控制器是否发生了这样的事情。

例如：想象一下，我们有一个带有提交按钮的表单。如果有人点击jQuery中的提交按钮，而不是让控制器询问视图：

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

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

控制器：

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

查看：

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

如您所见，我们会将submit()方法“附加”到$scope对象上，以便我们可以从视图中调用submit。

Answer 2

考虑这些例子。这是jQuerystyle应用程序：

jQuery('element').on('click', clickHandler);

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

这是一个Angular示例，其中关系被反转。现在，Controller公开了一个处理程序，并且视图绑定到它。

function Controller() {
    this.clickHandler = function(){};
}

<button type="button" click="vm.clickHandler()">

希望这有帮助！

Answer 3

范围是Angular的一个组成部分，它实际上是 ViewModel 的另一个术语。 $ scope 是＆＃34;胶水＆＃34; （ViewModel）控制器和视图之间。

它在Angular中的工作方式是你有一个View，这是我们一直在使用我们的指令，过滤器和数据绑定。 但我们不希望将所有逻辑都放入View中，因为它不是很易于维护或可测试，也不是所有类型的东西。

相反，我们将有一个特殊的小JavaScript对象 - 一个容器 - 称为Controller。控制器会驱动东西。它将最终控制哪些数据绑定到View中。如果View将数据传递给控制器​​，它将处理可能传递给服务的服务，然后服务更新后端数据存储。

View和Controller之间的粘合剂称为Scope，在Angular中你会看到许多以$开头的对象或变量。 $ scope表示范围对象。

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

See this image to understand $scope (View Model).

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

你会看到视图可以知道控制器，因为有一个指令，如果你想使用它而不是控制器本身，使其可测试和一些东西 - 松散耦合和模块化和所有这些好东西 - 不应该对视图有所了解。实际上，您应该能够定义一个可以绑定到不同视图的控制器。也许你有一个移动视图，你有一个桌面视图或任何它可能。 所以范围就是它们之间的粘合剂。