Introduction
Localization and internationalization is common requirement of large organizations to create website or web application that is available in multiple countries.
What is Localization?
Localization is the adaptation of a product or service (i.e. website, web application) to meet the needs of a particular language, culture or desired population's "look-and-feel”.
Angular Localization
You can use Localization module for your angular app to add localization feature in your application for multiple languages.
Localizable pluralization is supported via the ngPluralize directive.Additionally, you can use MessageFormat extensions to $interpolate for localizable pluralization and gender support in all interpolations via the ngMessageFormat module.
All localizable Angular components depend on locale-specific rule sets managed by the $localeservice.
Following are steps some steps required to add localization in your application,
1. You have to download libraries and include them in the project.
2. Then provide translation files and set them working.
3. In this step change angular $locale after the language change.
Simple example
Add three views one for home page another two for English US and German language.
1. Create main view named "Home.html" and other two views(english and german) named "index.html" under en_us/de_de folder.
2. Add angular js file.
3. Add AngularJS English localization file in english view.
4. Add AngularJS German localization file in german view.
5. Add AngularJS model and controller code.
Home View
<!DOCTYPE html>
<html>
<body>
<div ng-app="mainApp" ng-controller="myLocalizationController">
<h3>Select the localization:</h3>
<a href="en_us/">English (USA)</a><br />
<a href="de_de/">German (Germany)</a>
</div>
</body>
</html>
English View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../Content/js/angular.min.js"></script>
<script src="../Content/js/angular-locale_en-us.js"></script>
<script src="../Content/js/LocalizationController.js"></script>
<title>English Employee Data</title>
</head>
<body>
<div ng-app="mainApp" ng-controller="myLocalizationController">
User Name:{{Employee.Name | uppercase}}
<!--date -->
Birth Date:{{Employee.BirthDate | date:'medium' }}
<!--number -->
Package:{{Employee.Package | number }}
<!--currency -->
<p>Payment: {{Employee.Payment | currency}}</p>
</div>
</body>
</html>
German View
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../Content/js/angular.min.js"></script>
<script src="../Content/js/angular-locale_de-de.js"></script>
<script src="../Content/js/LocalScript.js"></script>
<title>German Employee Data</title>
</head>
<body ng-app="mainApp">
<div ng-controller="myLocalizationController">
User Name:{{Employee.Name | uppercase}}
<!--date -->
Birth Date:{{Employee.BirthDate | date:'medium' }}
<!--number -->
Package:{{Employee.Package | number }}
<!--currency -->
<p>Payment: {{Employee.Payment | currency}}</p>
</div>
</body>
</html>
AngularJS Controller and Model Code
angular.module("mainApp", ["ngLocale"])
.controller("myLocalizationController", function ($scope, $locale) {
// Store the current locale ID in a variable
$scope.localeId = $locale.id;
// Store the current date/time in a variable
$scope.currentDate = new Date();
$scope.Employee = {
id: 1,
Name: 'Shourya Kendre',
BirthDate: dateOut,
Package: 52503.30,
Payment: 700
};
});
धन्यवाद मित्रानो, आपला प्रत्येक दिवस आनंदी आणि सुखी जावो