Software localization

Translating AngularJS Applications in Context With Angular-Phrase

When developing large AngularJS applications for a wide audience, internationalization of these apps becomes more and more important.
Software localization blog category featured image | Phrase

AngularJS is an awesome Javascript framework to build single-page applications with Javascript. We’re huge fans of the framework that was developed and is maintained by the Google team.

When developing large AngularJS applications for a wide audience, internationalization of these apps becomes more and more important to make the user interface accessible for users worldwide.

Handling the underlying i18n processes and files can be tedious and difficult to implement: interpolation, handling pluralization, guessing the correct user locale etc.

Fortunately, the AngularJS developer community is very active and publishes awesome modules on a regular basis. One of the most popular modules might be angular-translate, a full-features AngularJS module that covers almost every aspect of internationalizing apps:

  • Loading i18n locale data
  • Handling pluralization and interpolation
  • Caching translations
  • Guessing the user's locale
  • and many more

Covering all aspects of angular-translate fills a whole tutorial itself. See the angular-translate tutorial on ng-newsletter for a great introduction to the module.

In-context editing for AngularJS apps

If you’re familiar with the Phrase in-context editor you know what a powerful tool it is to speed up the translation process and boost the content’s quality. Editing translations directly on the page is fast and easy! If you don’t know in-context editing yet, have a look at our demo.

Adding in-context editing capability to your localized AngularJS app is easy with the angular-phrase adapter.

It extends the methods provided by angular-translate and makes every translatable string editable by the Phrase in-context editor.

Install Angular-Phrase

Install Angular-Phrase via Bower:

bower install angular-phrase

(or download it manually from the dist folder)

Build from source

You can also build it directly from source to get the latest and greatest:

grunt build

Add the module

Add angular-phrase module to your existing AngularJS application after loading the angular-translatemodule:

var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase'])

Configure

Configure the module:

myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "{{__");

myApp.value("phraseDecoratorSuffix", "__}}");

Javascript snippet

Add the phrase-javascript directive within your application, usually best within the <head>:

<phrase-javascript></phrase-javascript>

If this does not work for you, you can also try to integrate the Javascript snippet manually.

Done

If you have done everything correctly you should be able to start your AngularJS app with the in-context editor and start editing translations super-fast.

Summary

Localizing your existing AngularJS apps with angular-translate can be done easily. It’s a great module that covers everything you need to implement a localized version of your apps.

With just a few extra steps you can add the powerful Phrase in-context editor as well and speed up your localization process. Go ahead, translate your app, and get happier customers worldwide.