前端- angularjs i18n

前端- angularjs i18n

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

quick start

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
'TITLE': 'Hello',
'FOO': 'This is a paragraph'
});

$translateProvider.translations('de', {
'TITLE': 'Hallo',
'FOO': 'Dies ist ein Absatz'
});

$translateProvider.preferredLanguage('en');
}]);

<h1>{{ 'TITLE' | translate }}</h1>
<p>{{ 'FOO' | translate }}</p>

loader

如何加载translation 文件

2 asynchronous loaders, urlLoader and staticFilesLoader.

eg staticFilesLoader

• prefix （prefix + suffix）指定transalation assets 目录

$translateProvider.useStaticFilesLoader({files:[
   {
      prefix: 'xxx/translations-',
       suffix: '.json?preventCache=' +new Date().getTime()
   },
   {
       prefix: 'xxx/translations-',
       suffix: '.json?preventCache=' +new Date().getTime()
   }           
]});

会从后台web server load transltion 文件

Translate

angular-translate provides several ways to translate the contents of your app

$translate service

  app.controller('Ctrl', ['$translate', function ($translate) {
     $translate('HEADLINE').then(function (headline) {
    $scope.headline = headline;
  }, function (translationId) {
    $scope.headline = translationId;
});
  }]);

translate filter

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

translate directive - recommended

<ANY translate>TRANSLATION_ID</ANY>
<ANY translate="TRANSLATION_ID"></ANY>

fallback

$translateProvider
  .translations('de', { /* ... */ })
  .translations('en', { /* ... */ })
  .translations('fr', { /* ... */ })
  .fallbackLanguage(['en', 'fr']);

如果找不到在locale对应的翻译文件中找不动，会使用fall back

---

how to detect locale

client side

Modern browsers provide a navigator.languages object that we can use to get all the preferred languages the user has set in his or her browser.

server side

Accept-Language HTTP Header

If the user sets his or her language preferences in a modern browser, the browser will, in turn, send an HTTP header that relays these language preferences to the server with each request. This is the Accept-Language header, and it often looks something like this: Accept-Language: en-CA,ar-EG;q=0.5.