angular-applanga

Angular Applanga

Client that talks to a proxied version of the Applanga API. Also includes a tool to import your data into Applanga.

How to install

Simply install it with Bower or NPM:

$ bower install angular-applanga

$ npm install angular-applanga

Make sure you have the angular sanitize library also included in your libs!

How to configure

To include in your app add the following module: Applanga.

angular.module('testApp', ['Applanga']);

To set the Applanga languages or groups use the ApplangaProvider in your app's config.

angular.module('testApp').config(function(ApplangaProvider) {
  ApplangaProvider.setLanguages(['nl-NL', 'nl-BE', 'nl']) // Set all languages to fetch from Applanga
    .setGroups(['main']) // Set all groups to fetch from Applanga
    .setTranslateLanguage('nl-NL') // Set the default language used for translating
    .setTranslateGroups(['main']) // Set the default groups used for translating
    .setUrl('http://www.hellofresh.com/api/applanga');
});

The default values for these settings are for languages: ['en'] and for groups: ['main'].

How to use

The main usage of the app will be the directives inside the module. There are two directives: applanga and applanga-safe, the first is for normal translating and the second one will sanitize the input too.

applanga directive

To translate a textNode you could use the applanga directive like this:

<div applanga="applanga-id" language="en" groups="main|other">
  Testing out the new applanga directive, on {{date}}.
</div>

As you can see the element already contains a textNode, this is the failsafe, before the app has loaded your Applanga translations.

The value of the translation in Applanga could be: "Testing out the new applanga directive, on {{date}}." the applanga directive would $interpolate the {{date}} value to the value on the parent scope.

applanga-safe directive

To translate the HTML content of an element you could use the applanga-safe directive like this:

<div applanga-safe="applanga-id" language="en" groups="main|other">
  <p>
    Testing out the new applanga-safe directive, on {{date}}.
  </p>
</div>

Again the failsafe value of this node is in the element. The translation in Applanga would be:

<p>
  Testing out the new applanga-safe directive, on {{date}}.
</p>

Everything in this directive works the same as the normal applanga directive, but the value is being sanitized, so things like <script></script> will be removed from the input string.

aplanga filter

The package also includes a filter that will translate the provided text for you. So for example:

<p ng-bind="'test-this-filter' | applanga"></p>

The downside of the filter is, is that it won't be able to $interpolate the value for you, so we recommend to use the directives instead.

You can also define groups and language for the filter, like so:

<p ng-bind="'test-this-filter' | applanga:'en':['main', 'other']"></p>

Applanga service

This service is being derived from the ApplangaProvider, this is where most of the magic happens.

The Applanga service has four methods:

• ::setTranslateLanguage(language) change the default language used by the ApplangaProvider. By default this is the first element in the array.
• ::setTranslateGroups(groups) change the default group used by the ApplangaProvider. By default this is the first element in the array.
• ::fetch will fetch new data from the API. This happens automatically when you change something from the applangaConfig object inside this service.
• ::translate(key, language = null, groups = null) will translate the key for you. If you don't provide it with a language or group it will take the default language or group.
• ::isResolved this will return a promise, that will be resolved once the translations are loaded.
• ... also all the methods defined in for the ApplangaProvider are available on this object, so if you want to change the main languages, just call the ::setLanguages function

ApplangaInterpolate service

If you want to take matters in your own hands you can call the ApplangaInterpolate service directly and interpolate your translation with a given scope. To call it:

ApplangaInterpolate.parse('{{key}}', {
  key: 'test'
}); // test

ApplangaSanitizedInterpolate service

You could also sanitize the input, before you interpolate, this you could do with the ApplangaSanitizedInterpolate service. To use it:

ApplangaSanitizedInterpolate.parse('<script>maliciousJS</script><p>{{key}}</p>', {
  key: 'test'
}); // <p>test</p>