angular tanslate

参考:https://angular-translate.github.io/

引用

    <script src="path/to/angular.js"></script>
    <script src="path/to/angular-translate.js"></script>
    <script >
       var app = angular.module('myApp', ['pascalprecht.translate']);
    </script>
 

服务商

app.config(['$translateProvider',function($translateProvider){
    //配置英文 key为en
    $translateProvider.translations('en', {
    GREETING: 'Hello world!'
    });
    // 配置中文  key 为cn
    $translateProvider.translations('cn', {
    GREETING: '你好'
    });
    //设置默认语言为中文,手动设置
    $translateProvider.preferredLanguage('cn');



    //统一语言标签,作用于determinePreferredLanguage方法之前(必要的,要么就不要设置)
    //$translateProvider.uniformLanguageTag('bcp47')
    //从下面地址自动获取首选语言,并设置成默认语言
    // navigator.languages[0]
    // navigator.language
    // navigator.browserLanguage
    // navigator.systemLanguage
    // navigator.userLanguage
    // $translateProvider.determinePreferredLanguage();  





}])

服务

app.controller('Ctrl', ['$translate,$scope', function ($translate,$scope) {
    //运行时修改语言
 $scope.changeLanguage=function(languageKey){
     $translate.use(languageKey)
 }
}]);

过滤器

<ANY>{{'TRANSLATION_ID' | translate}}</ANY>

指令

//字符串
<ANY translate>TRANSLATION_ID</ANY>  
<ANY translate="TRANSLATION_ID"></ANY>  
//变量
<ANY translate="{{toBeInterpolated}}"></ANY>  
<ANY translate>{{toBeInterpolated}}</ANY>   
//attribute
<ANY translate-attr="{ ATTRIBUTE_NAME: 'TRANSLATION_ID' }"></ANY>
//attribute 变量
$scope.attrTranslations = { alt: 'LOGO', title: 'TITLE' };
<ANY translate-attr="::attrTranslations"></ANY>
//attribute 新版写法
<ANY translate-attr-ATTRIBUTE_NAME="TRANSLATION_ID"></ANY>

变量替换

{
  "TRANSLATION_ID": "{{username}} is logged in."
}
//service
$translate('TRANSLATION_ID', { username: 'PascalPrecht' });
//filter
{{ 'TRANSLATION_ID' | translate:'{ username: "PascalPrecht" }' }}
//指令
<ANY translate="TRANSLATION_ID"
     translate-values='{ username: "PascalPrect"}'></ANY>
//or

<ANY translate="TRANSLATION_ID"
     translate-values="{ username: someScopeObject.username }"></ANY>
//or

<ANY translate="TRANSLATION_ID"
     translate-values="{{translationData}}"></ANY>

设置备用语言

比如中文,简体没有设置key,把繁体设置成备用的

$scope.changeLanguage = function (langKey) {
  if (langKey === 'zh-cn') {
    $translate.fallbackLanguage(['zh-hk','zh-mk']);
  } else if (langKey == 'en-us') {
    $translate.fallbackLanguage('en-uk');
  }
  $translate.use(langKey);
};
//这样设置 假如langKey是en  de就会被忽略,fr的话 de en被忽略
$scope.changeLanguage = function (langKey) {
    $translate.fallbackLanguage(['de', 'en', 'fr']);
    $translate.useFallbackLanguage(langKey);
}

类似的语言进行归类

$translateProvider
  .translations('en', { /* ... */ })
  .translations('de', { /* ... */ })
  .registerAvailableLanguageKeys(['en', 'de'], {
    'en_US': 'en',
    'en_UK': 'en',
    'de_DE': 'de',
    'de_CH': 'de',
    //批量设置
    'en_*': 'en',
    'de_*': 'de',
    'en-*': 'en',
    'de-*': 'de',
  
  })
  .determinePreferredLanguage();

持久化(应对F5刷新页面)

有两种配套方案cookie 和 H5的localStorage,既然用了angularjs 估计就是为了兼容低版本浏览器,还是用cookie的方案吧,虽然h5没毛病

    // $ bower install angular-translate-storage-cookie 
    $translateProvider.useCookieStorage();
    // $ bower install angular-translate-storage-local
    $translateProvider.useLocalStorage();

不使用配套方案,自己写一个

app.factory('customStorage', function () {
  return {
    put: function (name, value) {
      // store `value` under `name` somehow
      window.localStorage.setItem(name,value)
    },
    get: function (name) {
      // request value of `name` somehow
      return window.localStorage.getItem(name)||''
    }
  };
});

$translateProvider.useStorage('customStorage');

异步读取语言文件

可以使用requirejs,参考tiny-UI 的多语言使用方法

配套的方式 Using urlLoader

$ bower install angular-translate-loader-url

$translateProvider.useUrlLoader('foo/bar.json');
$translateProvider.preferredLanguage('en');

实际上的请求 foo/bar.json?lang=en

配套的方式 Using staticFilesLoader

$ bower install angular-translate-loader-static-files

//文件名 locale-en.json
 $translateProvider.useStaticFilesLoader({
    prefix: 'locale-',
    suffix: '.json'
});
$translateProvider.preferredLanguage('en');

部分加载

应用有很多模块modules,为了优化性能,我们不需要每次去加载全部的翻译文件

/i18n/home/en.json
/i18n/home/de.json
/i18n/contact/en.json
/i18n/contact/de.json

$ bower install angular-translate-loader-partial

angular.module('home')
//错误处理
.factory('MyErrorHandler', function ($q, $log) {
  return function (part, lang, response) {
    $log.error('The "' + part + '/' + lang + '" part was not loaded.');
    return $q.when({});
  };
})
.config(function ($translateProvider, $translatePartialLoaderProvider) {
    $translatePartialLoaderProvider.addPart('home');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: '/i18n/{part}/{lang}.json',
        loadFailureHandler: 'MyErrorHandler'//配置错误处理
    });
    $translateProvider.preferredLanguage('en');
});

//加载另一个模块,配合ui-router懒加载使用,体验更佳
angular.module('contact')
.controller('ContactCtrl', function ($scope, $translatePartialLoader, $translate) {
  $translatePartialLoader.addPart('contact');
  $translate.refresh();
});
//这样也可以
angular.module('contact').run(function ($rootScope, $translate) {
  $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
    $translate.refresh();
  });
});

运行时懒加载

配置一个loader

$translateProvider.useLoader('customLoader', {
  settingA: 'foobar'
});
$translateProvider.useStaticFilesLoader({
  $http: {
    method: 'POST'
  }
});

使用缓存

$translateProvider.useLoaderCache(true); // default is false which means disable