AngularJS - 國際化

你好，有志於網頁開發的各位！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 的國際化世界。作為你們親切鄰居的計算機科學老師，我在這裡指導你們這個引人入勝的課題。所以，拿起你們最喜歡的飲料，放鬆一下，我們來一起深入探討！

AngularJS - Internationalization

國際化是什麼？

在我們開始編程之前，讓我們先了解一下國際化的含義。想像一下，你創建了一個出色的網站，但它只有英文版本。如果你希望不同國家的人使用它，那該怎麼辦呢？這就是國際化的作用！它就像給你的網站一張旅行護照。

國際化（通常縮寫為 i18n - 在 'i' 和 'n' 之間有18個字母）是一個設計應用程序的过程，使其能夠在不進行工程變更的情況下，適應各種語言和地區。

國際化為什麼重要？

這樣想：如果你擁有一家冰淇淋店，你會只提供一種口味嗎？當然不會！你會想要滿足不同的口味。同樣的道理也適用於網站。通過國際化你的 AngularJS 應用程序，你讓它對全球用戶更加易於訪問和使用。這就像在每種口味中都提供數字化冰淇淋！

現在，讓我們挽起袖子，看看 AngularJS 如何讓國際化變得輕鬆。

設置 AngularJS 國際化

首先，我們需要設置我們的 AngularJS 應用程序以處理國際化。我們將使用 angular-translate 库，這就像一根為我們翻譯應用程序的魔法棒。

以下是如何設置：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
<div ng-controller="TranslateController">
<!-- 我們的應用程序內容將放在這裡 -->
</div>
<script src="app.js"></script>
</body>
</html>

在我們的 app.js 文件中，我們將設置我們的 AngularJS 模塊並配置翻譯提供者：

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
// 配置將放在這裡
}]);

app.controller('TranslateController', function($scope, $translate) {
// 控制器邏輯將放在這裡
});

使用丹麥語境的範例

現在，讓我們創建一個簡單的範例，我們將把應用程序翻譯成丹麥語。你會問為什麼選擇丹麥語？為什麼不呢！此外，我以前有個學生對丹麥餅乾非常著迷，這個例子是給你，Lars！

讓我們更新我們的 app.js：

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
});

這裡發生了什麼：

我們為英文（'en'）和丹麥語（'da'）定義了翻譯。
我們將英文設為默認語言。
我們在控制器中創建了一個 changeLanguage 函數來切換語言。

現在，讓我們更新我們的 HTML：

<div ng-controller="TranslateController">
<h2>{{ 'TITLE' | translate }}</h2>
<p>{{ 'FOO' | translate }}</p>
<button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
<button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

輸出

當你運行這段代碼時，你會看到：

一個標題，寫著 "Hello"
一個段落，寫著 "This is a paragraph."
兩個按鈕，分別標記為 "English" 和 "Danish"

點擊 "Danish" 按鈕，瞧！你的應用程序現在說丹麥語：

標題改為 "Hej"
段落寫著 "Dette er et afsnit."
按鈕現在標記為 "Engelsk" 和 "Dansk"

這就像魔法，不是嗎？但記住，這不是魔法 - 這是 AngularJS 和你編碼技能的力量！

使用瀏覽器語境的範例

現在，讓我們把事情提升一個層次。如果我們希望應用程序自動使用用戶的瀏覽器語言，該怎麼辦？這就像一個網站在你甚至還沒有要求之前就能說你的語言！

讓我們修改我們的 app.js：

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DA: 'Danish'
});
$translateProvider.translations('da', {
TITLE: 'Hej',
FOO: 'Dette er et afsnit.',
BUTTON_LANG_EN: 'Engelsk',
BUTTON_LANG_DA: 'Dansk'
});
$translateProvider.useLocalStorage();
$translateProvider.fallbackLanguage('en');
$translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
'en*': 'en',
'da*': 'da'
});
$translateProvider.determinePreferredLanguage();
}]);

這裡有什麼新東西？

我們使用本地存儲來記住用戶的語言偏好。
我們將英文設為备用語言。
我們註冊了可用的語言鍵。
我們使用 determinePreferredLanguage() 來自動檢測瀏覽器的語言。

輸出

現在，當用戶訪問你的網站時：

如果他們的瀏覽器語言設為丹麥語，他們會看到丹麥版本。
如果設為其他語言，他們會看到英文版本（我們的备用語言）。
選擇的語言將在他們下次訪問時被記住。

這就像你的網站是一個變色龍，適應每個用戶的環境！

結論

這就是，各位！我們已經將我們的 AngularJS 應用程序變成了一個多語言的奇觀。記住，國際化不僅僅是關於翻譯 - 它還關於為全球用戶創造一個熱情接待的體驗。

在你繼續你的編程旅程時，永遠把用戶放在心上。無論他們是在哥本哈根還是加利福尼亞，你的應用程序現在都能用他們理解的語言向他們問候。

持續練習，保持好奇心，誰知道呢？也許有一天你會創造一個比 C-3PO 還會說更多語言的應用程序！直到下次見，快樂編程！

方法	描述
`$translateProvider.translations(langKey, translationTable)`	為特定語言添加新的翻譯表
`$translateProvider.preferredLanguage(langKey)`	設置默認語言
`$translateProvider.useLocalStorage()`	使用本地存儲來記住語言偏好
`$translateProvider.fallbackLanguage(langKey)`	設置备用語言
`$translateProvider.registerAvailableLanguageKeys(keys, aliases)`	註冊可用的語言和它們的別名
`$translateProvider.determinePreferredLanguage()`	自動檢測瀏覽器的偏好語言
`$translate.use(langKey)`	更改當前語言

Credits: Image by storyset