Translating AngularJS Applications in Context With Angular-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 users 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 PhraseApp In-Context-Editor you know what a powerful tool it is to speed up 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 PhraseApp In-Context-Editor.

Install Angular-Phrase

Install Angular-Phrase Via Bower:

bower install angular-phrase

1	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

1	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'])

1	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", "__}}");

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>

1	<phrase-javascript></phrase-javascript>

If this does not work for you, you can also 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. See the demo to get an idea what you can expect: http://angular-phrase-demo.herokuapp.com/

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 PhraseApp In-Context-Editor as well and speed up your localization process. Go ahead, translate your app and get happier customers 🙂

More Resources:

Be sure to subscribe and receive all updates from the PhraseApp blog straight to your inbox. You’ll receive localization best practices, about cultural aspects of breaking into new markets, guides and tutorials for optimizing software translation and other industry insights and information. Don’t miss out!

Also published on Medium.