AngularJs 国际化（I18n/L10n）详解
一、I18n and L10n in AngularJS
1. 什么是I18n和L10n?
国际化（Internationalization），简称I18n，是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化（Localization），简称L10n，一个使得应用、文本有适应特殊的文化或者语言市场的能力的规范。对于应用开发者，使一个程序国际化，意味着需要从程序中抽取所有字符串和其他区域较为特别的地方（例如日期和货币格式）。使一个程序本地化，意味着需要提供根据I18n抽取出来的块进行翻译和格式本地化。
2. 当前angular支持什么级别的I18n、L10n？
当前，angular对datetime、number、currency过滤器提供I18n、L10n支持。
此外，angular通过ngPluralize directive（http://docs.angularjs.org/api/ng.directive:ngPluralize）支持多元化的本地化。
所有可本地化的控件都依赖于通过$locale服务管理的区域设定特性规则集。
为了让读者看到实际例子，官方准备了一些网页例子，展示如何通过区域规则集合变量使用angular过滤器。我们可以在Github（https://github.com/angular/angular.js/tree/master/i18n/e2e）或者在angular开发包中的i18n/e2e中找到对应的例子。
3. 什么是区域id（locale id）?
locale是一个特定地理、政治、文化的地区。最常用的locale id 由两部分组成：语言代码和国家代码。例如，en-US，en-AU，zh-CN都是有效的locale ID，都包含语言代码和国家代码。因为在locale ID中指定的国家编码是可选的，locale ID，例如en、zh和sk都是有效的。查看网站ICU（http://userguide.icu-project.org/locale），那里有更多关于locale ID的信息。
4. angular支持的locale
angular将数字、日期时间格式的规则集合分开放在不同的文件中，每个文件独有一个区域。我们可以在这里（https://github.com/angular/angular.js/tree/master/i18n/locale）找到当前支持的locale列表
二、在angular中定制locale规则
在angular中定制locale有两个方式：
1. 预先绑定的规则集合（Pre-bundled rule sets）
我们可以通过将locale-specific的文件连接到angular.js或者angular.min.js之后，实现将angular和预先绑定（pre-bundle）期望的locale文件。
例如，在*nix中，我们可以通过以下命令来创建一个包含德国区域本地化规则的文件的angular.js文件：
cat angular.js i18n/angular-locale_de-ge.js > angular_de-ge.js
当从应用程序使用angular_de-ge.js脚本代替一般的angular.js脚本开始，angular开始自动预先配置（pre-configured）德国地区的本地化规则。
2. 包含locale js脚本到index.html页
我们也可以包含指定区域的js文件到页面当中。例如，如果一个客户端需要德国区域文件，我们可以提供类似以下的页面：
<html ng-app> <head> ... <script src="angular.js"></script> <script src="i18n/angular-locale_de-ge.js"></script> ... </head> ... </html>
上述两种方法，都要求我们为本地化而提供各个区域的不同的index.html页或者js文件。我们还需要配置我们的服务器提供正确的、符合期望的区域设置文件。
然而，第二种方式（包含区域设置文件到页面中）会比较慢，因为需要多加载一个脚本。（-_-!!!!）。
三、陷阱（“Gotchas”）
1. 货币符号陷阱
angular的currency filter允许我们从locale service中使用默认的货币符号，我们也可以提供自定义的货币符号。如果我们的应用只在一个区域中使用，那么我们可以依赖（设置）默认货币符号。但是，如果我们预料到其他区域的用户也会使用到我们的应用的话，我们应该提供我们自定义的货币符号，确保用户能够明白实际的值。
例如，如果我们想通过绑定currency filter来显示账户余额为1000元：{{ 1000 | currency}}，我们的应用当前是使用en-US的区域设置，那么将会显示”$1000.00”。然而，如果一些其他区域（例如中国大陆）的用户访问我们的应用，用户浏览器会指定区域设置为“中国大陆”，然后余额将显示为“￥1000.00”（很悲催的错误啊，汇率...）。
在这个例子中，当我们需要设置filter的时候，我们需要通过对currency filter（http://docs.angularjs.org/api/ng.filter:currency）提供货币符号作为参数来重写默认货币符号，参数如：USD$。这样，angular会忽略任何区域设置的变化，一直显示余额为“USD$1000.00”。
2. 翻译长度陷阱
记住，翻译字符串、事件格式时，长度的变化可能会很大。例如“June 3, 1977”翻译为西班牙语时变为“3 de junio de 1977”。当然，还可能会有更加极端的状况。因此，当我们对应用进行国际化时，我们需要设置相应的CSS规则并且进行全面测试，确保UI组件不会折行（变型）。
3. 时区
记住，angular的datetime filter是使用浏览器端设置的时区的。所以，同一个应用将根据运行应用的计算机的时区设置而显示不同的时间信息，而不是取决于javascript或者angular的开发者指定的时区。
相关文章
angular6根据environments配置文件更改开发所需要的环境的方法
这篇文章主要介绍了angular6根据environments配置文件更改开发所需要的环境的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
最近Angular项目组终于发布了新版——正式版 Angular 4.0.0。所以想着就来尝试下升级，记录下整个升级过程分享给大家，所以这篇文章主要介绍了Angular2升级到Angular4的详细步骤，需要的朋友可以参考下。2017-03-03
这篇文章主要介绍了Angular中样式绑定解决方案,使用ngClass和ngStyle可以进行样式的绑定,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
spy 是一种检查函数是否被调用或提供自定义返回值的方法,我们可以使用spy 来测试依赖于服务的组件,并避免实际调用服务的方法来获取值,在本文中,您将学习如何在 Angular 项目中使用 Jasmine spy,需要的朋友可以参考下2024-03-03
angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一，下面通过本文给大家介绍AngularJs中route的使用方法和配置，感兴趣的朋友一起学习吧2016-02-02
AngularJS使用拦截器实现的loading功能完整实例
这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了Angularjs实现多图片上传预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要介绍了详解AngularJS中自定义指令的使用,包括结合自定义HTML标签的使用,需要的朋友可以参考下2015-06-06
详解基于Bootstrap+angular的一个豆瓣电影app
本篇文章主要介绍了基于Bootstrap+angular的一个豆瓣电影app ，非常具有实用价值，需要的朋友可以参考下2017-06-06
这篇文章主要介绍了AngularJS实现Model缓存的方式，分享了多种AngularJS实现Model缓存的方法，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论