AngularJS - 首個應用程式

歡迎，有志者程式設計師！今天，我們將踏上一段令人興奮的旅程，進入AngularJS的世界。作為你們親切友善的鄰居電腦老師，我非常興奮能夠引導你們完成第一個AngularJS應用程式。別擔心如果你之前從未寫過一行代碼——我們會一步步來，在你還沒有察覺之前，你將會像專業人士一樣創建動態網頁應用程式！

AngularJS - First Application

創建 AngularJS 應用程式

讓我們從基礎開始。AngularJS 是一個強大的JavaScript框架，它幫助我們建立互動式網頁應用程式。把它想像成一個神奇的工具箱，讓我們的網頁變得栩栩如生！

為了創建我們的第一個AngularJS應用程式，我們需要設定一個簡單的HTML文件。這是它的樣子：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>我的第一個 AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>Hello, {{name}}!</h2>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS 初學者';
});
</script>
</body>
</html>

讓我們來分解這個：

我們從標準的HTML結構開始。
在 <html> 標籤中的 ng-app="myApp" 告訴AngularJS 這是我們應用的根元素。
我們在 <head> 部分使用 <script> 標籤引入AngularJS庫。
在 <body> 中，我們有一個帶有 ng-controller="myCtrl" 的 <div>。這將我們的HTML連接到一個AngularJS控制器。
在這個 <div> 內部，我們有 {{name}}。這是一個AngularJS表達式，將顯示 name 的值。
最後，我們有一個 <script> 標籤，我們在其中定義我們的AngularJS模塊和控制器。

執行 AngularJS 應用程式

現在，我們已經創建了應用程式，讓我們看看如何運行它：

將上面的代碼保存到名為 index.html 的文件中。
在網頁瀏覽器（如Chrome或Firefox）中打開這個文件。

就這樣！你的AngularJS應用程式現在正在運行。這有比你想象的簡單吧？

輸出

當你在瀏覽器中打開 index.html 文件時，你應該看到：

Hello, AngularJS 初學者!

神奇吧？但這是怎麼工作的呢？讓我們深入了解一下！

AngularJS 如何與 HTML 集成

AngularJS通過我們所謂的“指令”與HTML無縫集成。這些是特殊的屬性，告訴AngularJS對DOM元素進行某些操作。讓我們看看我們使用的主要指令：

指令	目的
ng-app	定義AngularJS應用的根元素
ng-controller	指定為HTML元素使用哪個控制器
{{ }}	顯示表達式的值

這裡有更詳細的解釋：

ng-app：這個指令初始化一個AngularJS應用程式。它告訴AngularJS它應該控制這部分的頁面。在我們的例子中，我們把它放在 <html> 標籤上，使我們的整個頁面成為AngularJS應用程式。
ng-controller：這個指令指定一個JavaScript控制器類。控制器是我們定義應用行為的地方，通過定義函數和值。在我們的例子中，myCtrl 是我們的控制器。
{{ }}：這對雙括號是AngularJS表達式。它們告訴AngularJS計算內部的表達式並將其結果替換。在我們的案例中，{{name}} 被替換為 "AngularJS 初學者"。

現在我們來看我們的JavaScript代碼：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'AngularJS 初學者';
});

angular.module('myApp', []) 創建一個名為 'myApp' 的新AngularJS模塊。這與我們在 ng-app="myApp" 中使用的名字相匹配。
app.controller('myCtrl', function($scope) { ... }) 定義我們的控制器。$scope 是一個特殊對象，作為控制器和視圖（我們的HTML）之間的橋樑。
$scope.name = 'AngularJS 初學者' 在 $scope 上設置一個屬性。這是我們能在HTML中使用 {{name}} 的原因。

這就是全部！你剛剛創建並理解了你的第一個AngularJS應用程式。這不是很令人興奮嗎？

記住，學習編程就像學習一種新語言。起初可能會感到困惑，但隨著練習，它會變成第二天性。當我第一次教AngularJS時，我有一個學生對所有的括號感到非常困惑，以至於他開始稱之為“八字胡語言”！但到了課程結束時，他正在創建複雜的應用程式，並對自己最初的困惑發笑。

所以，如果一切不會立即清晰，請不要擔心。持續練習，嘗試修改代碼（如果你把 'AngularJS 初學者' 改成你的名字會怎麼樣？），最重要的是，玩得開心！在我們的下一次課程中，我們將探索更多AngularJS功能並開始建立更複雜的應用程式。在那之前，快樂編程！

Credits: Image by storyset