Angularjs – Internationalization

Angularjs mainly support three kinds of filter .They are currency, number and dates. Today, several web applications need to support multiple languages. The process of building in this accept in a part of the software can be split in two parts so we, getting it technically ready to support multiple languages or region, and getting it ready for a particular language or region. The first part is called internationalization, usually abbreviated to i18n. The second part is called localization, abbreviated L10.   We only want to incorporate similar JS according to the locale of the country. In internationalization access by default it handles the locale of the browser. For example, to use Browser’s locale, use the following script.

script src="https://j2eebrain.com/1.2.5/i18n/angular-locale_da-dk.js"></script>

Example using Browser’s locale

<html>
<head>
   <title>Angular JS Forms</title>
</head>
<body>
   <h2>AngularJS First Application</h2>
   <div ng-app="mainApp" ng-controller="StudentController">
      {{fees | currency }}  <br/><br/>
      {{admissiondate | date }}   <br/><br/>
      {{rollno | number }} 
   </div>
   <script src="http://ajax.j2eebrain.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <!-- <script src="https://j2eebrain.com/1.3.14/i18n/angular-locale_da-dk.js"></script> -->
   <script>
      var mainApp = angular.module("mainApp", []);
 
      mainApp.controller('StudentController', function($scope) {
            $scope.fees = 400;
                                    $scope.admissiondate  = new Date();
            $scope.rollno = 36536;
      });
 
   </script>
</body>
</html>

Internationalization in Filters

Some of the make in AngularJS filters supports internationalization. For example, the date and currency filters have made in support for internationalization. Here some example gives how you would normally use these filters:

{{ theDate  | date: 'fullDate' }}
{{ theValue | currency }}
{{ theValue | number }}

The date filter will format the variable theDate as a date according to the locale selected in the web applications.

The Date Filter

The date filter accepts the following values defining how to format the date:

  • short
  • medium
  • fullDate
  • shortDate
  • mediumDate
  • longDate
  • shortTime
  • mediumTime
READ  AngularJS HTML DOM

Example;

{{ theDate  | date: 'shortDate' }}
 {{ theDate  | date: 'longDate'  }}

Currency Filter

Currency filter is used for currency symbol relate with the chosen locale when formatting a number as a currency. If you want to use another currency symbol, for example if the users need to look a price in a different type currency so you can specify the currency symbol to the currency filter such as:

{{ theValue | currency : '$' }}
{{ theValue | currency : '£' }}
{{ theValue | currency : '€' }}

Number Filter

Number filter is used for formatting number according to the chosen locale. For example, in English use the million separators is, and the decimal separator is, whereas in Danish it is the different. Example;

{{ theValue | number }}

How Setting the Locale in AngularJS 

First of all to tell AngularJS what locale like language and country to use when the writing localized output, then you want to involve the corresponding AngularJS locale file. Here is an example that involves the Danish locale:

<script src="https://j2eebrain.com/1.2.5/i18n/angular-locale_da-dk.js"></script>

After including the AngularJS main JavaScript file, and always work out of the box. So, there is nothing more that needs to be done than including this file.

Complete AngularJS Internationalization Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS Routes example</title>
    <script src="https://ajax.j2eebrain.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://j2eebrain.com/1.2.5/i18n/angular-locale_da-dk.js"></script>
</head>
 
<body ng-app="myapp">
AngularJS I18n
 
<div ng-controller="mycontroller">
    {{theDate  | date : "fullDate"}} <br/>
    {{theValue | currency }}
</div>
<script>
    var module  = angular.module("myapp", []);
 
    module.controller("mycontroller", function($scope) {
 
        $scope.theDate  = new Date();
        $scope.theValue = 123.45;
 
    });
</script>
 
</body>
</html>

Adding i18n in Internationalization

To add i18n in internationalization follows these steps:

Step 1: We have to download libraries and include the project.

READ  AngularJS Expression

Step 2: Then we will need to allow translation files and set them working.

Step 3: We will moderate Angular $locale after the language change.

Step 4: We need to have the drop-down with the list of languages to select from.

Step 5: Finally, the selected language should be stored and applied the page reloads.