浅析 AngularJS 全球化最优方案（六）

最新推荐文章于 2023-10-11 17:41:47 发布

国际化梦工厂

最新推荐文章于 2023-10-11 17:41:47 发布

阅读量1w

点赞数 1

分类专栏： AngularJS

本文链接：https://blog.csdn.net/spring1208/article/details/52327339

版权

AngularJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本节是最后一节关于AngularJS的国际化和本地化方案讨论，具体会和大家聊下目前有哪些第三方库，以及优缺点。

首先谈谈国际化，AngularJS自带国际化支持，提供了一些语言的国际化资源文件文件，具体的覆盖面，大家可以去官网查询。

下面聊聊怎么使用这些资源文件，一般来说会分静态加载和动态加载，静态加载可以使用预绑定、单独加载。预绑定是将国际化资源文件和 AngularJS 库文件进行合成，比如在Linux 里面可以使用：

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

也可以单独加载，在index.html里面添加引用：

<html ng-app>

<head>

　　….

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

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

　  ….

</head>

</html>

除静态加载，当然也可以使用 grunt 做模板渲染。但是通常情况下，会使用动态加载方式：

    <!-- i18n -->
    <script type="text/javascript"
            src="lib/angular/i18n/<%= (new com.hero.admin.ui.i18n.JSResourceResolver("lib/angular/i18n","angular-locale_")).geti18NFile(request) %>">
    </script>

引入AngularJS提供的资源文件后，在具体的实现中可以使用过滤器对原始数据进行国际化处理：

<!document html>
<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>locale test</title>
    <script src="../../build/angular.js"></script>
    <script src="../../build/i18n/angular-locale_de.js"></script>
    <script>
      function AppCntl($scope){
        $scope.input = 234234443432;
      }
    </script>
  </head>
  <body ng-controller="AppCntl">
    <input type="text" ng-model="input"><br>
    date: {{input | date:"medium"}}<br>
    date: {{input | date:"longDate"}}<br>
    number: {{input | number}}<br>
    currency: {{input | currency }}
  </body>
</html>

以上是国际化部分，基本的国际化点这样实现是没有问题的，如果有一些特殊的国际化点，AngularJS 国际化资源文件没有提供，可以参考包含IBM cldr的相关JS库。

AngularJS 在本地化的支持中，常用的第三方库有angular i18n, angular-translate 和angular-gettext。这几个库的特点如下：

Angular i18n：

在项目设计的时候就需要考虑到国际化。
此库是绝对的 “angular way”，100%的国际化处理都是在前端完成。
使用i18n的过滤器和指令。
使用内联替换
支持单复数
支持性别区分的替换
有第三方翻译流程处理工具：grunt-angular-localization

参考资料：

https://docs.angularjs.org/guide/i18n
https://www.youtube.com/watch?v=6I_rONDvHq0

Angular-translate：

基于key-value模式的本地化方式
使用国际化的过滤器和指令
插值服务，Non-angular style，使用变量替换
支持单复数
可以独立获取浏览器 Locale，但存在Bug
支持异步加载和同步加载

参考资料：

https://angular-translate.github.io/
https://www.youtube.com/watch?v=9CWifOK_Wi8

Angular-gettext

自动使用value当做字符串的key
提供脚本自动采取需要翻译的字符串
插值服务，使用angular style
支持指令和过滤器以及直接使用JS调用服务
支持单复数
支持上下文翻译
支持添加注释
第三方工具较多

参考资料：

https://angular-gettext.rocketeer.be/

第3种方案有其独特的优点，但是在实际使用过程中也发现有一些问题：

source 中有换行的情况，抽取后使用了grunt 的脚本htmlmin压缩了html文件，这样会导致调用时key匹配不上的问题，解决方案是尽量使用规范的html书写格式，删除不必要的换行。
"> <"等字符包含在文本中时，提取到po文件时会自动转成明文“<>”，这样是翻译完后，会导致key无法匹配的问题，解决方案是做升级，在高版本中已经有相应的机制，会在替换函数里面加转义机制，如果是老版本只能重写此函数，但是建议升级，不要本地维护这个库。

至此，AngularJS 的国际化和本地化就告一段落，接下来会给大家分享Unicode Bidi Algorithm的一些知识。

国际化梦工厂

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
浅析 AngularJS 全球化最优方案（六）

本节是最后一节关于AngularJS的国际化和本地化方案讨论，具体会和大家聊下目前有哪些第三方的库以及有缺点。首先谈谈国际化，AngularJS的国际化支持是不错的，提供了一些语言的国际化资源文件文件，具体支持哪些国家，大家可以去官网查询。下面聊聊怎么使用这些资源文件，一般来说会分静态加载和动态加载，静态加载可以使用预绑定、单独加载。预绑定是将国际化资源文件和 AngularJS 库文件进
复制链接

扫一扫