https://github.com/phrase/angular-phrase
Angular JS adapter for Phrase
https://github.com/phrase/angular-phrase
angularjs i18n l10n localization phraseapp translation
Last synced: 9 months ago
JSON representation
Angular JS adapter for Phrase
- Host: GitHub
- URL: https://github.com/phrase/angular-phrase
- Owner: phrase
- License: mit
- Created: 2014-03-13T14:58:50.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2024-04-08T12:07:29.000Z (almost 2 years ago)
- Last Synced: 2025-04-13T08:18:26.758Z (9 months ago)
- Topics: angularjs, i18n, l10n, localization, phraseapp, translation
- Language: TypeScript
- Homepage: https://phrase.com
- Size: 1.37 MB
- Stars: 17
- Watchers: 21
- Forks: 4
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-phrase
angular-phrase is an addon for [angular-translate](https://github.com/angular-translate/angular-translate) that lets you connect localized AngularJS applications to the Phrase In-Context Editor.
## Prerequisites
To use angular-phrase with your application you have to:
* Sign up for a Phrase account: [https://phrase.com/en/signup](https://phrase.com/en/signup)
* Use the excellent [angular-translate](https://github.com/angular-translate/angular-translate) module by Pascal Precht for localization in your AngularJS app
## Installation
### 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
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 ``:
If this does not work for you, you can also integrate the [JavaScript snippet manually](https://help.phrase.com/en/articles/2183908-integrate-in-context-editor-into-any-web-framework/).
## 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](https://phrase.com/features)
* 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
* [x] Add support for `translate` filter
* [x] Add support for `translate` directive
* [ ] Add support for interpolation values
## Test
Run unit tests using Karma with webpack:
npm test
## Get help / support
Please contact [support@phrase.com](mailto:support@phrase.com?subject=[GitHub]%20) and we can take more direct action toward finding a solution.