AngularJS真的基于MVC架构吗？
AngularJS是Google开发的基于JavaScript的框架。
它于2010年底首次发布，但直到2011年初才首次发布其稳定版本。
它通过实施Model-View-Controller(通常称为MVC架构)而被誉为创建动态Web应用程序的强大框架。
Google还负责维护和不断更新该框架。
在第二次更新中，AngularJS被完全弃用，并以Angular的名称重新开始。
从那时起，Angular便每两年更新一次，而今天，Angular的最新版本是Angular8.
唯一的区别是Angular现在基于TypeScript(它是JavaScript的超集)，但仍保持MVC架构。
所以这只是Angular的简短介绍，现在让我们看看MVC架构背后的所有爵士乐。
什么是MVC架构？
正如我们现在必须已经知道的那样，MVC代表模型-视图-控制器。
基本思想是拥有三个独立的实体，并且永远不要将它们混淆。
在MVC架构概念出现之前，开发人员一直在努力将其逻辑集成到他们的视图中，这些逻辑也必须以某种方式进行建模。
事情通常会变得极度混乱，这是不希望的，特别是在处理跨越数千行代码的大型项目时。
它使诸如调试和维护之类的活动变得非常困难。
使用MVC架构时，实体是分开的，因此将所有内容联系在一起的业务逻辑始终是分开编写的。
因此，我们也可以说MVC更像是一种软件模式，而不是体系结构。
现在我们对MVC是什么有了一个简短的了解，让我们看一下它的三个主要组成部分。
MVC的组件
模型它负责管理应用程序数据。它响应来自视图的请求以及来自控制器的指令以进行自我更新。
查看它负责向用户显示所有数据或者仅部分数据。它还以特定格式指定数据，该格式由控制器决定呈现数据触发。它们是基于脚本的模板系统，例如JSP，ASP，PHP，并且非常易于与AJAX技术集成。
控制器负责控制模型和视图之间的关系。它响应用户输入并在数据模型对象上执行交互。控制器接收输入，对其进行验证，然后执行修改数据模型状态的业务操作
Angular的MVC实现
好吧，截至我撰写本教程 的时间已到2019年末，并且很长一段时间以来，AngularJS都已被弃用。
AngularJS肯定遵循了MVC架构，但是今天对于Angular却不能说同样的话。
让我们看一些示例代码片段，以解释我的意思。
<!DOCTYPE html>
<html ng-demo>
<head>
<title>Example mvc</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="DisplayText">
<p>{{demoText}}</p>
</body>
<script>
function DisplayText($scope) {
$scope.demoText= 'This is a demo!';
}
</script>
</html>
在上面的代码片段中，我们的文本由变量demoText表示。
这是我们的模型。
控制器通过将{{demoText}}替换为变量demoText中包含的值，通过在视图上显示数据来更新视图。
正是控制器正在管理我们的模型与HTML视图之间的关系。
MVC的一个缺点是，如果我们在视图中进行任何更改，则模型中不会更新它。
通过转换为MVVM体系结构，Angular2解决了该问题。
MVVM架构
MVVM基本上包括三件事：
模型
视图
视图模型
该控制器实际上已被MMVM设计模式中的View Model取代。
视图模型不过是一个JavaScript函数，它又像一个控制器，负责维护视图和模型之间的关系，但是这里的区别是，如果我们更新视图中的任何内容，它将在模型中进行更新，而在模型中进行任何更改，显示在视图中，这就是我们所说的2向绑定。
<!DOCTYPE html>
<html ng-app>
<head>
<title>Number Adition</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<form ng-controller="AdditionController">
<label>Number :</label> <input name="number" ng-change="additionNeeded()" ng-model="data.number1">
<label>Number entered by User :</label> {{data.number1}} <br>
<label>Divisor :</label> <input name="divisor" ng-change="additionNeeded()" ng-model="data.number2">
<label>Number entered by User :</label> {{data.number2}} <br>
<label>Result :</label> {{data.result}}
</form>
</body>
<script>
function DivisionController($scope) {
$scope.data = {number1: 0, number2: 0, result: 0};
$scope.additionNeeded = function () {
$scope.data.result = $scope.data.number1 + $scope.data.number2;
}
}
</script>
</html>
上面的代码片段将在两个数字之间执行加法运算，将其作为用户输入，然后将其显示在名为result的框中。
现在，让我们将其分解为组件模型，视图和视图模型。
VIEW是我们HTML，以这种函数分离的方式，视图和视图模型可以相互通信。
因此，只要视图中有更改，视图模型就可以了解它。
然后，视图模型将更新模型。
这是最新版本的angular的工作方式。
