JSFiddle - React, Tailwind, and code Playground

by Roman Zhak

HTML

<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.4.0/angular-translate.min.js"></script>
  <div class="span4">
    <div class="well">
       <h2 translate="TITLE">Hello</h2>
          <p translate="FOO">This is a paragraph</p>
       </div>
        <div ng-controller="Ctrl">
         <button 
            class="btn" 
            ng-click="changeLanguage('en')" 
            translate="BUTTON_LANG_EN" 
            class="ng-scope">english</button>
         <button 
            class="btn" 
            ng-click="changeLanguage('de')" 
            translate="BUTTON_LANG_DE" 
            class="ng-scope">german</button>
     </div>
  </div>

CSS

.span4 {
  width: 300px;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

JavaScript

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

app.config(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', function ($scope, $translate) {
  $scope.changeLanguage = function (key) {
    $translate.use(key);
  };
});

angular.bootstrap(document, ['demo']);