Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head><script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script>
 
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.rawgit.com/SlexAxton/messageformat.js/v1.0.2/messageformat.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-cookies.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-sanitize.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.15.2/angular-translate.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-interpolation-messageformat/2.15.2/angular-translate-interpolation-messageformat.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-cookie/2.15.2/angular-translate-storage-cookie.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-storage-local/2.15.2/angular-translate-storage-local.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-url/2.15.2/angular-translate-loader-url.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-loader-static-files/2.15.2/angular-translate-loader-static-files.js"></script>
    <script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate-handler-log/2.15.2/angular-translate-handler-log.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Lesson</title>
</head>
<body >  
  <div class="container" ng-controller="myCtrl">
    <div class="well"> 
      <h4>Language: {{ lang }}</h4>
      <p>
        <button class="btn btn-info" ng-click="change('en')">EN</button>
        <button class="btn btn-info" ng-click="change('it')">IT</button>
      </p> 
      <h3 translate="PLURAL" translate-values="{ NUM: 6}" translate-interpolation="messageformat"></h3>
      
      <!--
      <h3>{{ 'HELLO' | translate }}</h3>
      <h3 translate="CAT1.hello"></h3>
      -->
      
      
      
    </div>
  </div> 
​
</body>
</html>
 
angular.module("myApp", ['pascalprecht.translate'])
​
.config(['$translateProvider', function($translateProvider) {
  $translateProvider.translations('en', {
    HELLO: 'Hello World!',
    CAT1: {
      hello: 'Helloooo',
    },
    PLURAL: '{NUM, select, 0{none} 1{one} other{there are { NUM } items} }' 
  });
  $translateProvider.translations('it', {
    HELLO: 'Ciao Mondo!',
    CAT1: {
      hello: 'Ciaooo' 
    }
  
  }); 
  $translateProvider.preferredLanguage('en');
  $translateProvider.addInterpolation("$translateMessageFormatInterpolation");
​
}])
.controller("myCtrl", ['$scope', '$translate', function($scope, $translate) {
  $scope.lang = 'en';
  $scope.change = function(l) {
    $scope.lang = l;    
    $translate.use(l);
  }
  $scope.items = 0;
  
}]);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
gmitticapro
0viewers