angularjs i18n and L10n language translation

angularjs i18n and L10n language translation

The i18n stand for Internationalization. This is the process to developing a product for global languages.

The L10n stand for Localization. This is the process to developing a product for particular cultural or languages.
How does Angular support i18n/l10n?

In Angularjs, The i18n and L10n are supporting  to filters to the date, number and currency.


The en-US, en-AU etc. are all valid locale Ids that contain the both language code and country code(for example en is language code and US is a country code.).

The code sample as give below.

<!doctype html>
<head>
  <meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
  <script src="//rawgithub.com/angular-translate/bower-angular-translate/master/angular-translate.min.js"></script>
  <script>
    var app = angular.module('app', ['pascalprecht.translate']);

app.config(function($translateProvider) {

    $translateProvider.translations('en', {
        title: 'clicked on english language',
        name: 'this.name',
        button_lan_en: 'english',
        button_lan_de: 'german'
    });

    $translateProvider.translations('de', {
        title: 'clicked on deutsch language',
        name: 'this.name',
        button_lan_en: 'english',
        button_lan_de: 'deutsch'
    });

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

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

    $scope.changeCurrentLang = function(key) {
        $translate.use(key);
    };

});
</script>
</head>

<body ng-app="app">
  <div class="row">
    <h1>i18n and L10n angularjs language translation </h1>
    <div>
      <div>
        <h2 translate="title"></h2>
      </div>
      <div ng-controller="i18ncontroller">
        <button ng-click="changeCurrentLang('en')" translate="button_lan_en">English language</button>
        <button ng-click="changeCurrentLang('de')" translate="button_lan_de">German language</button>
      </div>
    </div>
  </div>
</body>
</html>

Output look like below display Image.







ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^