繁體中文

AngularJS 教學

AngularJS 應用

AngularJS - 概覽

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 的世界。如果你是編程新手，不必擔心——我將成為你的友好導遊，我們會一步步來。到了這個教學的結尾，你將對 AngularJS 有堅實的了解。那麼，讓我們開始吧！

AngularJS - Overview

常見功能

AngularJS 就像是一把網頁開發的瑞士軍刀。它是一個強大的 JavaScript 框架，能夠讓我們輕鬆地建立動態網頁應用程序。想像你正在蓋房子——AngularJS 提供了你所需的所有工具和設計圖，來創造一個美麗、功能性的結構。

以下是一些讓 AngularJS 卓越的功能：

  1. 模型-視圖-控制器（MVC）架構：這就像是有個組織良好的工具箱。它幫助你將應用的數據（模型）、用戶界面（視圖）和商業邏輯（控制器）分開。

  2. 雙向數據綁定：這就像是一面魔法的鏡子。當你在一面改變某些東西時，另一面會自動更新！

  3. 依賴注入：這就像是有個個人助理，在你需要時為你準備好一切。

  4. 指令：這些是特殊的指示，告訴 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="MyController">
<h1>你好，{{name}}！</h1>
<input type="text" ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = '世界';
});
</script>
</body>
</html>

在這個例子中，我們使用了 MVC 構架（ng-app、ng-controller）、雙向數據綁定（ng-model）和一個簡單的指令（ng-controller）。當你在輸入框中打字時，你會看到問候語實時更新。神奇吧？

核心功能

既然我們已經稍微試水了，讓我們更深入地了解 AngularJS 的核心功能：

  1. 作用域（Scope）：這就像是將你的應用粘合在一起的膠水。這是你的模型數據所在的地方。

  2. 控制器（Controller）：這可以看作是你的應用的腦袋。這是你定義行為的地方。

  3. 表達式（Expressions）：這些就像是你可以直接嵌入到 HTML 中的小段代碼。

  4. 過濾器（Filters）：這些是你的數據轉換器。它們可以按照你想要的方式格式化你的數據。

讓我們看看這些是如何運作的：

<!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="MyController">
<h1>你好，{{name | uppercase}}！</h1>
<p>你最喜欢的水果是：{{fruit}}</p>
<button ng-click="changeFruit()">改變水果</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.name = '世界';
$scope.fruit = '蘋果';
$scope.changeFruit = function() {
$scope.fruit = '香蕉';
};
});
</script>
</body>
</html>

在這個例子中，我們使用了一個作用域（$scope）、一個控制器（MyController）、一個表達式（{{name}}）和一個過濾器（| uppercase）。按鈕展示了我們如何在作用域中改變數據。

概念

讓我們分解一些 AngularJS 的關鍵概念：

  1. 模組（Modules）：這些就像是不同應用部分的容器。它們幫助你保持代碼的組織。

  2. 服務（Services）：這些是可以在你的應用中重用的代碼片段。

  3. 指令（Directives）：我們之前提到過這些，但它們太重要了，所以值得再提一次。它們扩展 HTML 的新屬性和元素。

  4. 模板（Templates）：這些是你的帶有特殊 AngularJS 語法的 HTML 文件。

以下是一個展示這些概念的例子：

<!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="MyController">
<h1>{{greeting}}</h1>
<button ng-click="sayHello()">說你好</button>
</div>

<script>
var app = angular.module('myApp', []);

app.service('GreetingService', function() {
this.getGreeting = function() {
return "你好，AngularJS！";
};
});

app.controller('MyController', function($scope, GreetingService) {
$scope.sayHello = function() {
$scope.greeting = GreetingService.getGreeting();
};
});
</script>
</body>
</html>

這個例子展示了個模組（myApp）、一個服務（GreetingService）、一個使用依賴注入的控制器，和一個帶有 AngularJS 語法的模板。

AngularJS 的優勢

AngularJS 伴隨著許多益處：

  1. 容易學習：它的直觀結構對初學者很友好。
  2. 可重用組件：寫一次，多次使用！
  3. 簡化測試：AngularJS 是為了測試而設計的。
  4. 社群支持：一個大而活躍的社群意味著隨時都有幫助。

AngularJS 的缺點

但就像任何工具一樣，它也有它的挑戰：

  1. 性能問題：複雜的應用程序有時會運行緩慢。
  2. 學習曲線：雖然開始容易，但精通 AngularJS 需要時間。
  3. 版本問題：不同版本之間的重大變化可能會有挑戰。

AngularJS 指令

指令是 AngularJS 的秘密配方。它們讓你可以創建可重用的組件和扩展 HTML 的能力。以下是一些常見指令的表格：

指令 描述
ng-app 初始化一個 AngularJS 應用程序
ng-controller 為應用程序指定一個控制器
ng-model 將輸入綁定到一個屬性
ng-repeat 為集合中的每個項目重複一個元素
ng-click 指定點擊行為
ng-show 顯示或隱藏一個元素
ng-hide 隱藏或顯示一個元素
ng-if 在 DOM 中移除或創建一個元素
ng-class 动態绑定一个或多个 CSS 类
ng-style 允许动态样式

讓我們看看一些指令是如何運作的：

<!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>
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
</head>
<body>
<div ng-controller="MyController">
<h1 ng-class="{red: isRed, bold: isBold}">你好，AngularJS！</h1>
<button ng-click="toggleRed()">切換紅色</button>
<button ng-click="toggleBold()">切換粗體</button>

<h2>我的水果：</h2>
<ul>
<li ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>

<input type="text" ng-model="newFruit">
<button ng-click="addFruit()">添加水果</button>

<p ng-show="fruits.length > 3">你有很多水果！</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.isRed = false;
$scope.isBold = false;
$scope.fruits = ['蘋果', '香蕉', '橙子'];

$scope.toggleRed = function() {
$scope.isRed = !$scope.isRed;
};

$scope.toggleBold = function() {
$scope.isBold = !$scope.isBold;
};

$scope.addFruit = function() {
if($scope.newFruit) {
$scope.fruits.push($scope.newFruit);
$scope.newFruit = '';
}
};
});
</script>
</body>
</html>

這個例子展示了多個指令：ng-class、ng-click、ng-repeat、ng-model 和 ng-show。它演示了這些指令如何用幾行代碼創建出動態、交互式的網頁應用程序。

就是这样！我們對 AngularJS 進行了一次旋風式的巡禮，從它的常見功能到核心概念和指令。記住，最好的學習方式是實踐，所以不要害怕嘗試這些例子並創造你自己的。祝未來的 AngularJS 大師們編程愉快！

Credits: Image by storyset

上一教程:
AngularJS - 首頁
下一教程:
AngularJS - 環境設定