angular-phrase is an addon for angular-translate that lets you connect localized AngularJS applications to the PhraseApp In-Context editor.
To use angular-phrase with your application you have to:
- Sign up for a PhraseApp account: https://phraseapp.com/en/signup
- Use the excellent angular-translate module by Pascal Precht for localization in your AngularJS app
- Have jQuery included
See the In-Context-Editor in a demo application: http://angular-phrase-demo.herokuapp.com/
(Find the source code for the demo on GitHub: angular-phrase-demo
bower install angular-phrase
(or download it manually from the dist folder)
You can also build it directly from source to get the latest and greatest:
grunt build
Add angular-phrase module to your existing AngularJS application after loading the angular-translate module:
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase'])
Configure the module:
myApp.value("phraseAuthToken", "MY-AUTH-TOKEN");
myApp.value("phraseEnabled", true);
myApp.value("phraseDecoratorPrefix", "{{__");
myApp.value("phraseDecoratorSuffix", "__}}");
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 integrate the Javscript snippet manually.
Once the module is enabled it will:
-
override the $translate service and provide placeholders that can be picked up by the PhraseApp In-Context-Editor
-
fetch the Javascript application used to render the In-Context editor on top of your application
If you use the angular-phrase plugin in combination with the phrase gem or another server side mechanism that enables the In-Context-Editor, AngularJS might have problems if you use curly braces as PhraseApp decorator suffix/prefix since AngularJS thinks that you're rendered 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:
app.value("phraseDecoratorPrefix", "[[__");
app.value("phraseDecoratorSuffix", "__]]");
Phrase.prefix = "[[__"
Phrase.suffix = "__]]"
window.PHRASE_CONFIG = {
prefix: '[[__',
suffix: "__]]"
}
Add support fortranslatefilter- Add support for
translatedirective - Add support for interpolation values
Question? File a support ticket at: support.phraseapp.com
Issue? use GitHub issues and share the problem
Run unit tests using grunt/Karma:
grunt karma:unit