angular-i18n

AngularJS i18n module

Angular Core Dependency: ^1.3.x

Module License: MIT

Added by: Sam Deering

GitHub

Repository

nolazybits/angular-i18n

Stats

Stars: 65

Watchers: 65

Forks: 26

Module Description

angular-i18n is a small Angular module in charge of i18n.

Dependencies

This module angular-i18n has dependencies resolved with bower on:

  • sptrinf ("sprintf")

Usage

This module has:

  • a provider ($i18nProvider)
  • a factory ($i18n)
  • a filter (i18n)
  • a directive (i18n).

Setup

Load the javascript and add the module angular-i18n in the dependencies

<script src="angular-internationalization.js"></script>
<script type="application/javascript">
    var myapp = angular.module('myapp', ['angular-i18n']);
</script>
JSON files

The en-US.json file looks like this

{
    "HELLO_WORLD" : "Hello World",
    "NAME_AGE" : "My name is %s and i am %d years old."
}

The fr-FR.json file looks like this

{
    "HELLO_WORLD" : "Bonjour Monde",
    "NAME_AGE" : "Mon prenom est %s et j'ai %d ans."
}

Provider '$i18n'

The provider has the following methods

| Methods | Description | Default | | :-------| ----------- | ------- | | setPathLanguageURL | Set the template URL where translation file will be loaded from | '/i18n/|LANG|.json' | | setPathLanguageRegex | The regex to look for which will be replaced with the current language string id (i.e en**_**US) to be loaded | /\|LANG\|/ | | setDefaultLanguage | The default language to use | 'en-US' |
| setLanguage | The language to use | null |
| setFallback | The fallback translation object if the translation file failed to load | null |
| setUseBaseHrefTag | Should the library prepend the base tag url to the pathLanguageURL (this to help with relative links) | false |

Example:

    $i18nProvider
        .setPathLanguageURL('/i18n/|LANG|.json')
        .setPathLanguageRegex(/\|LANG\|/)
        .setDefaultLanguage('en-US')
        .setFallback({'WELCOME': 'FALLBACK WELCOME %s', 'GOODBYE': 'FALLBACK WELCOME GOODBYE'})
setPathLanguageURL

Set the template URL where translation file will be loaded from
default: '/i18n/|LANG|.json'

The template URL contains a token that will be replaced (using regex replace) with the current language id.
Note: the language id will have the the '-' replaced with '_' (i.e 'en-US' will become en_US).
e.g: if you have a language set to 'en-US' the file /i18n/en_US.json will be loaded.

setPathLanguageRegex

The regex to look for which will be replaced with the current language string id (i.e en**_**US) to be loaded
default: /\|LANG\|/

This is the regular expression that will be looked for and replaced with the language id in the path template URL.
Note: the language id will have the the '-' replaced with '_' (i.e 'en-US' will become en_US).
So if you have a language set to 'en-US' the file /i18n/en_US.json will be loaded.

setDefaultLanguage

The default language
default: 'en-US'

setLanguage

The explicitly defined language
default: null

setFallback

The fallback translation object if the translation file failed to load
default: null

setUseBaseHrefTag

Should the library prepend the base tag url to the pathLanguageURL (this to help with relative links) default: false

Factory '$18n'

The correct language to display is determine by the provider, based on the language of the browser, the default language set or the current language set (if any) as follow: language || $window.navigator.userLanguage || $window.navigator.language || defaultLanguage;

The factory can use all the previous method described in the provider section plus the following:

| Methods | Description |
| :-------| ----------- |
| addLanguageFile | add a file directly to i18n. Used if want to download the file yourself | | getCurrentLanguage | The language to use |
| getTranslation | Translate instantaneously, used by the filter |
| loadTranslationFile | Loads the translation file for the current language using the URL and regexp provided at config time |
| translate | Return a promise. THIS IS the function you want to use |
| removeLanguage | Remove a language |

addLanguageFile

add a file directly to i18n. Used if want to download the file yourself

getCurrentLanguage

Returns the current language.

The returned value check first the language property (can be set at runtime), then browser language and finally the default language (can be set at config and run time)

getTranslation

Returns a translation instantaneously

This will return a translation instantaneously. So if the translation file is not loaded yet, this function will return either the fallback translation or null.

loadTranslationFile

Loads the translation file for the current language using the URL and regexp provided at config time

removeLanguage

Remove a language

return void

translate

Return a promise. THIS IS the function you want to use

Filter 'i18n'

{{ 'TRANSLATION_ID' | i18n }}  

Directive 'i18n'

<span i18n="TRANSLATION_ID"></span>

Module stats last updated: 2017-05-08 15:00:08

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!