AngularJS - 轉譯應用程序

你好，未來的編程超新星！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 的世界，並學習如何創建一個轉譯應用程序。別擔心如果你從未寫過一行代碼——我將成為你的友好導遊，我們會一步步來。到了這個教學的結尾，你將會有一個很酷的小應用程序，能夠在不同語言之間進行文本轉譯。這簡直太棒了！

AngularJS - Translate Application

什麼是 AngularJS？

在我們深入我們的轉譯應用程序之前，讓我們花一會兒時間來了解 AngularJS 是什麼。想像你正在蓋一個房子。AngularJS 就像是一個幫助你有效組織和結構你的房子的框架。它是一個強大的 JavaScript 框架，使得創建動態網頁應用程序變得更加容易。

建立我們的專案

步驟 1：引入 AngularJS

首先，我們需要在專案中引入 AngularJS。我們會通過在 HTML 文件中添加一個 script 標籤來做到這一點：

<!DOCTYPE html>
<html>
<head>
<title>我的超級翻譯器</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- 我們將在此添加應用程序內容 -->
</body>
</html>

這行代碼就像是我們邀請 AngularJS 來參加我們的派對。它告訴我們的瀏覽器加載 AngularJS 库，這樣我們就可以使用它的超能力了。

步驟 2：創建我們的應用程序模塊

現在，讓我們創建我們的 AngularJS 應用程序。我們會在 body 標籤的結尾添加一個 script 標籤：

<body ng-app="translatorApp">
<!-- 應用程序內容在這裡 -->
<script>
var app = angular.module('translatorApp', []);
</script>
</body>

在這裡，我們告訴 AngularJS，“嘿，我們想要創建一個叫做 'translatorApp' 的應用程序。” body 標籤中的 ng-app 屬性就像是在我們的應用程序上貼上名牌，讓 AngularJS 知道我們的應用程序在哪裡。

建立我們的轉譯器

步驟 3：創建一個控制器

在 AngularJS 中，控制器就像是我們操作的腦袋。它們管理我們應用的數據和行為。讓我們創建一個：

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

app.controller('TranslatorController', function($scope) {
$scope.inputText = '';
$scope.outputText = '';

$scope.translate = function() {
// 我們將在此添加我們的轉譯邏輯
$scope.outputText = "轉譯中...";
};
});
</script>

這個控制器設置了兩個變量（inputText 和 outputText）和一個 translate 函數。把這些想像成是我們的輸入、輸出和神奇轉譯過程的容器。

步驟 4：創建用戶界面

現在，讓我們為我們的轉譯器創建一個簡單的界面：

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>我的超級翻譯器</h1>
<textarea ng-model="inputText" placeholder="輸入要翻譯的文本"></textarea>
<button ng-click="translate()">翻譯</button>
<p>{{ outputText }}</p>
</div>

<!-- Script 標籤在這裡 -->
</body>

讓我們分解一下：

我們使用 ng-controller 來將我們的 HTML 連接到我們的控制器。
ng-model="inputText" 將文本區域綁定到我們的 inputText 變量。
ng-click="translate()" 告訴 AngularJS 在按鈕被點擊時執行我們的 translate 函數。
{{ outputText }} 顯示 outputText 的值。

添加轉譯功能

步驟 5：整合一個轉譯 API

要讓我們的翻譯器真正運作，我們需要使用一個翻譯服務。在這個例子中，我們將使用免費的 MyMemory Translation API。我們需要發出一個 HTTP 請求，所以我們來將 $http 服務添加到我們的控制器：

app.controller('TranslatorController', function($scope, $http) {
$scope.inputText = '';
$scope.outputText = '';
$scope.fromLang = 'en';
$scope.toLang = 'es';

$scope.translate = function() {
var url = "https://api.mymemory.translated.net/get?q=" + $scope.inputText + "&langpair=" + $scope.fromLang + "|" + $scope.toLang;

$http.get(url).then(function(response) {
$scope.outputText = response.data.responseData.translatedText;
}, function(error) {
$scope.outputText = "哎呀！出了點問題。";
});
};
});

這個更新的控制器現在包括了語言選擇，並在調用翻譯函數時向翻譯 API 發出請求。

步驟 6：更新用戶界面

讓我們更新我們的 HTML 以包含語言選擇：

<body ng-app="translatorApp">
<div ng-controller="TranslatorController">
<h1>我的超級翻譯器</h1>
<select ng-model="fromLang">
<option value="en">英語</option>
<option value="es">西班牙語</option>
<option value="fr">法語</option>
</select>
<select ng-model="toLang">
<option value="en">英語</option>
<option value="es">西班牙語</option>
<option value="fr">法語</option>
</select>
<textarea ng-model="inputText" placeholder="輸入要翻譯的文本"></textarea>
<button ng-click="translate()">翻譯</button>
<p>{{ outputText }}</p>
</div>

<!-- Script 標籤在這裡 -->
</body>

結論

恭喜你！你剛剛使用 AngularJS 建立了一個簡單但功能完備的翻譯應用程序。以下是我們學到的快速回顧：

我們設置了一個 AngularJS 應用程序
我們創建了一個控制器來管理我們應用的行為
我們使用 AngularJS 指令建立了用戶界面
我們整合了一個翻譯 API 來提供真正的功能

記住，學習編程是一段旅程。如果有些部分起初看起來令人困惑——不要擔心，隨著練習，它們會逐漸變得清晰。持續實驗，持續學習，在你意識到之前，你將會建立更加複雜和令人興奮的應用程序！

這裡是一個總結我們使用的主要 AngularJS 概念的表格：

概念	描述	示例
模塊	應用程序的容器	`angular.module('translatorApp', [])`
控制器	管理應用程序行為	`app.controller('TranslatorController', function($scope) {...})`
作用域	連接控制器到視圖	`$scope.inputText = ''`
指令	擴展 HTML	`ng-app`，`ng-controller`，`ng-model`，`ng-click`
表達式	顯示值	`{{ outputText }}`

開心地編程，並祝你翻譯冒險中沒有 bug，並充滿學習！

Credits: Image by storyset