AngularJS真的基于MVC架构吗？【WEB前端大作战】
Web开发的世界永远都在变化和变化。无论是在框架方面还是在事情执行方面，经过一定时间后，一切都不会真正保持不变。在这样的发展过程中，有两种东西在开发人员中广受欢迎：Angular和MVC体系结构。在此博客中，我们将讨论Angular和MVC架构，以及前者如何用于实现后者。此博客涵盖以下主题：
在继续进行博客工作之前，我想通知您，如果您希望成为熟练的角度开发人员，则一定要阅读我们的Angular课程，该课程将在在线实时课堂中教授给您。由认证的行业专家提供。
什么是Angular / AngularJS？
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基本上包括三件事：
- Model
- View
- View Model
该控制器实际上已被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的工作方式。
- 点赞
- 收藏
- 关注作者
评论（0）