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


Posted in Javascript onDecember 08, 2016

前言

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

话题

找到了官网有关Angular的APi,看其最新版本是1.3.9,貌似还有比此版本更高的,无所谓了,只要不影响实现就ok,下载的包里面有国际化文件夹却没有APi,此时第一想到的去github上瞧瞧,果不其然还真有,搜索【Angular translate】即可,幸好英语还算基本过关,关键时刻找点东西还是挺有帮助的。下面一步一步来看,别着急 ,由浅入深。

第一步

两个脚本文件必不可少,我喜欢用压缩的,看个人爱好,angular.min.js,angular-translate.min.js

第二步

我们开始利用开启angular装逼模式。

【第一次尝试】

<html ng-app="app">
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <script src="~/Scripts/angular.min.js"></script>
 <script src="~/Scripts/angular-translate.min.js"></script>
 <script type="text/javascript">
  var app = angular.module("app", ['pascalprecht.translate']);
  app.config(['$translateProvider', function ($translateProvider) {
   $translateProvider.translations('zh-cn', {
    'hello': '你好',
   });

   $translateProvider.preferredLanguage('zh-cn');
  }]);
 </script>
</head>
<body>
 <h1>{{hello | translate}}</h1>
</body>
</html>

上面我们要将hello翻译成中文你好,结果什么都没有,还没出错,是不是很神奇。

【注意】hello必须以字符串形式给出,要不然得不到你所预期。这么写就对了{{"hello" | translate}}

输出如下:

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

【第二次改进】

上面只是简单的开始,老大过来看,不错初步得到我想要的结果,我们项目就要实现这样的结果,但是这结果不太令人满意。

我们的场景是这样的:我们有存储各种语言的JSON文件,当页面加载时,获取用户的所使用的语言,加载该JSON文件,里面存储的是键值对,分别是对应的中文-》英文以及英文-》中文,若获取用户所使用的语言为英文你就将中文翻译成英文。反之亦然,好吧,原来是将翻译的键值对放在JSON文件,那就加载该文件不就得了,继续做呗。

在translate源码下载包里中找到loader-static-files脚本并引入该文件

 测试代码,如下:

<html ng-app="app">
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <script src="~/Scripts/angular.min.js"></script>
 <script src="~/Scripts/angular-translate.min.js"></script>
 <script src="~/Scripts/loader-static-files.js"></script>
 <script type="text/javascript">
  var app = angular.module("app", ['pascalprecht.translate']);
  app.config(['$translateProvider', function ($translateProvider) {
   $translateProvider.useStaticFilesLoader({
    prefix: '/il8n/',
    suffix: '.json'
   });
   $translateProvider.preferredLanguage('en-us');
  }]);
 </script>
</head>
<body>
 <h1>{{"Hello" | translate}}</h1>
 <h1>{{"xpy0928" | translate}}</h1>
</body>
</html>

上述中【prefix】为存储语言的JSON文件夹目录,【suffix】为我们需要请求的文件的扩展名即JSON。而【$translateProvider.preferredLanguage('en-us')】则是请求il8n文件夹下名为【en-us】的JSON文件。

接下来我们运行试试,擦,尼玛,给我原字符串输出,说好的翻译成中文呢?

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

再一看,擦,竟然没找到zh-cn的JSON文件,如下图!这个问题有点叼,开始我还以为是文件夹名【il8n】中的【l】写成【1】。

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

原来是无法请求JSON文件,必须添加映射,在VS 2013 express中添加对JSON的映射需进行如下操作:

(1)通过命令行到C:\Program Files(x86)\IIS Express文件夹

(2)继续命令行:appcmd set config /section:staticContent /+[fileExtension='.json',mimeType='application/json']

 当然如果是发布在本地IIS中只需在Mime中添加映射以及应用配置程序中进行配置即可。

 最终翻译成功如下:

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

【第三次升级终极版本】

