安装就不赘述了。主要记录在使用时的方法调用和注意事项。
对$translateProvider配置:
(1)异步请求文件的配置方法
angular.module('httpApp',['pascalprecht.translate'])
.config(['$translateProvider',function ($translateProvider){
var lang = window.localStorage.lang||'zh-cn';
$translateProvider.preferredLanguage(lang);
$translateProvider.useStaticFilesLoader({
prefix: '/lang/',
suffix: '.json'
});
$translateProvider.useSanitizeValueStrategy('escapeParameters');
}
1.使用preferredLanguage(lang)配置初始使用语言,lang为使用的语言;
2.使用useStaticFilesLoader(option)配置应该加载本地国际化语言配置文件的位置,其中option中属性‘prefix’为文件前缀,‘suffix’为后缀
以上配置后,会在‘/lang/zh-cn.json’位置找到对应的json文件获取语言内容。
3.$translateProvider.useSanitizeValueStrategy('escapeParameters')这一段使用‘escapeParameters’的策略类型,如果不使用会出现警告(未深究原理):
pascalprecht.translate.$translateSanitization: No sanitization strategy has been configured. This can have serious security implications. See http://angular-translate.github.io/docs/#/guide/19_security for details.
‘/lang/zh-cn.json’文件应为合理的json文件内容为
{
"HEADLINE": "你好!",
"INTRO_TEXT": "这是中文!"
}
‘/lang/en.json’同理
(2)直接在配置代码中加入语言,不将语言分开加载:
angular.module('httpApp',['pascalprecht.translate'])
.config(['$translateProvider',function ($translateProvider){
var lang = window.localStorage.lang||'zh-cn';
$translateProvider.preferredLanguage(lang);
$translateProvider.translations('zh-cn', {
HEADLINE: '你好!',
INTRO_TEXT: '这是中文!'
})
.translations('en', {
HEADLINE: 'hell!',
INTRO_TEXT: 'this's english!'
});
$translateProvider.useSanitizeValueStrategy('escapeParameters');
}
以上直接在文件中使用translations()方法配置,加入使用的语言对应键值对象即可。
在translations()方法配置和useSanitizeValueStrategy()方法配置同时存在时,会优先使用缓存的语言,既translations()方法配置的语言内容,若没有对应的语言才考虑使用文件内容。
语言使用:
1.在html中使用
<div ng-controller="myCtrl">
<div>
<h2 ng-bind="'HEADLINE' | translate"> </h2>
<p>{{'INTRO_TEXT' | translate}}</p>
</div>
<button ng-click="changeLang()">语言</button>
</div>
angular-translate内已封装了将对应的键值的转译filter:‘translate’,只要用对应的键值加上‘|translate’即可获得对应的语言内容。
2.在js中使用:
.controller('myCtrl',function($scope, $filter){
$scope.changeLang = function (){
var lang = $filter('translate')('key');
}
既在controller内调用过滤器filter,从而获取到相应的数据
语言切换:
.controller('myCtrl',function($scope, $translate){
$scope.changeLang = function (){
var lang = $translate.use();
lang == 'zh-cn'? $translate.use('en'): $translate.use('zh-cn');
}
在引入‘$translate’对象,调用其use(lang)方法其中lang为要切换的语言。
参考:http://blog.csdn.net/dream182/article/details/52232770
http://blog.csdn.net/daniel7443/article/details/51160420