AngularJS Allows For Easy Translation & Internationalization

Angular JS has many applications, for my first project at Catapult one of the most interesting to me has been the way in which we are using angular-translate in order to build an app in real-time that can be easily translated into any language.

Having translated articles, instructions and how-to guides over the years from English to Spanish, or vice versa, I can say that translation is no small task. Sometimes there are words so imbued with context that translation is very difficult. What I have really enjoyed about working with Angular is that it boils down the amount of translation necessary to the bare minimum and visually contextualizes how those translations will be used.

The customer in this case is a global company that sells products and software all over the world, so with the handy angular-translate we can ensure that, when it comes time to update the app for a non-English speaking country, the additional work entailed to do so is minimal.

This is in addition to Angular’s built-in internationalization for dates, numbers and currency.

The work we’re doing allows us to use angular-translate for titles, descriptions, menu options and instructions within the app. All of these translations are stored as key-value pairs in a file so that, ultimately, once this file is translated the entire app will be, too.

Angular-translate even allows you to add in support for multiple languages if that’s something you need to do.

It’s a pretty efficient way to translate an entire application without having to update business logic.

Of course Angular is a hot technology right now, and so there are countless uses for this tech in all kinds of applications ­– even within the project we’re building there are other interesting applications for Angular. What caught my attention so much about translate is that, even though it’s not the only way to internationalize an application, it’s very efficient and easy to work with in real-time.

To check out the angular-translate code click here, for a detailed explanation of how this process works, click here.

Leave a Reply