AngularJs学习笔记--I18n/L10n

时间 2019-11-16

标签 angularjs 学习笔记 i18n l10n 栏目 AngularJS 繁體版

原文原文链接

原版地址：http://code.angularjs.org/1.0.2/docs/guide/i18njavascript

1、I18n and L10n in AngularJShtml

1. 什么是I18n和L10n?java

　　国际化（Internationalization），简称I18n，是让产品开发在一个他们能够简单地对产品进行语言、文化的本地化的方法的规范。本地化（Localization），简称L10n，一个使得应用、文本有适应特殊的文化或者语言市场的能力的规范。对于应用开发者，使一个程序国际化，意味着须要从程序中抽取全部字符串和其余区域较为特别的地方（例如日期和货币格式）。使一个程序本地化，意味着须要提供根据I18n抽取出来的块进行翻译和格式本地化。git

2. 当前angular支持什么级别的I18n、L10n？angularjs

　　当前，angular对datetime、number、currency过滤器提供I18n、L10n支持。github

　　此外，angular经过ngPluralize directive（http://docs.angularjs.org/api/ng.directive:ngPluralize）支持多元化的本地化。express

　　全部可本地化的控件都依赖于经过$locale服务管理的区域设定特性规则集。bootstrap

　　为了让读者看到实际例子，官方准备了一些网页例子，展现如何经过区域规则集合变量使用angular过滤器。咱们能够在Github（https://github.com/angular/angular.js/tree/master/i18n/e2e）或者在angular开发包中的i18n/e2e中找到对应的例子。api

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列表

2、在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文件。咱们还须要配置咱们的服务器提供正确的、符合指望的区域设置文件。

然而，第二种方式（包含区域设置文件到页面中）会比较慢，由于须要多加载一个脚本。（-_-!!!!）。

3、陷阱（“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的开发者指定的时区。