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="<style>" title="<style>" />
</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="<script>" title="<script>" />
<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="<script>" title="<script>" />
<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="<script>" title="<script>" />
</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 because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Facebook Wall System Using Angular JS with Multiple Bindings Tutorial
- AngularJS TO-DO List Application
- Angular Create Read Update Delete Tutorial
- AngularJS Instant Search Example
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.