介绍
本文将介绍如何使用 ewancoder-angular-localization ，这是一个 AngularJS 模块，用于在您的应用程序中管理本地化内容。这个包支持的特性集包括自动检测设备语言、指定默认语言、动态语言切换、后端接口获取翻译文件等。
示例代码在 Github 上开放。
安装和引入
npm install ewancoder-angular-localization --save
和 AngularJS 的任何模块一样，包需要在您的应用程序中注册。这可以通过由应用程序模块调用 angular.module() 方法实现。
var app = angular.module('myApp', ['ewancoder.angularLocalization']);
简单使用
要使用 ewancoder-angular-localization module，您首先需要在您的 HTML 文件中包含模块指令：
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ----- ---------------- --------- ------- ----------- ---- -- ------------------------------ ---- --- ------- ---------------------------------------------------------------------------------------------------------- ------- ------ --- ---- ------------ --- ----- ------------------------- --- ------- -------展开代码
然后您将需要准备您的翻译内容（语言包）。
└── locales ├── en_US.json └── zh_CN.json
假设您拥有两个语言包，一个是英语（en_US），一个是中文（zh_CN）。每个语言包都应该是 JSON 格式的。
-- -------------------- ---- ------- -- ---------- - -------- --------- ---------- ---------- - -- ---------- - -------- ------ ---------- ----- -展开代码
接下来，在你的 app.js 中，设置应用的默认语言和加载应用所有语言包：
app.config(function(localizationProvider) { localizationProvider.setPreferredLanguage('en_US'); // 设置默认语言 en_US localizationProvider.setLangFilesPath('locales/'); // 语言包存放路径 localizationProvider.setDfLanguage('en_US'); // 设置默认语言 localizationProvider.setLanguageOrder(["en_US", "zh_CN"]); // 设置语言包顺序 });
然后就可以在您的应用程序中使用翻译功能了。
例如，在 html 文件中使用翻译指令：
<div>{{'hello' | translate}}</div> <div>{{'goodbye' | translate}}</div>
动态加载及更新翻译内容
您可以通过在应用程序中注册的时候给 localizationConstants 服务定义一个回调函数，让您可以在您应用程序中执行的任何时间动态加载和更新翻译文件。
示例代码：
-- -------------------- ---- ------- ----------------------- - ---------- - -------- - -------- ----- ---------- ---- - - --------------------------- ----------- -------- - ----------------------------------------- ---------- - --- -------- - ----------------- -------------------------- --------------------------- --- ---展开代码
通过执行 angular.extend($rootScope, LOCALES.locales[language]);，您的翻译文件会动态地加载到应用程序中。
小结
在本文中，我们学习了如何通过 ewancoder-angular-localization 来简化 AngularJS 应用程序中的本地化内容的管理。使用该包，您可以检测设备语言、指定默认语言、动态语言切换、后端接口获取翻译文件等。这样，您就不必再费劲地维护一堆本地化资源文件了。
使用 AngularJS 的本地化模块也是理解其原理的最佳方式之一。我们希望这篇文章可以帮助您更加深入地学习 AngularJS 并能够更加高效、方便地进行应用程序开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005527e81e8991b448cff90
