e起飞young
一个前端码农的技术博客
angularJS插件:angular-translate实现多语言国际化
[ 2017/07/06, 5683阅, 4评 ]
很多web服务面对的不仅仅是当地用户,多语言环境不仅能提升逼格,更重要是一种用户体验。
angularJS作为前后端拆分的解决方案之一,当然离不开前端框架处理国际化的问题,angularJS官方出了一个模块angular-translate来解决多语言国际化问题。

官方网站 / GitHub / Docs

栗子如下,先引入必备文件

<script type="text/javascript" src="yourpath/angular.min.js"></script>
<script type="text/javascript" src="yourpath/angular-translate.min.js"></script>
<script type="text/javascript" src="yourpath/angular-translate-loader-static-files.min.js"></script>

1、准备工作

我们找一个独立的文件夹i18n用来放json文件,文件夹中包含cn.json与en.json文件。

//cn.json中
{"100001":"登录","100002":"注册"}
//或者{"login":"登录","reg":"注册"}
//en.json中
{"100001":"Login","100002":"Register"}
//或者{"login":"Login","reg":"Register"}

上面2个json文件对应相同的键,我们称之为“翻译键”;不同的语言文件中,相同的翻译键对应相应的翻译值即可,如"Login"对应"登录"。

2、注入依赖及配置

var myApp = angular.module('myApp', ['pascalprecht.translate'])
.config(['$translateProvider',function($translateProvider){
	var lang = window.localStorage['lang'] || 'cn';
	$translateProvider
		.preferredLanguage(lang)
		.useStaticFilesLoader({
			prefix: 'app/statics/i18n/',
			suffix: '.json'
		})
		//sanitize escape escapeParameters
		.useSanitizeValueStrategy('escapeParameters');
}])

3、创建过滤器做Html页面内容的国际化

myApp.filter("L", ['$translate', function($translate){
	return function(key){
		if(key){
			return $translate.instant(key);
		}
	};
}])

使用方法:{{100001|L}}或{{'login'|L}}

4、在js脚本中使用国际化

myApp.factory('L', ['$translate', function($translate){
	var L = {
		L:function(key){
			if(key){
				return $translate.instant(key);
			}
			return key;
		}
	}
	return L;
}])

使用方法:L.L(100001)或L.L('login')


上面的这种通过angular-translate-loader-static-files引入json语言包的方式在某些场景下会罢工,例如directive中,切换语言之后并不能即时更新。把所有语言都切换一遍(即所有json包都加载了)之后,恢复正常;连续刷新几次页面之后也会罢工。使用其官方的写法可解决该问题,压缩之后文件也不算太大。。。

(function(){"use strict";
angular.module('myApp')
.config(['$translateProvider', function($translateProvider){
	$translateProvider.translations('en', {
		"login": "Login",
		"regist": "Regist",
		"logout": "Logout"
	});
	$translateProvider.translations('zh_cn', {
		"login": "登录",
		"regist": "注册",
		"logout": "退出"
	});
	$translateProvider.translations('jp', {
		"login": "ログイン",
		"regist": "登録",
		"logout": "脱退"
	});
	var lang = window.localStorage['lang'] || 'en';
		lang = lang.replace(/["]/g,"");
	$translateProvider
		.preferredLanguage(lang)
		.useSanitizeValueStrategy('escapeParameters');;
}]);
})();

相关操作:

//获取当前使用语言
$scope.nowLang = $translate.use();
//切换语言
$scope.switchLang = function(str){
	$translate.use(str);
	storage.set('lang',str);
	$window.location.reload();
};

有朋自远方来...评论一下呗O(∩_∩)O

  • 评论(4)

    [ 回复 ] 2楼
    2020-03-16 16:05

    您好  我想问下  我试了一下  但是报错cn.json404  能帮我看下吗

    e起飞young 博主大人 [ 回复 ]
    2020-03-16 16:11

    @☀:你的angular是什么版本的,我这篇文章对应的是1.x版本

    正阳 [ 回复 ] 1楼
    2018-05-11 10:11

    您好,我按照您说的办法,建了过滤器但是不起作用提示我L  is  not  defined请问博主这个如何解决

    e起飞young 博主大人 [ 回复 ]
    2018-05-12 12:46

    @正阳:在你用到的地方将L注入呀,比如你要在一个controller中使用,那就先将L注入到这个controller

    搜索