AngularJS Translate

Creating multilingual support using AngularJS

Angular Translate

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

1. Bower

  "dependencies": {
    "angular-translate": "2.6.x",
    "angular-translate-loader-static-files": "2.6.x",
    "angular-translate-storage-cookie": "2.6.x",
  }

2. App.js

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

myApp.config(['$translateProvider', function($translateProvider){
  $translateProvider.useStaticFilesLoader({
    prefix: 'locale/',
    suffix: '.json'
  });
  $translateProvider.preferredLanguage('en_US');
  $translateProvider.useCookieStorage();
  $translateProvider.storageKey('lang');
}]);

3. index.html

  <script type="text/javascript" src="bower_components/angular-translate/angular-translate.js"></script>
  <script type="text/javascript" src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
  <script type="text/javascript" src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script> 

4. Locales

locale/ca_ES.json
locale/en_US.json

Format dels locales:

{
"SERVER": "Server",
...
"load" : {
  "base" : {
    "ENGLISH": "English",
    "CATALAN": "Catalan",
    "SPANISH": "Spanish"
  },
  "party" : {
   "PARTIES": "Parties",
...
  },
  "product" : {
   "PRODUCTS": "Productes",
...
  }
}
}

5. Plantilla

<h1 translate="load.product.PRODUCTS">Products</h1>
{{ 'load.party.PARTIES' | translate }}

AngularJS/Translate (last edited 2015-05-05 17:01:35 by resteve)

Contenidos creados por el equipo de Zikzakmedia. Creative Commons By-NC-SA

PythonZikzakmedia