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

AngularJs 国际化(I18n/L10n)详解的更多相关文章

  1. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  2. AngularJS中下拉框的高级用法示例

    这篇文章主要介绍了AngularJS中下拉框的高级用法,结合实例形式分析了AngularJS下拉框的遍历、选择、绑定、显示等功能实现方法,需要的朋友可以参考下

  3. AngularJS数据源的多种获取方式汇总

    在AngularJS中获取数据源的方式有很多种,本文给大家整理几种获取数据源的方式,对angularjs获取数据源的方式相关知识感兴趣的朋友一起学习吧

  4. swiper在angularjs中使用循环轮播失效的解决方法

    今天小编就为大家分享一篇swiper在angularjs中使用循环轮播失效的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

  5. AngularJS教程之环境设置

    本文主要介绍AngularJS环境设置,学习AngularJS的朋友肯定要设置开发软件的环境,这里详细介绍安装设置流程,有需要的朋友可以参考下

  6. 详解AngularJs中$resource和restfu服务端数据交互

    之前小编和大家分享过使用$http同服务器进行通信,但是功能上比较简单,angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。下面来一起看看吧。

  7. angularJS模态框$modal实例代码

    本篇文章主要介绍了angularJS模态框$modal实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. 详解angular ui-grid之过滤器设置

    本篇文章主要介绍了详解angular ui-grid之过滤器设置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. AngularJS实现表单验证功能详解

    这篇文章主要为大家详细介绍了AngularJS实现表单验证功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. Yii2语言国际化自动配置详解

    这篇文章主要介绍了Yii2语言国际化自动配置详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部