AngularJS - MVC 架构

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，探索 AngularJS 及其 MVC 架构的世界。如果你之前从未编写过一行代码，也不用担心——我会成为你的友好向导，我们会一步一步地学习。在本教程结束时，你将掌握 AngularJS 魔法般的工作原理。那么，让我们开始吧！

MVC 是什么？

在我们深入研究 AngularJS 之前，让我们先来谈谈 MVC。不，它不是一款新潮的汽车模型——它代表的是模型-视图-控制器（Model-View-Controller）。你可以把它想象成一种组织代码的配方，就像你可能会整理你的衣橱（如果你比我更整洁的话！）。

MVC 是一种设计模式，将应用程序分为三个主要部分：

1. 模型（Model）：数据和业务逻辑
2. 视图（View）：用户界面
3. 控制器（Controller）：连接模型和视图的中介

现在，让我们在 AngularJS 的背景下探索这些组件。

模型（Model）

在 AngularJS 中，模型是存放数据的地方。它就像一个数字文件柜，用于存放应用程序需要处理的所有信息。在 AngularJS 中，我们通常使用叫做 $scope 的东西来表示我们的模型。

让我们来看一个简单的例子：

angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.name = "John Doe";
$scope.age = 30;
});

在这段代码中，我们创建了一个包含两项数据的模型：name 和 age。$scope 对象是我们的模型，它保存了我们的数据。

但为什么要使用 $scope 呢？嗯，它就像一座连接我们的 JavaScript 代码和 HTML 的魔法桥梁。我们在 $scope 中放入的任何数据都可以轻松地在视图中显示（我们接下来会讨论）。

视图（View）

在 AngularJS 中，视图是用户看到和与之交互的部分。它是我们应用程序的漂亮面孔，由 HTML 构建并撒上了些 AngularJS 的魔法粉末（也称为指令）。

让我们看看如何在一个视图中显示我们的模型数据：

<div ng-app="myApp" ng-controller="MyController">
<h1>Hello, {{name}}!</h1>
<p>You are {{age}} years old.</p>
</div>

在这段 HTML 中发生了什么：

• ng-app="myApp" 告诉 AngularJS 我们的应用程序从哪里开始。
• ng-controller="MyController" 将视图的这部分连接到我们的控制器（我们稍后会详细讨论）。
• {{name}} 和 {{age}} 是显示模型数据的表达式。

当 AngularJS 处理这个视图时，它会将 {{name}} 替换为 "John Doe"，将 {{age}} 替换为 30，基于我们的模型数据。

控制器（Controller）

控制器就像一个乐队的指挥。它协调模型和视图，告诉它们什么时候做什么。在 AngularJS 中，我们使用 JavaScript 创建控制器。

让我们扩展之前的例子：

angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.name = "John Doe";
$scope.age = 30;

$scope.celebrateBirthday = function() {
$scope.age++;
alert("Happy Birthday, " + $scope.name + "! You are now " + $scope.age + " years old.");
};
});

在这个控制器中：

1. 我们设置了我们的初始模型数据（name 和 age）。
2. 我们定义了一个函数 celebrateBirthday，它增加年龄并显示一个警告。

现在，让我们更新我们的视图来使用这个新函数：

<div ng-app="myApp" ng-controller="MyController">
<h1>Hello, {{name}}!</h1>
<p>You are {{age}} years old.</p>
<button ng-click="celebrateBirthday()">Celebrate Birthday</button>
</div>

ng-click 指令告诉 AngularJS 当按钮被点击时调用我们的 celebrateBirthday 函数。

将它们组合在一起

现在我们已经看到了 MVC 的每个部分在实际应用中的效果，让我们看看它们是如何协同工作的：

1. 模型 ($scope) 持有我们的数据（name 和 age）。
2. 视图（我们的 HTML）显示这些数据并提供了一种用户与之交互的方式（按钮）。
3. 控制器管理逻辑，当按钮被点击时更新模型。
4. 当模型发生变化时，AngularJS 会自动更新视图，因此新的年龄会立即显示。

这种通过 MVC 架构的更新流是 AngularJS 如此强大和响应迅速的原因。

结论

就这样，朋友们！我们进行了一次 AngularJS MVC 架构的旋风之旅。记住，就像学习任何新技能一样，掌握 AngularJS 需要练习。如果它一开始没有立即见效，不要气馁——即使是专家程序员也曾是初学者。

继续尝试代码示例，尝试修改它们，看看会发生什么。在你意识到之前，你将能够构建复杂的 AngularJS 应用程序，并用你新学的编码技能给你的朋友们留下深刻印象！

快乐编码，愿 Angular 之力与你同在！

组件	描述	示例
模型 (Model)	持有应用程序数据	$scope.name = "John Doe";
视图 (View)	将数据展示给用户	<h1>Hello, {{name}}!</h1>
控制器 (Controller)	管理逻辑并更新模型	$scope.celebrateBirthday = function() { $scope.age++; };
指令 (Directive)	扩展 HTML 的自定义属性和元素	ng-click, ng-controller
表达式 (Expression)	在视图中访问模型数据	{{name}}, {{age}}
模块 (Module)	应用程序不同部分的容器	angular.module('myApp', [])
作用域 (Scope)	模型数据存储的上下文	$scope

Credits: Image by storyset