python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions