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 相关文章推荐
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
react-router中的属性详解
Jun 01 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
浅谈克隆 JavaScript
Nov 02 Javascript
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性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
Python探索之修改Python搜索路径
2017/10/25 Python
浅谈Python中的bs4基础
2018/10/21 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
社区活动邀请函范文
2014/01/29 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
数字化校园建设方案
2014/05/03 职场文书
2014年财政工作总结
2014/12/10 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis