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

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

  1. AngularJs学习笔记--bootstrap
  2. AngularJs学习笔记--html compiler
  3. AngularJs学习笔记--concepts
  4. AngularJs学习笔记--directive
  5. AngularJs学习笔记--expression
  6. AngularJs学习笔记--Forms
  7. AngularJs学习笔记--I18n/L10n
  8. AngularJs学习笔记--IE Compatibility
  9. AngularJs学习笔记--Modules
  10. AngularJs学习笔记--Scope
  11. AngularJs学习笔记--Dependency Injection
  12. AngularJs学习笔记--Understanding the Model Component
  13. AngularJs学习笔记--Understanding the Controller Component
  14. AngularJs学习笔记--E2E Testing
  15. AngularJs学习笔记--Understanding Angular Templates
  16. AngularJs学习笔记--Using $location
  17. AngularJs学习笔记--Creating Services
  18. AngularJs学习笔记--Injecting Services Into Controllers
  19. AngularJs学习笔记--Managing Service Dependencies
  20. AngularJs学习笔记--unit-testing

AngularJs学习笔记--I18n/L10n的更多相关文章

  1. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  2. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  5. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  6. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  7. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  8. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  9. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. C#控件随窗体大小改变而改变

    几种方法:1.点击控件,属性,里面有一个Dock,选择Fill,就会变得和它的父容器一样大.而且会随之变化.2.点击控件,属性,里面有一个Anchor,选择Top,Right,Bottom,Left. ...

  2. idea tomcat添加

    https://blog.csdn.net/fanhenghui/article/details/69258499

  3. ormLite注解小记

    注解是特殊的代码标志已在Java版本开始,要指定什么类和字段存储在数据库中,ORMLite支持其自己的注解(@ DatabaseTable @ DatabaseField)或更多的标准注解从javax ...

  4. Django 入门项目案例开发（下）——创建项目应用及模型类

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. 前面两章是在已经开发好的项目上用来描述环境和业务,这一章创建一个全新的项目来用作开发,你可以跟 ...

  5. 【response-下载文件步骤】

    Java中都通用文件下载(ContentType.文件头.response.out四步骤) 1.设置文件ContentType类型 2.设置文件头 3.通过response获取ServletOutpu ...

  6. css内容简介（层叠样式表）

    css是对网页编辑的加色,是对其功能的渲染. 根据规范每个元素都有一个display属性,每个元素都有一个------------如div元素他的默认为block. 行内元素和块级元素 块级元素会占据 ...

  7. Shiro登录校验

    shiro是一种权限认证框架,实现一个简单的登录鉴权: 1.控制器层: @Controller @RequestMapping("/blogger") public class B ...

  8. 关于responseHeader的一些基础设置

    1.关于响应头的一些基础设置 //设置相应头 response.addHeader("name","zhangsan"); response.addIntHea ...

  9. Windows Server 2008 R2 搭建网站详细教程

    转自:http://jingyan.baidu.com/album/642c9d34098bf5644a46f71f.html?picindex=4 网上都有一些Windows Server 2008 ...

  10. Spring课程 Spring入门篇 6-2 ProxyFactoryBean及相关内容（上）

    1 解析 1.1 类的方式实现各种通知需要实现的接口 1.2 创建Spring aop代理的优点及方法 1.3 代理控制切入点和通知的顺序的代码实现(具体完全实现,见代码2.1) 1.4 代理方式选择 ...