AngularJS Language Translation Example



AngularJS Language Translation Example

Hello friends. Many times we want to know how to translate text to different languages. So today I will show you a simple ‘AngularJS Language Translation Example’. To develop this app, we have used HTML, CSS, translate.js and AngularJS.

STEP 1:

First, create a ‘translate.html’ file.

<!DOCTYPE html>
<html ng-app="APP">
<head>
	<meta charset="UTF-8">
	<title>AngularJS Language Translation Example - TryCatch Classes Tutorials</title>
  
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20button%20%7B%0A%20%20%20%20%20%20width%3A125px%3B%0A%20%20%20%20%20%20display%3Ablock%3B%0A%20%20%20%20%7D%0A%09body%7B%0A%09%20%7D%0A%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

</head>
<body>
 <h2 translate="TITLE">TryCatch Classes</h2>
<div ng-controller="ExampleController">
    <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN">english</button>
    <button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE">german</button>
    <button ng-click="changeLanguage('es')" translate="BUTTON_LANG_ES">spanish</button>
  </div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.1.4%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22translate.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20var%20app%20%3D%20angular.module('APP'%2C%20%5B'pascalprecht.translate'%5D)%0A%20%20%20%20.config(function%20(%24translateProvider)%20%7B%0A%20%20%20%20%20%20%24translateProvider.translations('en'%2C%20%7B%0A%20%20%20%20%20%20%20%20TITLE%3A%20'TryCatch%20Classes'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_EN%3A%20'English'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_DE%3A%20'German'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_ES%3A%20'Spanish'%2C%0A%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%24translateProvider.translations('de'%2C%20%7B%0A%20%20%20%20%20%20%20%20TITLE%3A%20'TryCatch%20Klassen'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_EN%3A%20'Englisch'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_DE%3A%20'Deutsch'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_ES%3A%20'Spanisch'%2C%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%24translateProvider.translations('es'%2C%20%7B%0A%20%20%20%20%20%20%20%20TITLE%3A%20'Las%20clases%20TryCatch'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_EN%3A%20'Ingl%C3%A9s'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_DE%3A%20'Alem%C3%A1n'%2C%0A%20%20%20%20%20%20%20%20BUTTON_LANG_ES%3A%20'Espa%C3%B1ol'%2C%0A%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%24translateProvider.preferredLanguage('en')%3B%0A%0A%20%20%20%20%7D)%0A%20%20%20%20.controller('ExampleController'%2C%20%5B'%24scope'%2C%20'%24translate'%2C%20function%20(%24scope%2C%20%24translate)%20%7B%0A%20%20%20%20%20%20%24scope.changeLanguage%20%3D%20function%20(key)%20%7B%0A%20%20%20%20%20%20%20%20%24translate.use(key)%3B%0A%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%7D%5D)%3B%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

STEP 2:

Final step is to angular translate script. Copy paste the ‘translate.js’ file which I have included in the zip file of the code.

Finally our code is done in just 2 easy steps. Hit the url and check your output.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page TryCatch Classes.

Bonus: We also give training on following topics:

                       1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3.  Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.