angular到底是MVC模式还是MVVM模式

zhengwei1949 commented 7 years ago

MVC and MVVM with AngularJS Design Pattern is nothing but a maintainable and reusable way of writing code which can be applied to commonly occurring problems. There are numerous design patterns such as MVC, MVVM, DI etc. It depends upon the problem that which design pattern needs to be followed. 设计模式是对项目开发过程中经常会遇到的问题的可维护、可复用的解决方案，有很多种设计模式像MVC、MVVM、DI等，使用哪种设计模式取决于你要解决什么问题。

This blog emphasizes on MVC and MVVM design patterns with reference to AngularJS. 这篇文章主要探讨的是angular和MVC、MVVM的关系。 Let's get started: 让我们开始吧 MVC Design Pattern MVC设计模式 To start with, MVC design pattern is not specific to AngularJS, you must have seen/implemented this pattern in many other programming languages. MVC并不是针对angular.js提出的，你如果想搞明白什么是MVC，必须要通过其他的编程语言进行学习。 MVC design pattern can be seen in AngularJS, but before getting into that let's see what all does MVC design pattern includes: 我们可以在angular当中看到MVC的影子，不过，在这之前，我们先来了解一下什么是MVC： Model: Model is nothing but data. View: View represents this data. Controller: Controller mediates between the two. 让我们看一段代码：

<!DOCTYPE html>
<html ng-app>
<head>
    <title>MVC</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="TextController">
<p>{{sampleText}}</p>
</body>
<script>
    var myApp = angular.module('myApp',[]);
    myApp.controller('TextController',function($scope){
        $scope.sampleText = 'This is a demo!';
    })
</script>
</html>

In the above snippet, our text is represented by "sampleText" variable. This is our model. Controller is updating the view by displaying the data on the view by replacing "{{sampleText}}" with sampleText variable value. It is the controller that is managing the relationship between our model and the view which is the HTML.

在上面的代码中，sampleText是我们的数据模型，控制器通过替换{{sampleText}}中的值来更新视图，控制器的职责是用来沟通数据模型和视图。

In MVC if we make any change in the the view it doesn't gets updated in model. But in AngularJS, we have heard that there is something called 2-way binding and this 2-way binding enables MVVM design pattern. MVVM basically includes 3 things:

在标准的MVC当中，如果我们更改了视图，并不会实时的更新数据模型，但是在angular.js当中，我们听过一个东西叫双向数据绑定，从这个角度出发，我们也可以说angular属于MVVM，MVVM主要由下列三个部分组成：

1、Model 2、View 3、View Model

Controller is actually replaced by View Model in MMVM design pattern. View Model is nothing but a JavaScript function which is again like a controller and is responsible for maintaining relationship between view and model, but the difference here is, if we update anything in view, it gets updated in model, change anything in model, it shows up in view, which is what we call 2-way binding.

在MVVM设计模式当中，控制器替代了控制器的角色。和控制器一样，View Model也是用来联结视图和控制器，但不同的地方在于，如果我们更新了视图，数据模型也会发生变化，如果数据模型发生了变化，视图也会发生变化，我们称之为双向数据绑定。

让我们看一段代码：

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Number Divisor</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<form ng-app="myApp" ng-controller="DivisionController">
    <label>Number :</label> <input name="number" ng-change="divisionNeeded()" ng-model="data.number">
    <label>Number entered by User :</label> {{data.number}} <br>
    <label>Divisor :</label> <input name="divisor" ng-change="divisionNeeded()" ng-model="data.divisor">
    <label>Number entered by User :</label> {{data.divisor}} <br>
    <label>Result :</label> {{data.result}}
</form>
</body>
<script>
    var myApp = angular.module('myApp',[]);
    myApp.controller('DivisionController',function($scope){
        $scope.data = {number: 0, divisor: 0, result: 0};
        $scope.divisionNeeded = function () {
            $scope.data.result = $scope.data.number / $scope.data.divisor;
        }
    });
</script>
</html>

The above code contains 2 input boxes which takes number and a divisor to divide that number. The result of the division is shown in front of the label 'Result'.

Also, whatever is input in those two input boxes is displayed in front of the input box itself. This code shows the MVVM design pattern in JavaScript very clearly, here you see how:

The above diagram segregates the code into Model, View and View Model.

I am first starting with view. We know that view is our HTML,so we update it by entering '6' in the number text box and '3' in the divisor text box. As soon as any change is made in the view, View Model gets to know about it, and these values are then updated into the Model. Apart from this, the main work is that is happening in View Model is the division, number is getting divided by the divisor and is the result is being assigned to 'data.result' variable. Here, since 'data.result' is our model, and as there is change here from it's initial value of '0' to '2' now, view gets updated and the result of the division is shown on the HTML.

This is why we say AngularJS follows MVVM design pattern.

zhengwei1949 commented 7 years ago

For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings and api improvements, it's now closer to MVVM – the $scope object could be considered the ViewModel that is being decorated by a function that we call a Controller. 这段话的意思是，angular在早期被认为是mvc模式，但随着api的修改和不停的重构，现在已经基本上可以认为是mvvm模式了

来源：https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV

zhengwei1949 commented 7 years ago

https://stackoverflow.com/questions/20286917/angularjs-understanding-design-pattern

zhengwei1949 commented 7 years ago

https://github.com/kuitos/kuitos.github.io/issues/35

zhengwei1949 / myblog

angular到底是MVC模式还是MVVM模式 #81