ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Implement internationalization in AngularJS<p>Hi&nbsp;rani,</p> <p>AngularJS supports inbuilt internationalization for three types of filters : Currency, Date and Numbers.</p> <p>For that you need to&nbsp;add corresponding java script according to locale of the country. By default it considers the locale of the browser.</p> <p><strong><span style="text-decoration: underline;">Using&nbsp;angular-locale</span></strong></p> <p><span style="text-decoration: underline;">HTML</span></p> <div> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.angularjs.org/1.3.14/i18n/angular-locale_en-us.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.controller(&#39;MyController&#39;, function ($scope) { $scope.Fees = 1000; $scope.Date = new Date(); $scope.Price = 123.45; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; Fees : {{Fees | currency }}&lt;br /&gt; Date : {{Date | date }}&lt;br /&gt; Price : {{Price | number }} &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p>For local script files refer below link.</p> <p><a href="https://github.com/angular/bower-angular-i18n">https://github.com/angular/bower-angular-i18n</a></p> <p><strong><span style="text-decoration: underline;">Using&nbsp;angular-translate</span></strong></p> <p><span style="text-decoration: underline;">HTML</span></p> <div> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;AngularJS Internationalization&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.7.1/angular-translate.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;pascalprecht.translate&#39;]); app.controller(&#39;MyController&#39;, function ($scope, $translate) { $scope.ChangeLanguage = function () { var language = $translate.use(); if (language === &#39;ENGLISH&#39;) { $translate.use(&#39;HINDI&#39;); } else { $translate.use(&#39;ENGLISH&#39;); } }; }); app.config(function ($translateProvider) { $translateProvider.translations(&#39;ENGLISH&#39;, { &#39;Greetings&#39;: &#39;Hello, I am Mudassar Khan&#39;, &#39;Introduction&#39;: &#39;I am the founder of this site, and also work as an Independent Consultant. I completed my graduation from Mumbai University with Bachelor&rsquo;s Degree in Computer Engineering.&#39;, &#39;Message&#39;: &#39;Click here to change language from english to hindi&#39;, &#39;ButtonText&#39;: &#39;Change Language&#39; }); $translateProvider.translations(&#39;HINDI&#39;, { &#39;Greetings&#39;: &#39;हैलो, मैं मुदस्सर खान हूं&#39;, &#39;Introduction&#39;: &#39;मैं इस साइट के संस्थापक हूँ, और यह भी एक स्वतंत्र सलाहकार के रूप में काम करते हैं। मैं कंप्यूटर इंजीनियरिंग में स्नातक की डिग्री के साथ मुंबई विश्वविद्यालय से अपनी स्नातक स्तर पूरा किया।&#39;, &#39;Message&#39;: &#39;अंग्रेजी से हिंदी में भाषा बदलने के लिए यहां क्लिक करें&#39;, &#39;ButtonText&#39;: &#39;भाषा बदलो&#39; }); $translateProvider.preferredLanguage(&#39;ENGLISH&#39;); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;p&gt;{{&#39;Greetings&#39;|translate}}&lt;/p&gt; &lt;p&gt;{{&#39;Introduction&#39;|translate}}&lt;/p&gt; &lt;p&gt;{{&#39;Message&#39;|translate}}&lt;/p&gt; &lt;p&gt;&lt;button type=&#34;button&#34; ng-click=&#39;ChangeLanguage()&#39;&gt;{{&#39;ButtonText&#39;|translate}}&lt;/button&gt;&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><strong><span style="text-decoration: underline;">Demo</span></strong></p> <div class="demo_block"> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;AngularJS Internationalization&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.angularjs.org/1.3.14/i18n/angular-locale_en-us.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.7.1/angular-translate.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;pascalprecht.translate&#39;]); app.controller(&#39;MyController&#39;, function ($scope) { $scope.Fees = 1000; $scope.Date = new Date(); $scope.Price = 123.45; }); app.controller(&#39;MyController1&#39;, function ($scope, $translate) { $scope.ChangeLanguage = function () { var language = $translate.use(); if (language === &#39;ENGLISH&#39;) { $translate.use(&#39;HINDI&#39;); } else { $translate.use(&#39;ENGLISH&#39;); } }; }); app.config(function ($translateProvider) { $translateProvider.translations(&#39;ENGLISH&#39;, { &#39;Greetings&#39;: &#39;Hello, I am Mudassar Khan&#39;, &#39;Introduction&#39;: &#39;I am the founder of this site, and also work as an Independent Consultant. I completed my graduation from Mumbai University with Bachelor&rsquo;s Degree in Computer Engineering.&#39;, &#39;Message&#39;: &#39;Click here to change language from english to hindi&#39;, &#39;ButtonText&#39;: &#39;Change Language&#39; }); $translateProvider.translations(&#39;HINDI&#39;, { &#39;Greetings&#39;: &#39;हैलो, मैं मुदस्सर खान हूं&#39;, &#39;Introduction&#39;: &#39;मैं इस साइट के संस्थापक हूँ, और यह भी एक स्वतंत्र सलाहकार के रूप में काम करते हैं। मैं कंप्यूटर इंजीनियरिंग में स्नातक की डिग्री के साथ मुंबई विश्वविद्यालय से अपनी स्नातक स्तर पूरा किया।&#39;, &#39;Message&#39;: &#39;अंग्रेजी से हिंदी में भाषा बदलने के लिए यहां क्लिक करें&#39;, &#39;ButtonText&#39;: &#39;भाषा बदलो&#39; }); $translateProvider.preferredLanguage(&#39;ENGLISH&#39;); }); &lt;/script&gt; &lt;/head&gt; &lt;body ng-app=&#34;MyApp&#34;&gt; &lt;div ng-controller=&#34;MyController&#34;&gt; Fees : {{Fees | currency }}&lt;br /&gt; Date : {{Date | date }}&lt;br /&gt; Price : {{Price | number }} &lt;/div&gt; &lt;hr /&gt; &lt;div ng-controller=&#34;MyController1&#34;&gt; &lt;p&gt;{{&#39;Greetings&#39;|translate}}&lt;/p&gt; &lt;p&gt;{{&#39;Introduction&#39;|translate}}&lt;/p&gt; &lt;p&gt;{{&#39;Message&#39;|translate}}&lt;/p&gt; &lt;p&gt;&lt;button type=&#34;button&#34; ng-click=&#39;ChangeLanguage()&#39;&gt;{{&#39;ButtonText&#39;|translate}}&lt;/button&gt;&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> </div> <p><a class="demo button orange btn btn-red">Demo</a></p>https://www.aspforums.net:443/Threads/567884/Implement-internationalization-in-AngularJS/https://www.aspforums.net:443/Threads/567884/Implement-internationalization-in-AngularJS/Mon, 08 Jul 2019 06:25:59 GMT