Microsoft Dot Net Master

Microsoft Dot Net Master
Microsoft Dot Net Master

Monday, March 9, 2015

AngularJS - Internalization

AngularJS supports inbuilt internationalization for three types of filters : Currency, Date, and Numbers. We only need to incorporate corresponding java script according to locale of the country. By default, it considers the locale of the browser. For example, for Danish locale, use the following script:
<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 

Example Using Danish Locale

testAngularJS.htm

<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.2.15/angular.min.js"></script>
   <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 
   <script>
      var mainApp = angular.module("mainApp", []);
     
      mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
   $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
      });
      
   </script>
</body>
</html>

Output

Open the file testAngularJS.htm in a web browser and see the result.
AngularJS Internalization

Example Using Browser Locale

testAngularJS.htm

<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.2.15/angular.min.js"></script>
   <!-- <script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> -->
   <script>
      var mainApp = angular.module("mainApp", []);
     
      mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
   $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
      });
      
   </script>
</body>
</html>

Output

Open the file testAngularJS.htm in a web browser and see the result.
AngularJS Internalization

No comments:

Post a Comment