Multilanguage or Internationalization support in Angualrjs

As a first step we need to include the required JS files into the index file along with the angular js min and angular route js file.




The sequence the of the JS file inclusion is very important, it should be same as above.


As second step need to include “pascalprecht.translate” module to the ngapp.


Then we need to create the $translateProvider inside the config by using the useStaticFilesLoader.



And when following statement execute the ajax call will made to download  js/properties/locale-en.json file



And if we want to change language by clicking some button you can write a function inside a scope in the current controller as follows.



And the in the html file we can add the code like below.


So for now if we are supporting 2 languages English and Deutsch then along with this we need to create 2 json files on server side

  1. locale_en.json
  2. locale_de.json

and it will contain following json data.




That’s All. Now this will support 2 different language and can be changed dynamically by just clicking a button.


Download Code





AngularJS internationalization and multi language support.
Tagged on:     

Leave a Reply

Your email address will not be published. Required fields are marked *