做成这样老大应该满意了吧,赶紧欣喜的将老大叫过来大功告成啊,尼玛,终于完事了,好,要的就是这效果,非常不错,不过。。。心想难道这么做你还不满意还是不行,结果又被挑到刺了。

挑刺话题中:如上所示,{{"Hello" | translate}},这么绑定的话,如果页面加载快还行,若是加载慢的话,那就把模板给显示出来了,太丑了,你再想想有没有办法规避这种行为。哈哈,其实我早就想到了,这么绑定会出现他担心的那个问题,我就是卖个关子而已,装装逼也是可以的嘛。用【ng-bind】解决不就ok了吗。心里早就有数,来继续走你。

分析中:[ng-bind]只能绑定在元素的属性中,例如这样<span ng-bind="text"></span>,咦,貌似不对,要是显示html内容,那该怎么办,强大的IDE【vs】的智能提示,显示有[ng-bind-html],令人比较满意的分析。马上试试看。

更改为如下:

<h1 ng-bind-html="{{"Hello" | translate}}"></h1>
 <h1 ng-bind-html="{{"xpy0928" | translate}}"></h1>

结果出错,看错误很明显是语法用错了,试试下面的

<h1 ng-bind-html="'Hello' | translate"></h1>
<h1 ng-bind-html="'xpy0928' | translate"></h1>

这下也不行,不过不是语法的问题,如下图所示:

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

也可能出现如下错误:

[$sce:unsafe] Attempting to use an unsafe value in a safe context

结果一查资料却是要添加一个【angular-sanitize.min.js】脚本文件,并且依赖于它。继续添加此脚本文件看看。结果如我预期。

【注意】添加此脚本文件之后,要在模块中对此脚本文件进行依赖。如下:

var app = angular.module("app", ['pascalprecht.translate', 'ngSanitize']);

我们反过来将中文转换为因为试试看,进行如下修改

$translateProvider.preferredLanguage('en-us');
<h1 ng-bind-html="'你好' | translate"></h1>
<h1 ng-bind-html="'博客园' | translate"></h1>

结果显然是成功的,如下:

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

总结

利用angular进行国际化转换时利用【ng-bind-html】来进行语言的翻译是接近几乎比较完美的方案,不会像利用【{{}}】模式,当页面加载缓慢时导致页面太丑。但是利用【ng-bind-html】还是有点问题,,当刷新总有一个切换的过程,比如从中文【你好】切换到英文【hello】,这样过程你是可以看见的,暂时未想到更好的解决方案,期待你更好的解决方案。整个转换个过程必须要引用以下四个脚本文件。

<script src="~/Scripts/angular.min.js"></script>
 <script src="~/Scripts/angular-translate.min.js"></script>
 <script src="~/Scripts/loader-static-files.js"></script>
 <script src="~/Scripts/angular-sanitize.min.js"></script>

参考资料

【translate api】:translate api

【translate new letter】:translate new letter

【angular sanitize/ng-bind-html not working】:angular sanitize/ng-bind-html not working

【translate download】:translate github

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
浅析javascript中的DOM
Mar 01 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 #Javascript
Bootstrap基本组件学习笔记之进度条(15)
Dec 08 #Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
Dec 08 #Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 #Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 #Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 #Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 #Javascript
You might like
PHP 手机归属地查询 api
2010/02/08 PHP
php Smarty初体验二 获取配置信息
2011/08/08 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
Python 中的 else详解
2016/04/23 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
tornado 多进程模式解析
2018/01/15 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
解决python对齐错误的方法
2020/07/16 Python
艺术学院毕业生自我评价
2014/03/02 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
2014年共青团工作总结
2014/12/10 职场文书
人事任命通知书
2015/04/21 职场文书
团组织推荐意见
2015/06/05 职场文书
青春雷锋观后感
2015/06/10 职场文书
商业计划书范文
2019/04/24 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers