參考: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>
 

服務(wù)商

app.config(['$translateProvider',function($translateProvider){
    //配置英文 key為en
    $translateProvider.translations('en', {
    GREETING: 'Hello world!'
    });
    // 配置中文  key 為cn
    $translateProvider.translations('cn', {
    GREETING: '你好'
    });
    //設(shè)置默認(rèn)語(yǔ)言為中文,手動(dòng)設(shè)置
    $translateProvider.preferredLanguage('cn');



    //統(tǒng)一語(yǔ)言標(biāo)簽,作用于determinePreferredLanguage方法之前(必要的,要么就不要設(shè)置)
    //$translateProvider.uniformLanguageTag('bcp47')
    //從下面地址自動(dòng)獲取首選語(yǔ)言,并設(shè)置成默認(rèn)語(yǔ)言
    // navigator.languages[0]
    // navigator.language
    // navigator.browserLanguage
    // navigator.systemLanguage
    // navigator.userLanguage
    // $translateProvider.determinePreferredLanguage();  





}])

服務(wù)

app.controller('Ctrl', ['$translate,$scope', function ($translate,$scope) {
    //運(yùn)行時(shí)修改語(yǔ)言
 $scope.changeLanguage=function(languageKey){
     $translate.use(languageKey)
 }
}]);

過(guò)濾器

<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 新版寫(xiě)法
<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>

設(shè)置備用語(yǔ)言

比如中文,簡(jiǎn)體沒(méi)有設(shè)置key,把繁體設(shè)置成備用的

$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);
};
//這樣設(shè)置 假如langKey是en  de就會(huì)被忽略,fr的話 de en被忽略
$scope.changeLanguage = function (langKey) {
    $translate.fallbackLanguage(['de', 'en', 'fr']);
    $translate.useFallbackLanguage(langKey);
}

類似的語(yǔ)言進(jìn)行歸類

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

持久化(應(yīng)對(duì)F5刷新頁(yè)面)

有兩種配套方案cookie 和 H5的localStorage,既然用了angularjs 估計(jì)就是為了兼容低版本瀏覽器,還是用cookie的方案吧,雖然h5沒(méi)毛病

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

不使用配套方案,自己寫(xiě)一個(gè)

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');

異步讀取語(yǔ)言文件

可以使用requirejs,參考tiny-UI 的多語(yǔ)言使用方法

配套的方式 Using urlLoader

$ bower install angular-translate-loader-url

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

實(shí)際上的請(qǐng)求 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');

部分加載

應(yīng)用有很多模塊modules,為了優(yōu)化性能,我們不需要每次去加載全部的翻譯文件

/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')
//錯(cuò)誤處理
.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'//配置錯(cuò)誤處理
    });
    $translateProvider.preferredLanguage('en');
});

//加載另一個(gè)模塊,配合ui-router懶加載使用,體驗(yàn)更佳
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();
  });
});

運(yùn)行時(shí)懶加載

配置一個(gè)loader

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

使用緩存

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