AngularJS Example

by oterral

HTML

<script src="http://rawgithub.com/PascalPrecht/bower-angular-translate-interpolation-messageformat/master/angular-translate-interpolation-messageformat.min.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/messageformat.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/locale/de.js"></script>
<script src="http://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="http://rawgithub.com/angular/bower-angular-cookies/master/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="http://rawgithub.com/PascalPrecht/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.min.js"></script>
<script src="http://rawgithub.com/PascalPrecht/bower-angular-translate-storage-local/master/angular-translate-storage-local.min.js"></script>
<script src="http://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.min.js"></script>
<script src="http://rawgithub.com/PascalPrecht/bower-angular-translate-handler-log/master/angular-translate-handler-log.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
    <button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button>
    <h1 translate="TITLE"></h2>
    <p translate="FOO"></p>
      
      
    <br/><br/><br/><br/><br/>
    <div ng-click="isDivShown = !isDivShown" translate>FOO</div>
    <div ng-show="isDivShown">ng-click works!!!!</div>
  </div>
</div>

JavaScript

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

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

  $translateProvider.translations('de', {
    'TITLE': 'Hallo',
    'FOO': 'Dies ist ein Paragraph',
    'BUTTON_LANG_EN': 'englisch',
    'BUTTON_LANG_DE': 'deutsch'
  });

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

app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {

  $scope.changeLanguage = function (langKey) {
    $translate.uses(langKey);
  };
}]);