#angular 国际化

angular国际化

国际化概念

一、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. 货币符号陷阱
  angularcurrency filter允许我们从locale service中使用默认的货币符号,我们也可以提供自定义的货币符号。如果我们的应用只在一个区域中使用,那么我们可以依赖(设置)默认货币符号。但是,如果我们预料到其他区域的用户也会使用到我们的应用的话,我们应该提供我们自定义的货币符号,确保用户能够明白实际的值。
  例如,如果我们想通过绑定currency filter来显示账户余额为1000元:{ { 1000 | currency}},我们的应用当前是使用en-US的区域设置,那么将会显示”$1000.00”。然而,如果一些其他区域(例如中国大陆)的用户访问我们的应用,用户浏览器会指定区域设置为“中国大陆”,然后余额将显示为“¥1000.00”(很悲催的错误啊,汇率…)。
  在这个例子中,当我们需要设置filter的时候,我们需要通过对currency filterhttp://docs.angularjs.org/api/ng.filter:currency)提供货币符号作为参数来重写默认货币符号,参数如:USD

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值