Hi rani,
AngularJS supports inbuilt internationalization for three types of filters : Currency, Date and Numbers.
For that you need to add corresponding java script according to locale of the country. By default it considers the locale of the browser.
Using angular-locale
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.14/i18n/angular-locale_en-us.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope) {
$scope.Fees = 1000;
$scope.Date = new Date();
$scope.Price = 123.45;
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
Fees : {{Fees | currency }}<br />
Date : {{Date | date }}<br />
Price : {{Price | number }}
</div>
</body>
</html>
For local script files refer below link.
https://github.com/angular/bower-angular-i18n
Using angular-translate
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS Internationalization</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.7.1/angular-translate.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['pascalprecht.translate']);
app.controller('MyController', function ($scope, $translate) {
$scope.ChangeLanguage = function () {
var language = $translate.use();
if (language === 'ENGLISH') {
$translate.use('HINDI');
} else {
$translate.use('ENGLISH');
}
};
});
app.config(function ($translateProvider) {
$translateProvider.translations('ENGLISH', {
'Greetings': 'Hello, I am Mudassar Khan',
'Introduction': 'I am the founder of this site, and also work as an Independent Consultant. I completed my graduation from Mumbai University with Bachelor’s Degree in Computer Engineering.',
'Message': 'Click here to change language from english to hindi',
'ButtonText': 'Change Language'
});
$translateProvider.translations('HINDI', {
'Greetings': 'हैलो, मैं मुदस्सर खान हूं',
'Introduction': 'मैं इस साइट के संस्थापक हूँ, और यह भी एक स्वतंत्र सलाहकार के रूप में काम करते हैं। मैं कंप्यूटर इंजीनियरिंग में स्नातक की डिग्री के साथ मुंबई विश्वविद्यालय से अपनी स्नातक स्तर पूरा किया।',
'Message': 'अंग्रेजी से हिंदी में भाषा बदलने के लिए यहां क्लिक करें',
'ButtonText': 'भाषा बदलो'
});
$translateProvider.preferredLanguage('ENGLISH');
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<p>{{'Greetings'|translate}}</p>
<p>{{'Introduction'|translate}}</p>
<p>{{'Message'|translate}}</p>
<p><button type="button" ng-click='ChangeLanguage()'>{{'ButtonText'|translate}}</button></p>
</div>
</body>
</html>
Demo
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AngularJS Internationalization</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.14/i18n/angular-locale_en-us.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.7.1/angular-translate.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['pascalprecht.translate']);
app.controller('MyController', function ($scope) {
$scope.Fees = 1000;
$scope.Date = new Date();
$scope.Price = 123.45;
});
app.controller('MyController1', function ($scope, $translate) {
$scope.ChangeLanguage = function () {
var language = $translate.use();
if (language === 'ENGLISH') {
$translate.use('HINDI');
} else {
$translate.use('ENGLISH');
}
};
});
app.config(function ($translateProvider) {
$translateProvider.translations('ENGLISH', {
'Greetings': 'Hello, I am Mudassar Khan',
'Introduction': 'I am the founder of this site, and also work as an Independent Consultant. I completed my graduation from Mumbai University with Bachelor’s Degree in Computer Engineering.',
'Message': 'Click here to change language from english to hindi',
'ButtonText': 'Change Language'
});
$translateProvider.translations('HINDI', {
'Greetings': 'हैलो, मैं मुदस्सर खान हूं',
'Introduction': 'मैं इस साइट के संस्थापक हूँ, और यह भी एक स्वतंत्र सलाहकार के रूप में काम करते हैं। मैं कंप्यूटर इंजीनियरिंग में स्नातक की डिग्री के साथ मुंबई विश्वविद्यालय से अपनी स्नातक स्तर पूरा किया।',
'Message': 'अंग्रेजी से हिंदी में भाषा बदलने के लिए यहां क्लिक करें',
'ButtonText': 'भाषा बदलो'
});
$translateProvider.preferredLanguage('ENGLISH');
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
Fees : {{Fees | currency }}<br />
Date : {{Date | date }}<br />
Price : {{Price | number }}
</div>
<hr />
<div ng-controller="MyController1">
<p>{{'Greetings'|translate}}</p>
<p>{{'Introduction'|translate}}</p>
<p>{{'Message'|translate}}</p>
<p><button type="button" ng-click='ChangeLanguage()'>{{'ButtonText'|translate}}</button></p>
</div>
</body>
</html>
Demo
