AngularJS - 控制器：初学者指南

你好，有抱负的网页开发者们！今天，我们将深入AngularJS控制器的精彩世界。如果你是编程新手，不用担心——我会作为你的友好向导，一步一步地解释所有内容。所以，拿起一杯咖啡，让我们开始吧！

AngularJS - Controllers

AngularJS控制器是什么？

在我们跳入代码之前，让我们先了解AngularJS中的控制器是什么。把控制器想象成你应用程序的大脑。它们负责管理你的网页数据和行为。就像交通控制器管理车辆流一样，AngularJS控制器管理你应用程序中的数据流。

控制器的角色

AngularJS中的控制器有几个重要的用途：

它们初始化$scope对象的数据。
它们为$scope对象添加行为。
它们充当视图（用户看到的内容）和模型（数据）之间的桥梁。

现在，让我们看看如何在AngularJS中创建和使用控制器。

你的第一个AngularJS控制器

让我们从一个简单的例子开始，来试试水深。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一个AngularJS控制器</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyFirstController">
<h2>{{ greeting }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyFirstController', function($scope) {
$scope.greeting = "Hello, AngularJS!";
});
</script>
</body>
</html>

让我们分解一下：

我们使用ng-app="myApp"定义了一个AngularJS应用程序。
我们创建了一个名为MyFirstController的控制器，使用ng-controller。
在我们的JavaScript中，我们定义了控制器并在$scope上设置了一个greeting属性。
在我们的HTML中，我们使用{{ greeting }}来显示greeting的值。

当你运行这段代码时，你会在页面上看到"Hello, AngularJS!"。激动人心吧？

向控制器添加行为

控制器不仅仅是用来显示数据；它们还可以为你的应用程序添加行为。让我们创建一个更具交互性的例子：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>交互式AngularJS控制器</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="CounterController">
<h2>计数：{{ count }}</h2>
<button ng-click="increment()">增加</button>
<button ng-click="decrement()">减少</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('CounterController', function($scope) {
$scope.count = 0;

$scope.increment = function() {
$scope.count++;
};

$scope.decrement = function() {
$scope.count--;
};
});
</script>
</body>
</html>

在这个例子中：

我们创建了一个CounterController，它初始化了一个count变量为0。
我们定义了两个函数：increment()和decrement()。
我们使用ng-click将这两个函数绑定到按钮点击事件。

现在，当你点击"增加"按钮时，计数会上升，当你点击"减少"时，计数会下降。就像在你的网页上有一个小计算器！

处理表单

控制器在处理表单时特别有用。让我们创建一个简单的表单，向用户问好：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS表单控制器</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<form ng-submit="greet()">
<input type="text" ng-model="name" placeholder="输入你的名字">
<button type="submit">问候我！</button>
</form>
<h2>{{ greeting }}</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('GreetingController', function($scope) {
$scope.name = '';
$scope.greeting = '';

$scope.greet = function() {
if ($scope.name) {
$scope.greeting = 'Hello, ' + $scope.name + '!';
} else {
$scope.greeting = '请输入一个名字。';
}
};
});
</script>
</body>
</html>

这里发生了什么：

我们使用ng-model="name"将输入字段绑定到控制器中的name属性。
当表单提交时，greet()函数被调用。
如果输入了名字，我们创建一个个性化的问候。否则，我们请求一个名字。

这个例子展示了控制器如何处理用户输入并相应地更新视图。

控制器方法

让我们总结一下我们在控制器中使用的主要方法：

方法	描述
`$scope.variableName`	用于定义在视图中可以访问的变量
`$scope.functionName = function() {...}`	用于定义可以从视图中调用的函数
`ng-click="functionName()"`	在HTML中用于在元素被点击时调用函数
`ng-model="variableName"`	用于将输入字段绑定到控制器中的变量
`ng-submit="functionName()"`	用于在表单提交时调用函数

结论

恭喜你！你已经迈出了进入AngularJS控制器世界的第一步。我们涵盖了创建控制器、添加行为和处理表单的基础知识。记住，熟能生巧，所以不要害怕尝试这些概念。

在我多年的教学经验中，我发现最好的学习方式就是实践。所以，这里给你一个有趣的挑战：尝试使用你学到的关于控制器的知识创建一个简单的待办事项列表应用程序。从添加项目开始，然后尝试实现标记项目为完成或删除它们等功能。

在你继续你的AngularJS之旅时，你会发现控制器只是冰山一角。还有更多东西等着你去探索，从服务到指令等等。但现在，给自己一个鼓励——你已经走上了成为AngularJS专家的道路！

快乐编码，并记住：在编程世界中，每个错误都是学习新知识的机会！

Credits: Image by storyset