Localization with AngularJS

Good afternoon, dear Habrazhiteli.

AngularJS is a great framework for building your websites. On Habré, quite a lot has been written about him, but for some reason the topic of application localization has never been touched upon. Nevertheless, localization support is in it and today we will try to deal with it.

There are several ways to localize and we will look at several of them.

Method 1. As in the documentation

The document i18n and l10n states that Angularjs supports the display of dates, numbers and currencies in the form in which users of the respective countries are used to seeing them. This means that when creating an online store, we can write once {{amount | currency}} {{amount | currency}} , connect the necessary locale and not think about how the purchase amount will look for Russia and the United States. AngularJS will do it for you:

')

1 234,56 rub - in Russia

$ 1,234.56 - in the USA

The situation is the same with dates. You can write {{currentDate | date}} and we will see:

Sep 23 2014 - in Russia

Sep 23, 2014 - USA

If you need to use both currencies on the same page, you can temporarily override the designation, clearly indicating the unit of measurement {{amount | currency:"USD$"}} {{amount | currency:"USD$"}} .

An example of working with currencies and dates

 <!doctype html> <html ng-app="testApp"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.js"></script> <!--      --> <!--   --> <!-- <script src="https://code.angularjs.org/1.3.0-rc.2/i18n/angular-locale_en-us.js"></script>--> <!--   --> <script src="https://code.angularjs.org/1.3.0-rc.2/i18n/angular-locale_ru-ru.js"></script> <script> angular.module('testApp', []) .controller('mainController', ['$scope', function($scope){ $scope.amount = 1234.56; $scope.currentDate = new Date(); }]) </script> </head> <body ng-controller="mainController"> <input type="number" ng-model="amount"> <br>   : <span id="currency-default">{{amount | currency}}</span><br>     (USD$): <span>{{amount | currency:"USD$"}}</span><br>  : <span>{{currentDate | date}}</span> </body> </html>

An example on Plunker .

For some text transformations, the developers recommend using ngPluralize , but for simple localization of the application this will not help us much.

Method 2. Bike

Suppose that we have two files with translations stored in json format.

translation_en.json

 { "COLOR" : "", "HELLO" : "", "HELLO_HABR" : " !" }

translation_en.json

 { "COLOR" : "Color", "HELLO" : "Hello", "HELLO_HABR" : "Hello Habrahabr!" }

And we want these messages to be displayed on the page depending on which language the user chooses. To do this, create the application myApp .

angularApp.js

 var app = angular.module('myApp', ['ngResource']);

And the service translationService , which will download us these files.

angularTranslationService.js

 app.service('translationService', function($resource) { this.getTranslation = function($scope, language) { var languageFilePath = 'translation_' + language + '.json'; console.log(languageFilePath); $resource(languageFilePath).get(function (data) { $scope.translation = data; }); }; });

We will also create a myController controller to which we will connect this service:

angularController.js

 app.controller('myController',['$scope', 'translationService', function ($scope, translationService){ // ,      $scope.translate = function(){ translationService.getTranslation($scope, $scope.selectedLanguage); }; //  $scope.selectedLanguage = 'en'; $scope.translate(); }]);

And the very test provision index.html , in which we include all the scripts.

In order to display the translation text, it is necessary to describe it as follows:

{{translation.HELLO_HABR}}

Please note that in addition to angular.js we also connect angular-resource.js to work with resources.

index.html

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-resource.min.js"></script> <script src="angularApp.js"></script> <script src="angularController.js"></script> <script src="angularTranslationService.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myController"> <section> <h4>Select language for translation:</h4> <select ng-change="translate()" ng-model="selectedLanguage"> <option value="en">English</option> <option value="ru"></option> </select> </section> <h4> : <strong>{{selectedLanguage}}</strong></h4> <h4> :</h4> <p> {{translation.HELLO_HABR}} </p> </div> </body> </html>

We get the result:

You can see a working example here .

Method 3. Correct

What does the world community offer us to solve the localization issue? I found only two large projects with good documentation. This is Angular-Translate and Angular-Gettext .

An example of using Angular-Translate

 var app = angular.module('at', ['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); }; });

An example of using Angular-Gettext

 angular.module("myApp").controller("MyCtrl", function ($scope, gettextCatalog) { // Do things with gettextCatalog });

I personally like Angular-Gettext . Translation in it is carried out in several steps:

We create a site completely in one language;
We add the word translate in html next to the lines that need to be translated;
Use angular-gettext tools to generate the “po” template;
We translate into all the languages we need using Poedit . Although it is better to give the transfer to professionals;
We connect gettext and templates;
We use

With Angular-Translate you have to write all the translations in files.

Conclusion

Today we invented the bicycle for educational purposes. But you cannot use such code in real projects. Using well-developed libraries is good. Which one to choose is up to you. Each deserves a separate article and has its own characteristics. In the following posts, I will describe each of them in more detail.

Thank you for your attention and successful development and localizations!

Links

Locale support files for version 1.3.0-rc2 can be found here ;

1st example at Plunker ;

2nd example at Plunker ;

Angular gettext ;

Angular-Translate .

Source: https://habr.com/ru/post/237867/

All Articles