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