AngularJS $locale service
Last Updated :
31 Jan, 2023
The AngularJS $locale service is a built-in service that provides localization information for the current browser environment. It is designed to help developers create applications that can be easily adapted to different locales and languages. The $locale service exposes a number of properties that can be used to format dates, numbers, and currencies according to the conventions of the current locale. For example, the DATETIME_FORMATS property provides access to various formats for dates, times, and dates and times, such as the fullDate, longDate, medium, short, and mediumTime formats. The $locale service also provides access to the NUMBER_FORMATS property, which contains formats for numbers, such as the decimal, percent, and currency formats.
In addition to formatting, the $locale service can be used to determine the rules for parsing and validating dates, numbers, and currencies. For instance, the parseDate function can be used to parse a string into a Date object, and the isDate() function can be used to determine if a value is a valid date.
Syntax:
angular.module('myApp', ['ngLocale'])
.controller('MyController', ['$locale', function($locale) {
// Use the $locale service here
}]);Parameter: The AngularJS $locale service does not take any parameters.
It is a simple service that exposes a number of properties and functions that provide localization information and formatting functions for the current browser environment. Here is a list of some of the properties and functions provided by the $locale service:
- DATETIME_FORMATS: an object containing various formats for dates, times, and dates and times, such as the fullDate, longDate, medium, short, and mediumTime formats.
- NUMBER_FORMATS: an object containing formats for numbers, such as the decimal, percent, and currency formats.
- parseDate(string): a function that parses a string into a Date object.
- isDate(value): a function that determines if a value is a valid date.
- parseNumber(string): a function that parses a string into a number.
- isNumber(value): a function that determines if a value is a valid number.
Approach 1: In this approach, the $locale service is injected into the controller and used to retrieve the shortDate and currency formats for the vm.date and vm.number variables, respectively. The formatted values are then displayed in the HTML template using expressions such as {{ vm.date | date:vm.dateFormat }} and {{ vm.number | number:vm.numberFormat }}.
Example 1: This example will display the current date and a number in the short date and currency formats, respectively, as defined by the conventions of the current locale.
HTML
<!doctype html>
<html ng-app="myApp">
<head>
<style>
.container {
width: 500px;
margin: 0 auto;
text-align: center;
}
h1 {
color: green
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$locale', function ($locale) {
var vm = this;
vm.date = new Date();
vm.number = 12345.678;
vm.dateFormat = $locale.DATETIME_FORMATS.shortDate;
vm.numberFormat = $locale.NUMBER_FORMATS.currency;
}]);
</script>
</head>
<body ng-controller="MyController as vm">
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>AngularJS $locale service</h3>
<div>
Current date: {{ vm.date | date:vm.dateFormat }}
</div>
<div>
Example number: {{ vm.number | number:vm.numberFormat }}
</div>
</div>
</body>
</html>
Output:
Approach 2: In this approach, we define an AngularJS app and controller that uses the $locale service to format a currency and display it in different locales. The $locale service is injected into the controller, and we use it to access the currency format patterns for the current locale. We create a scope variable currencyFormat to hold the format patterns for currency, including the symbol, number of fractional digits, and separators. We also created a localeId variable to hold the current locale and a changeLocale function which updates the currencyFormat based on the selected locale.
Example 2: This is another example that illustrates the AngularJS $locale service.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<style>
h1 {
color: green
}
button {
color: white;
background-color: black;
height: 30px;
width: 130px;
padding: 3px;
margin: 5px;
border-radius: 5px;
}
select {
display: block;
width: 200px;
padding: 5px 15px;
margin: 5px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js">
</script>
<script>
var app = angular.module("myApp", ['ngLocale']);
app.controller("MyController", function($scope, $locale) {
$scope.currency = 12345.6789;
$scope.localeId = 'en-us';
$scope.currencyFormat = {
symbol: '$',
fraction: 3,
symbolOnLeft: true,
spaceBetweenAmountAndSymbol: true,
decimal: $locale.NUMBER_FORMATS.DECIMAL_SEP,
thousands: $locale.NUMBER_FORMATS.GROUP_SEP
};
$scope.changeLocale = function(){
$locale.id = $scope.localeId;
$scope.currencyFormat.decimal =
$locale.NUMBER_FORMATS.DECIMAL_SEP;
$scope.currencyFormat.thousands =
$locale.NUMBER_FORMATS.GROUP_SEP;
if($scope.localeId === 'fr-fr'){
$scope.currencyFormat.symbol = '€';
}else if($scope.localeId === 'de-de'){
$scope.currencyFormat.symbol = '€';
}else{
$scope.currencyFormat.symbol = '$';
}
}
});
</script>
</head>
<body ng-controller="MyController">
<center>
<h1> GeeksforGeeks</h1>
<h3> AngularJS $locale service</h3>
<label>Change Locale:</label>
<select ng-model="localeId"
ng-change="changeLocale()">
<option value="en-us">
English (United States)
</option>
<option value="fr-fr">
French (France)
</option>
<option value="de-de">
German (Germany)
</option>
</select>
<br>
<label>Currency:</label>
<span>
{{currency | currency:currencyFormat.symbol:currencyFormat.fraction:currencyFormat.symbolOnLeft:currencyFormat.spaceBetweenAmountAndSymbol:currencyFormat.decimal:currencyFormat.thousands}}
</span>
</center>
</body>
</html>
Output:
Similar Reads
AngularJS $location Service
The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
Angular.js $log Service
The $log service in Angular.js is simply used for logging purposes on the browser console. It is used for the debugging and troubleshooting of the error in the code. It has various implementations like a log, warn, info, error, and debugging, and all the names suggest. It is used for logging, warnin
5 min read
AngularJS $compile Service
The $compile service in AngularJS is used to compile an HTML template into a function that can be used to link the template to a scope. This service is typically used to compile dynamic templates that are generated on the fly, such as templates that are loaded from the server or created by a directi
4 min read
AngularJS $parse Service
The $parse service in AngularJS is a function that takes an expression string and returns a function that can be used to parse and evaluate the expression. The expression string can contain variables, operators, and function calls. To use the $parse service, you first need to inject it into your Ang
3 min read
AngularJS $document Service
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $document serv
3 min read
AngularJS $controller Service
AngularJS applications depend on a controller to control the flow of data through an AngularJS application. AngularJS architecture uses the MVC model i.e the Model View Controller. The model is responsible for maintaining the application data, the View for displaying data or some part of data to the
5 min read
AngularJS $interval Service
The $interval service in AngularJS is a function that allows you to execute a function repeatedly at a specified interval. It is similar to the setInterval function in JavaScript, but it is designed to work seamlessly with the AngularJS framework. To use the $interval service, it is first needed to
4 min read
AngularJS $rootElement service
The AngularJS $rootElement service is a global service that provides a reference to the root element of the AngularJS application. This can be useful in a variety of scenarios, such as modifying the root element's class name or attributes, or traversing the root element's descendants. Syntax: The sy
3 min read
AngularJS $cacheFactory Service
The $cacheFactory service in AngularJS is a factory function that creates new instances of the Cache object, which is a simple in-memory cache that stores key-value pairs. The Cache object is useful for storing data that is expensive to retrieve, such as data that comes from a server or data that is
5 min read
AngularJS $exceptionHandler Service
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $exceptionHand
4 min read