angular-translate 使用测试记录

安装就不赘述了。主要记录在使用时的方法调用和注意事项。

对$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

转载于:https://my.oschina.net/kxzj/blog/744573