Awesome Open Source
Awesome Open Source


Build status

angular-phrase is an addon for angular-translate that lets you connect localized AngularJS applications to the Phrase In-Context Editor.


To use angular-phrase with your application you have to:


via NPM:

npm install angular-phrase

via YARN:

yarn add angular-phrase

(or download it manually from the dist folder)

Build form source

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

npm build

Add the module

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

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


Configure the module:

myApp.value("phraseProjectId", "YOUR-PROJECT-ID");
myApp.value("phraseEnabled", true);
myApp.value("phraseDecoratorPrefix", "{{__");
myApp.value("phraseDecoratorSuffix", "__}}");

You can find the Project-ID in the Project overview in the Phrase Translation Center

JavaScript snippet

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


If this does not work for you, you can also integrate the JavaScript snippet manually.

How does it work?

Once the module is enabled it will:

  • override the $translate service and provide placeholders that can be picked up by the Phrase In-Context Editor

  • fetch the JavaScript application used to render the In-Context Editor on top of your application

Using AngularJS with phraseapp-in-context-editor-ruby gem or any other server side technology

If you use the angular-phrase plugin in combination with the phraseapp-in-context-editor-ruby gem or another server side technology that enables the In-Context Editor, AngularJS might have problems if you use curly braces as the decorator suffix/prefix since AngularJS thinks that youre decoratated keys are AngularJS directives (which is not the case).

You can easily solve this issue by using a different decorator syntax for your setup:

angular-phrase configuration

app.value("phraseDecoratorPrefix", "[[__");
app.value("phraseDecoratorSuffix", "__]]");

phraseapp-in-context-editor-ruby gem configuration

PhraseApp::InContextEditor.prefix = "[[__"
PhraseApp::InContextEditor.suffix = "__]]"

JavaScript configuration

  prefix: '[[__',
  suffix: "__]]"

This is only necessary if you're not using the phraseJavascript` directive


  • [x] Add support for translate filter
  • [x] Add support for translate directive
  • [ ] Add support for interpolation values


Run unit tests using Karma with webpack:

npm test

Get help / support

Please contact [email protected] and we can take more direct action toward finding a solution.

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (268,309
Angular (54,905
Editor (31,885
Translation (13,603
Angularjs (11,904
Localization (5,348
Translate (5,085
I18n (4,863
Decorators (4,762
L10n (663
Phraseapp (18