AngularJs 国际化(I18n/L10n)详解


Posted in Javascript onSeptember 01, 2016

一、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的开发者指定的时区。

Javascript 相关文章推荐
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
AngularJs Forms详解及简单示例
Sep 01 #Javascript
vue.js入门教程之计算属性
Sep 01 #Javascript
AngularJs expression详解及简单示例
Sep 01 #Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 #Javascript
vue.js入门教程之基础语法小结
Sep 01 #Javascript
AngularJs directive详解及示例代码
Sep 01 #Javascript
AngularJs concepts详解及示例代码
Sep 01 #Javascript
You might like
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
Python基于贪心算法解决背包问题示例
2017/11/27 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Django对models里的objects的使用详解
2019/08/17 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
python实现电子词典
2020/03/03 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
仓库主管岗位职责
2014/03/02 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
机动车交通事故协议书
2015/01/29 职场文书
Django框架中模型的用法
2022/06/10 Python