AngularJS - 嵌入式應用程序

前言

你好，未來的AngularJS大師！我很興奮能成為你進入AngularJS嵌入式應用程序世界的導遊。作為一個教導編程多年的老師（我們就說我記得當軟盤真的可以彎曲的時候吧），我可以向你保證，在這個教學結束時，你將能夠自信地創建你的第一個AngularJS嵌入式應用程序。

AngularJS - In-line Application

嵌入式應用程序是什麼？

在我們深入代碼之前，讓我們了解一下我們所說的“嵌入式應用程序”是什麼。想像你在一個自助餐（跟著我，我保證這個比喻會有意義）。嵌入式應用程序就像把所有你喜歡的菜餚放在一個盤子上一樣——你所需要的東西都在那裡，隨時可以使用。在AngularJS術語中，這意味著我們將在单个HTML文件中编写我们的整个应用程序。不需要分離的JavaScript文件，不需要外部模塊——只有純粹的、未經污染的AngularJS精華。

創建你的第一個嵌入式應用程序

第一步：HTML骨架

讓我們從我們HTML文件的基礎開始：

<!DOCTYPE html>
<html>
<head>
<title>我的第一個AngularJS嵌入式應用程序</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

</body>
</html>

如果你有過任何網頁開發經驗，這可能看起來很熟悉。如果不是，別擔心！我們只是在設置基本的HTML文件並從內容分發網絡（CDN）中引入AngularJS庫。把它當成我們邀請AngularJS參加我們的編碼派對。

第二步：添加ng-app指令

現在，讓我們告訴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>

</body>
</html>

我們在<html>標籤中添加了ng-app="myApp"。這就像在你的房子上掛一個大標誌，上面寫著：“AngularJS這裡住！”myApp部分是我們給我們應用程序的名字。

創建你的第一個控制器

什麼是控制器？

在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 ng-controller="MainController">
<h1>{{greeting}}</h1>

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

讓我們分解一下：

我們在<body>標籤中添加了ng-controller="MainController"。這告訴AngularJS這部分的HTML由這個控制器管理。
在<script>標籤內，我們創建了我們的應用程序模塊，使用angular.module('myApp', [])。
然後我們定義了我們的控制器，使用app.controller()。$scope參數是我們在控制器和視圖（我們的HTML）之間傳遞數據的方式。
我們在$scope上設置了一個greeting屬性。這使得它在我们的HTML中可用。
在HTML中，我們使用{{greeting}}來顯示greeting的值。

添加用戶交互

讓我們通過添加一個更改問候的按鈕來使應用程序更具交互性：

<!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 ng-controller="MainController">
<h1>{{greeting}}</h1>
<button ng-click="changeGreeting()">更改問候</button>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "Hello, AngularJS World!";
$scope.changeGreeting = function() {
$scope.greeting = "問候，地球人！";
};
});
</script>
</body>
</html>

這裡新增了什麼：

我們添加了一個帶有ng-click指令的按鈕。這告訴AngularJS當按鈕被點擊時調用changeGreeting()函數。
在我們的控制器中，我們在$scope上定義了changeGreeting()函數。這個函數會更改greeting的值。

資料綁定實踐

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 ng-controller="MainController">
<h1>{{greeting}}</h1>
<input type="text" ng-model="name">
<p>Hello, {{name}}!</p>

<script>
var app = angular.module('myApp', []);
app.controller('MainController', function($scope) {
$scope.greeting = "歡迎來到我們的AngularJS應用程序！";
$scope.name = "匿名";
});
</script>
</body>
</html>

在這個例子中：

我們添加了一個ng-model="name"的輸入字段。這將輸入的值綁定到我們$scope上的name屬性。
我們在段落中使用{{name}}來顯示name的值。
當你在輸入字段中打字時，你會看到問候語實時更新。這就是双向数据绑定的魔力！

結論

恭喜你！你剛剛創建了你的第一個AngularJS嵌入式應用程序。我們已經介紹了設置AngularJS應用的基礎、創建控制器、處理用戶交互和實現双向数据绑定。記住，像學習任何新技能一樣，精通AngularJS需要練習。所以不要害怕嘗試，犯錯誤，並從你的錯誤中學習。這是我們所有人成為今天開發者的方式！

這裡是一個總結我們使用過的關鍵AngularJS指令的表格：

指令	目的
ng-app	定義並啟動一個AngularJS應用程序
ng-controller	指定應用程序某部分的控制器
ng-click	指定當元素被點擊時調用的函數
ng-model	將輸入、選擇或文本區域綁定到作用域上的屬性

繼續編程，繼續學習，最重要的是，玩得開心！記住，每個專家都曾經是個初學者。你的AngularJS旅程才剛剛開始！

Credits: Image by storyset