AngularJs 国际化（I18n/L10n）详解

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

赞 (0)

相关推荐

  • 浅析如何利用angular结合translate为项目实现国际化

    浅析如何利用angular结合translate为项目实现国际化

    前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎么接触过,这一个礼拜自己也对Angular基本的用法已经有了初步的了解以及熟悉,于是乎就有了这篇文章的产生.其实没我什么事,我也是主动请缨说交给我,因为年底了嘛,也没什么事,不急不忙的,一天也乐得清闲,还不给自己找点事做,而且还能在做的过程中能学到东西,何乐而不为呢!Angular已盛行一时,但请恕

  • Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    前言 本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: npm 安装 ngx-translate 模块 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 在 Angular 项目配置 app.module.ts 添加 import { TranslateLoader, Tr

  • 详解使用angular-cli发布i18n多国语言Angular应用

    在模板html标签中增加i18n <h1 i18n>Hello world!</h1> 使用ng命令产生xlf格式的message.xlf文件 $ ng xi18n --output-path src/i18n 命令执行后,生成 src/i18n/messages.xlf 文件 <?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xml

  • Angular2中如何使用ngx-translate进行国际化

    Angular2中如何使用ngx-translate进行国际化

    相较于AngularJS中的ng-translate, angular2也有适合自己的国际化模块,就是ngx-translate. 项目地址:https://github.com/ngx-translate/core 使用angular-cli初始化项目: ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-translate/core npm install --save @ngx-translate/http-lo

  • AngularJS 控制器 controller的详解

    AngularJS 控制器 controller的详解 一.控制器概念 控制器在Angualrjs 中的作用是增强视图,并且是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器是,angularjs会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope,由于angularjs会负责处理控制器的实例化过程. 列子: var app=angular.module("myApp",

  • Angularjs cookie 操作实例详解

    Angularjs cookie 操作实例详解

    摘要 现在很多app采用内嵌h5的方式进行开发,有些数据会存在webveiw的cookie中,那么如果使用angularjs开发单页应用,就需要用到angularjs的cookie操作.这里提供一个简单的学习demo.方便快速上手. 一个例子 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp"> <head> <meta http

  • Angularjs自定义指令Directive详解

    Angularjs自定义指令Directive详解

    今天学习angularjs自定义指令Directive. Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin". 在网页上放一个文本框和一个铵钮: <form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate> <i

  • 基于AngularJS的简单使用详解

    Angular Js 的初步认识和使用 一: 1.模块化 定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]); 3.定义模块的控制器,并依赖注入, $scope

  • angularjs 缓存的使用详解

    一.什么是缓存 一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求. 缓存能够服务的请求越多,整体系统性能就提升得越多. 二.Angular 中的缓存 2.1 $cacheFactory 简介 $cacheFactory 是一个为所有Angular服务生成缓存对象的服务.在内部, $cacheFactory 会创建一个默认的缓存对象,即使我们并没有显示地创建. 要创建一个缓存对象,可以使用 $cacheFactory 通过一个ID创建一个缓存: var cache = $c

  • vue使用i18n实现国际化的方法详解

    vue使用i18n实现国际化的方法详解

    一.前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具.比如: vue + vue-i18n angular + angular-translate react + react-intl jquery + jquery.i18n.property 在4K广告机项目中使用的前端框架为Vue,故而我们将使用vue-i18n这个插件进行国际化功能的实现. 二.最终实现效果 三.国际化的实现 1.首先在自己的项目中安装 vue-i18n

  • Spring Boot Thymeleaf实现国际化的方法详解

    Spring Boot Thymeleaf实现国际化的方法详解

    前言 开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.SpringBoot支持如下页面模板语言 Thymeleaf FreeMarker Velocity Groovy JSP 上面并没有列举所有SpringBoot支持的页面模板技术.其中Thymeleaf是SpringBoot官方所推荐使用的,下面来谈谈Thymeleaf实现应用国际化方法. ps:当然现在开发基本上是前后端分离了,但是难免需要维护遗留项目或没有条件前后端分离的团队

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

    如何实现语言国际自动化,大家可能觉得自动化,是不是不需要配置就自动切换,这个思路我之前也想过,能不能根据IP来判断地理位置然后确定其语言,网上找过一个"IpToCountry"相关的,有兴趣的可以搜索出来看看,他会提供一个ip对照的表,每隔一段时间会更新一次,不过这个暂时没做,后面考虑尝试下 这里我们说下Yii2如何实现,因为我们上面的一篇文章分享做了语言国际化的配置,也将对应的语言翻译了出来,下面就是需要根据条件来做切换 从配置文件我们知道只需要更改language这个配置值就可以了

  • angularJS中$apply()方法详解

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

  • AngularJs Managing Service Dependencies详解

    angular允许service将其他service声明为依赖,使用在自身实例化时使用的构造函数中. 为了声明依赖,我们需要在工厂方法声明中指定它们,并且在工厂方法中通过$inject属性(字符串标识数组)或者使用array notation. 通常$inject属性声明可以被丢弃(即http://www.jb51.net/article/91815.htm中提到的隐式依赖注入,但这个是实验属性,在而且在压缩混淆后会失效,慎用!). 使用array notation function myMod

随机推荐