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

时间：2021-09-01 00:36:01

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低版本浏览器的更多相关文章

  1. 使用socket&period;io client 开发时兼容IE低版本的办法

    使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下 ...

  2. AngularJS开发指南16：AngularJS构建大型Web应用详解

    AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...

  3. AngularJS开发指南1：AngularJS简介

    什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...

  4. AngularJS开发指南2：AngularJS初始化过程

    自动初始化 请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中.比如:<html ng ...

  5. AngularJS开发指南13：AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  6. AngularJS开发指南12：AngularJS的模板，CSS，数据绑定详解

    模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.Angu ...

  7. AngularJS开发指南8：AngularJS模块的详解

    在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,Jav ...

  8. AngularJS开发指南4：指令的详解

    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...

  9. AngularJS开发指南3：Angular主要组成部分以及如何协同工作

    AngularJS的主要组成部分是: 启动(startup) - 展示“hello world!” 执行期(runtime) - AngularJS 执行期概览 作用域(scope) - 视图和控制器 ...

随机推荐

  1. SqlServer2008安装时提示重启计算机失败 解决办法

    问题描述: 在安装Sql Server 2008时提示重启计算机,重启之后不行,仍需要重启计算机. 如下图所示: 解决方法: 1.运行(或按键盘Win+R 组合键),输入regedit,调出注册表管理 ...

  2. 【转载】【树形DP】【数学期望】Codeforces Round &num;362 &lpar;Div&period; 2&rpar; D&period;Puzzles

    期望计算的套路: 1.定义:算出所有测试值的和,除以测试次数. 2.定义:算出所有值出现的概率与其乘积之和. 3.用前一步的期望,加上两者的期望距离,递推出来. 题意: 一个树,dfs遍历子树的顺序是 ...

  3. C&num; 毕业证书打印《五》

    对鼠标操作Label的方法 #region //定义一个枚举类型,描述光标状态 private enum EnumMousePointPosition { #region MouseSizeNone ...

  4. 教程-delphi的开源json库：superobject，用法简介

    困惑一天的问题 一个语句搞定了... 回头细说. superobject中的{$DEFINE UNICODE} 就是它,这是json官方推荐的Delphi处理json的包,地址: http://www ...

  5. thinkphp I方法取传参

    /** * 获取输入参数 支持过滤和默认值 * 使用方法: * <code> * I('id',0); 获取id参数 自动判断get或者post * I('post.name','','h ...

  6. 人人网FED CSS编码前端开发规范

    文件相关规范 1.文件名必须由小写字母.数字.中划线-组成 2.文件必须用utf-8编码 3.文件引入可通过外联或内联方式引入: 3.1 外联方式:<link rel=”stylesheet” ...

  7. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  8. HTTP常见的状态码——面试题常考

    一些常见的状态码为:  200 - 服务器成功返回网页 400(错误请求)服务器不理解请求的语法. 404 - 请求的网页不存在 500(服务器内部错误)服务器遇到错误,无法完成请求. 503 - 服 ...

  9. Java加密算法

    密码的常用术语: 1.密码*:由明文空间.密文空间.密钥空间.加密算法和解密算法5部分组成. 2.密码协议:也称为安全协议,是指以密码学为基础的消息交换的通信协议,目的是在网络环境中提供安全的服务. ...

  10. javascript性能优化之避免重复工作

    javascript最重要也最根本的性能优化标准之一是避免工作,避免工作又包括两点,第一,不做不必要的工作,第二,不做重复的已经完成的工作.第一部分可以通过代码重构完成,第二部分不做重复的工作有时候难 ...

相关文章