Introduction of translation in your project - Angular Translate

AngularJS Jan 3, 2018

Many of us face such situations wherein we want to add translations within your personal application or projects to address a global audience. The fact is true that people adopt these applications more easily than any other applications by making their day-to-day use in native languages.

In this post, I am going to overview about an angular library which is very simple & popular and most of you have heard about it.

PS: This post is for Angular1 and using Angular Translate for translation management.

Angular Translate

This library is very flexible and easy to use. It is pretty scalable and allows the addition of new languages in minutes without any pain. You can go to this link to know more about it.


This library provides so many ways to write down and store your translations (like variables etc.) but my personal favourite is to store them as segregated files per language under a folder as it is very easy to maintain them and addition of new languages(files) would be very easy in future with limited changes in core files.




Below are the configurations that you need to do to setup your project to look to these files specifically for translations

Getting Started
  1. Add following scripts to your head tag before app.js

     <script src="path/to/angular.js"></script>
     <script src="path/to/angular-translate.js"></script>
     <script src="app.js"></script>
  2. Inject dependency into app

     var app = angular.module('myApp', ['pascalprecht.translate']);
  3. Inject the provider into your module configuration function

     .config(['$translateProvider', function ($translateProvider) {
       // configures staticFilesLoader
           prefix: 'path/to/translations/locale-',
           suffix: '.json'
         .registerAvailableLanguageKeys(['en', 'fr'], {
           'en'  : 'en',
           'en_*': 'en',
           'fr'  : 'fr',
           'fr_*': 'fr',
           '*'   : 'en'
         //load fallback language
         // Enable escaping of HTML
         //this is to secure application from attacks
         //ideally sanitize strategy should be used

In this example, app supports only English & French languages that is why it is registered only for en & fr keywords.

In case of integration wherein your application is getting locale information from another system, there can be a possibility that you might get different languages code, for example, en-US or en-GB for US and UK respectively. In this scenario **registerAvailableLanguageKeys** function can be used to map all combinations of en languages (en-US and en-GB) to pick single source file for translations instead of having separate files.
  1. Pass language to angularTranslate module on app load or language locale change

     // either get it from user details table      
      // or set it directly and ask user to change it
  2. The last step would be to tell pages what all needs to be translated and rest will be done by the app.

     <button>{{'GENERAL.BACK_BUTTON' | translate}}</button>

To translate labels in controllers/service, use following code:

    //inject $translate as dependency to controller/service
    $translate(GENERAL.BACK_BUTTON).then(function (result) {
           //do something
       }, function (translationId) {
           //do something

Hope this helps. In case of any questions/concerns, feel free to comment on this post and I will try to get back as soon as possible.

Happy Coding!

Related Post: Custom Asynchronous filter to format date using translations - Angular Translate