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.

[php]
<!DOCTYPE html>
<html ng-app="APP">
<head>
<meta charset="UTF-8">
<title>AngularJS Language Translation Example – Meul Tech 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">Meul Tech </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’Meul Tech %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’Meul Tech %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%20Meul Tech ‘%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>
[/php]

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 Meul Tech .

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.