AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

AngularJS本地化,国际化

国际化,简写为i18n,指的是使产品快速适应不同语言和文化。

本地化,简称l10n,是指使产品在特定文化和语言市场中可用。

对开发者来说,国际化一个应用意味着将所有的文字和其他因地区而异的数据从应用中抽离出来。

本地化意味着为这些抽离的数据和文字提供翻译和转变成本地的格式。

目前,AngularJS支持日期,数字和货币的国际化和本地化。

另外,AngularJS还通过ngPluralize指令支持本地多元化。

所有的AngularJS本地化组件都依赖于$locale服务,管理本地化规则(locale-specific rule sets)。

如果你想直接看例子,你可以在AngularJS开发包的i18n/e2e文件夹下找到这些例子。

一个地区(locale)是指一个按地理上,政治上,文化上划分的区域。常用的地区ID由两部分组成:语言代号和国家代号。比如,en-US, en-AU, zh-CN就是合法的地区ID,它们都含有语言代号和国家代号。 因为国家代号是可选的。所以像en, zh, and sk这样的id也是合法的。查看ICU网站来获取更多的地区ID信息。

对于AngularJS支持的地区,AngularJS按照数字,事件格式等规则分别放在不同的文件里,每个文件都对应一个指定的地区。你在AngularJS文件夹里可以找到一系列支持的地区。

有两种方法能使用新的地区规则:

1. 预捆绑规则

你可以通过将地区文件与angular.js捆绑,来实现对你想要使用的地区文件的预绑定。

比如在*nix系统中,你可以按照下面的命令,创建一个包含德国地区规则的angular.js文件:

cat angular.js i18n/angular-locale_de-ge.js > angular_de-ge.js

当应用使用angular_de-ge.js脚本而不是angular.js脚本时,AngularJS会自动使用德国本地化规则。

2. 将地区脚本载入到index.html

你也可以将指定的地区文件载入到index.html中。比如,当有客户端请求是来自德国的,你可以返回index_de-ge.html,这个文件看起来像下面这样:

<html ng-app>

<head>

  ….

   <script src="angular.js"></script>

   <script src="i18n/angular-locale_de-ge.js"></script>

   ….

</head>

</html>

第二种方式(在index.html中加载脚本)要更慢一些,因为需要额外加载脚本。

AngularJs的货币过滤器允许你使用地区服务里的默认货币符号,但是你也可以使用你自己定义了货币符号的过滤器。如果你的应用只在一个地区使用,那么使用默认的钱币符很好。但是如果你的应用在多地区使用, 你应该提供你自己的钱币符来确保钱币值能被正确理解。

比如说,如果你想显示1000美元的账户余额,使用下面这种带有钱币过滤器的表达式{{1000|currency}},并且你的应用目前是在en-US地区,那么‘$1000.00‘会被显示出来。但是,如果用户在其他地方使用(比如说,中国深圳)你的应用,它的浏览器会将地区指定成CN,‘¥1000.00‘就会被显示出来。这会迷惑你的用户。

在这个例子中,你需要通过自己指定钱币过滤器来替换默认的钱币符。这个过滤器要有一个你自己指定的钱币符,比如USD$1,000.00。这样,AngularJS就总是会显示‘USD$1000‘并且忽略掉地区的转换。

还有一点要记住,译文的长度可能和原文有很大区别。比如说,June 3, 1977在西班牙会被翻译成3 de junio de 1977。而且还有更多极端的情况,所以,在对你的应用进行国际化时,你需要好好的写CSS规则并且做好测试。

最后要注意的是,AngularJS使用的是浏览器的时区设置。所以一个相同的应用会根据不同的设备显示不同的时间格式。Javascript和AngularJS都不能支持使用统一的开发者制定的时区。

兼容IE低版本浏览器

如果你要让你的AngularJS应用兼容IE8和IE8以下版本的话,你需要仔细阅读下面的知识点。

要让你的AngularJS应用在IE中正常运行你必须:

  1. 确保JSON字符串能被正常解析(IE7需要),你可以使用JSON2或者JSON3(这两个东西是第三方库,可以在github上下载)来实现。
  2. 你不能使用自定义的元素标签,如<ng:view>(你只能使用属性的形式,如<div ng-view>),或者,
  3. 如果你用了自定义的标签名,那你必须按照以下步骤做才能保证IE正常运行:

 <html xmlns:ng="http://angularjs.org">
  <head>
   <!--[if lte IE 8]>
     <script>
        document.createElement(‘ng-include‘);
        document.createElement(‘ng-pluralize‘);
        document.createElement(‘ng-view‘);
        // Optionally these for CSS
        document.createElement(‘ng:include‘);
        document.createElement(‘ng:pluralize‘);
        document.createElement(‘ng:view‘);
      </script>
   <![endif]-->
 </head>
 <body>
     ...
 </body>
 </html>

上面的代码需要知道的是:

  • xmlns:ng - 命名空间 - 你需要为你使用或者准备使用的每一个自定义标签准备一个命名空间。
  • document.createElement(你的标签名) - 自定义标签的创建 - 因为这只是老版本IE的一个问题,所以你需要根据情况使用。对于每一个你没有使用命名空间或者HTML中没有定义的标签,你需要预先声明它才能使老版本IE正常工作。

还有一些细节需要注意:

