AngularJS - SPLessons

AngularJS Internationalization

Chapter 32

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Internationalization

AngularJS Internationalization

shape Description

AngularJS Internationalization is possible by numbers and dates done internally.

Filter Internationalization

shape Description

Few of the AngularJS filters gives foundation to internationalization. For example, currency and date filters support for internationalization like below.

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

Date Filter

The filter takes the below values defining the way to format the date.

  • short
  • medium
  • shortDate
  • mediumDate
  • longDate
  • fullDate
  • shortTime
  • mediumTime

For example,

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

Currency Filter

The currency symbol will be used while performing filter on currency terms depending on the selected locale. For Example,

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

Number Filter

This filter prepares numbers depending on the selected locale. For example,

{{ theValue | number }}

Locale Setting

shape Description

To initiate locale (language and country) to AngularJs, include the respective AngularJS locale file. Below example shows the way to include the Danish locale.

<script src=”https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js”></script>

shape Description

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AngularJS Routes example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
    <script src="https://code.angularjs.org/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>

Summary

shape Key Points

  • AngularJS Internationalization refers to setting the date, time or currency as per the local standards.
  • Data, Currency and Number filter supports Internationalization.