Skip to content
Angular JS adapter for PhraseApp
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test/unit
typings
.bowerrc
.gitignore
.travis.yml
LICENSE
README.md
bower.json
karma.conf.js
package.json
tsconfig.json
typings.json
webpack.config.js

README.md

angular-phrase

Build Status

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

Prerequisites

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

Demo

E-Mail: demo@phraseapp.com

Password: phrase

http://angular-phrase-demo.herokuapp.com/

(Find the source code for the demo on GitHub: angular-phrase-demo

Installation

via NPM:

npm install angular-phrase

via Bower:

bower install 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:

grunt build

Development

	typings install dt~angular@1.2 --global

Add the module

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

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

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

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 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 PhraseApp 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

window.PHRASEAPP_CONFIG = {
  prefix: '[[__',
  suffix: "__]]"
}

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

TODO

  • Add support for translate filter
  • Add support for translate directive
  • Add support for interpolation values

Support

Question? Contact us at: phraseapp.com/contact

Issue? use GitHub issues and share the problem

Test

Run unit tests using grunt/Karma:

grunt karma:unit
You can’t perform that action at this time.