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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.