Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Localization of AngularJS Applications

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
 
      };
  });

 धन्यवाद मित्रानोआपला प्रत्येक दिवस आनंदी आणि सुखी जावो  

Invalid entry,please enter valid data.

Loading