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.
