在现代 web 应用中，国际化(i18n)成为越来越重要的一个特性。国际化可以让你的应用在全球范围内都能被不同文化、语言的用户使用。作为一名前端工程师，我们需要了解如何在 AngularJS SPA 应用中实现国际化，这样我们的应用就能更贴近用户的需求。
AngularJS 国际化简介
AngularJS 的 i18n 功能可以使你在应用中轻松地使用多种语言。你可以将应用中的所有文本和标签转化为需要的语言。AngularJS 还提供了一种简化应用多语言实现的方式，使用 $translate 服务可以很容易地切换应用语言。
国际化的标准
为了让国际化实现达到最佳效果，我们需要使用一种标准来确定消息的格式和内容。一个流行的国际化标准是 <language-code>_<country-code>.<file-format>。每个标准中的元素意义如下：
language-code: 语言代码，按照 ISO-639-1 标准制定。country-code: 国家/地区代码，按照 ISO-3166-1 alpha-2 标准制定。file-format: 文件格式，可以是.json、.xml、.po等。
在 AngularJS 应用中，通常使用 .json 文件存储翻译内容。
AngularJS 国际化文件结构
在 AngularJS 应用中，我们通常将翻译内容放在单独的 .json 文件中，然后使用 $translateProvider 服务将其载入到应用中。国际化文件存放于 app/i18n 目录中。文件名需要遵循 <language-code>_<country-code>.json 规则。目录结构如下：
app/i18n/ ├── en_US.json ├── fr_FR.json └── zh_CN.json
文件的内容通常是一个键值对，键是英文版的短语或文字，值是对应语言的翻译。例如，在英文版中，我们的应用可能使用一个按钮显示 “Add Comment”，在中文版中，翻译成 “添加评论”。国际化文件的格式如下：
{
"ADD_COMMENT": "添加评论",
"NAME": "名字",
"EMAIL": "邮箱",
"COMMENT": "评论",
"SUBMIT": "提交"
}AngularJS 国际化实现
现在我们已经知道了如何创建国际化文件，我们需要将其引入到 AngularJS 应用中。为了实现国际化，我们需要使用 $translateProvider 服务，它可以帮助我们实现多语言切换。以下是如何使用 $translateProvider 服务来配置应用的示例：
-- -------------------- ---- -------
--------
--- ----- - ----------------------- ----------------------------
--------------------- -------------------- -
-----------------------------------------
------- --------
------- -------
---
-- ---------
----------------------------------------------
---这里我们通过 useStaticFilesLoader 配置项指定了我们的翻译文件存放路径。
现在我们已经配置了应用，我们可以在控制器中使用 $translate 服务来翻译字符串。以下是示例代码：
// controller.js
myApp.controller('myCtrl', function ($scope, $translate) {
$scope.changeLang = function (lang) {
$translate.use(lang);
};
});在上述代码中，我们注入了 $translate 服务，然后在 changeLang 函数中调用 $translate.use(lang) 函数来切换应用的语言。这个函数接收一个参数，表示要切换到的语言的键名（en_US、fr_FR 或 zh_CN ）。
总结
在本文中，我们详细介绍了在 AngularJS SPA 应用中实现国际化的步骤和方法。我们学习了国际化的标准，如何创建国际化文件和如何将它们引入 AngularJS 应用中。我们还学习了如何使用 $translateProvider 和 $translate 服务来实现多语言切换。接下来，我们可以使用这些技术来创建一个全球化的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dd64e7f6b2d6eab38950c6