IE处理非标准标签名会产生问题。问题可以分为两类,每类都有自己的解决方法。

  • 如果标签名是以my:前缀开始的: 这会被当成是一个XML的命名空间,并且必须使用一个命名空间来声明。
  • 如果标签没有:符号,但它又不是一个标准的HTML标签。那么就必须预先使用document.createElement(‘my-tag‘)来创建它。
  • 如果你准备使用css选择器来对自定义标签添加样式,那么你就必须先用document.createElement(‘my-tag‘)来创建一下,不管有没有XML命名空间。

值得庆幸的是,IE的这种限制只存在标签名上,标签属性名没有限制。所以,当在IE上使用<div my-tag your:tag> </div>.这样的形式时,没有特殊要求。

如果我没按上面说的做会怎么样?

假设你用了一个非HTML标准的标签,暂时称为mytag(称为my:tag 或者 my-tag都可以):

<html>
  <body>
    <mytag>some text</mytag>
  </body>
</html>

它本该被解析成下面这样的DOM:

#document
  +- HTML
     +- BODY
        +- mytag
           +- #text: some text

期望的结果是BODY元素包含一个叫做mytag的子元素。这个子元素同时包含文本"some text"。

但是IE不会这样解析(如果没有按之前修复IE的步骤做的话):

#document
  +- HTML
     +- BODY
        +- mytag
        +- #text: some text
        +- /mytag

在IE中,BODY元素有了三个子元素:

(1)一个自闭合的标签mytag。和自闭合标签一样。最后的关闭符/是可选的,但是标签并不允许包含子元素。所以浏览器会将some text解析成兄弟节点。

(2)一个纯文字的节点。这本来应该是上面的mytag的子节点,而不是兄弟节点。

(3)一个不合法的自闭合标签/mytag。 因为标签名不允许含有/,所以说它是非法的。另外这个关闭标签不应该是DOM的一部分,因为它是用来描述标签的结尾位置的。

文章来源:AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

时间: 2024-10-03 14:01:58

AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器的相关文章

Angularjs开发指南

Angularjs开发指南:http://docs.ngnice.com/guide Angularjs中文网:http://www.apjs.net/

AngularJS开发指南:表达式

---恢复内容开始--- 表达式是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1+2 3*10 | currency user.name AngularJS表达式 与Javascript表达式的比较 你可能会认为AngularJS视图中的表达式就是Javascript表达式,这种认识不完全对,因为AngularJS不会用Javascript的eval()函数去执行表达式. 不

AngularJS开发指南16:AngularJS构建大型Web应用详解

AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇blog,分享了如何使用AngularJS构建大型Web应用的经验.这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义. 这篇blog特别关注的是大型应用程序,作者首先给出的建议是,尽量不要让应用变得太巨大.而应该编写小型.功能专注的.模块化的部分,然后逐渐把它们组合起来,变得越来越大,

AngularJS开发指南1:AngularJS简介

什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. 通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足: 类库 - 类库是

AngularJS开发指南13:AngularJS的过滤器详解

AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化.你可以向下面这样使用链式的过滤器来传递表达式: name | uppercase 这个表达式执行时会将name的值传递给uppercase过滤器. 写一个你自己的过滤器非常容易:在你的模块中注册一个新的过滤器(可注入的)工厂函数就行了.这个工厂函数必须返回一个新的过滤器函数,这个过滤函数的第一个参

AngularJS开发指南12:AngularJS的模板,CSS,数据绑定详解

模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.AngularJS元素和属性让angular给模板DOM添加行为,或者变形,成为动态地DOM. 下面是你能在模板中用到的AngularJS元素和属性: 指令 — 一个用来扩张已存在的DOM元素或者表现可重用DOM组件的属性或者元素.也可称为widget. 混合(Markup) — 双花括号是angular内

AngularJS开发指南4:指令的详解

指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来帮助web应用开发的指令集,它使得HTML可以转变成“特定领域语言(DSL)”. 指令可以做为HTML中的元素名,属性名,类名,或者注释.下面是一些等效调用myDir指令的例子: <span my-dir="exp"></span> <span class=&

AngularJS开发指南12:作用域

什么是作用域? 作用域是一个指向应用模型的对象.它是表达式的执行环境.作用域有层次结构,这个层次和相应的DOM几乎是一样的.作用域能监控表达式和传递事件. 作用域特点 作用域提供APIs($watch)来观察模型的变化. 作用域提供APIs($apply)将任何模型的改变从"AngularJS领域( Angular realm)"通过系统映射到视图上. 作用域能通过共享模型成员的方式嵌套到应用组件上.一个作用域从父作用域继承属性. 作用域提供表达式执行的上下文.比如说表达式{{user

AngularJS开发指南10:AngularJS依赖注入的详解

依赖注入是一种软件设计模式,用来处理代码的依赖关系. 一般来说有三种方法让函数获得它需要的依赖: 它的依赖是能被创建的,一般用new操作符就行. 能够通过全局变量查找依赖. 依赖能在需要时被导入. 前两种方式都不是很好,因为它们需要对依赖硬编码,使得修改依赖的时候变得困难.特别是在测试的时候不好办,因为对某个部分进行孤立的测试常常需要模拟它的依赖. 第三种方式是最好的,因为它不必在组件中去主动寻找和获取依赖,而是由外界将依赖传入. 举个例子: function SomeClass(greeter