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