AngularJS Example

HTML

<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/messageformat.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/locale/de.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="http://rawgithub.com/SlexAxton/messageformat.js/master/locale/fr.js"></script>
<script src="http://rawgithub.com/angular/bower-angular-cookies/master/angular-cookies.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-interpolation-messageformat/master/angular-translate-interpolation-messageformat.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-storage-cookie/master/angular-translate-storage-cookie.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-storage-local/master/angular-translate-storage-local.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.min.js"></script>
<script src="http://rawgithub.com/angular-translate/bower-angular-translate-handler-log/master/angular-translate-handler-log.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="Ctrl">
    <p translate="VARIABLE_REPLACEMENT"></p>
  </div>
</div>

JavaScript

var translations = {
  HEADLINE: 'What an awesome module!',
  PARAGRAPH: 'Srsly!',
  PASSED_AS_TEXT: 'Hey there! I\'m passed as text value!',
  PASSED_AS_ATTRIBUTE: 'I\'m passed as attribute value, cool ha?',
  PASSED_AS_INTERPOLATION: 'Beginners! I\'m interpolated!',
  VARIABLE_REPLACEMENT: 'Hi, {{name}}'
};

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

app.config(['$translateProvider', function ($translateProvider) {
  // add translation table
  $translateProvider
    .translations('en', translations)
    .preferredLanguage('en');
}]);

app.controller('Ctrl', ['$scope', function ($scope) {
    $scope.myname = "Christian";
    
    $scope.changeName = function(){
        $scope.myname = "Bidule";
    }
    
}]);