AngularJS Internationalization

Internationalization is a means of adapting the computer software to the various languages, regional differences and technical requisitions of a particular target market. It refers to the process of designing a software application so that it can be made adaptable to various languages and regions without any major engineering changes.

Why?

Well, if you are expected to deliver a software to a country which is located all across the globe unaware of the language that you are using, you may put the client in a fix. It would be pointless to make something that cannot be understood by the person on the other end just because it might not be in their regional language.

To eliminate these hassles and issues, the concept of Internationalization comes up with focus towards the locale requirements. And having said that, the factors of currency and numbers also matter. While the receiver of the software might be handling with a whole different currency, you might have just complicated his efforts by putting in the currency factors of your area. Hence, Internationalization is very essential and AngularJS makes it simple under this very aspect.

AngularJS has Internationalization as an inbuilt feature. It supports three types of filters. They are:

  • Currency
  • Date
  • Numbers

You do not have to take up the complications of handling the locale of the browser. AngularJS takes care of that for you by default. All you need to do is incorporate the corresponding js with respect to the locale of the country.

For example, if you intend to use the Danish locale, you can use the following script.

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

Example using Browser's locale

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


Next ConceptTodo Application