Skip to content

radify/angular-g11n

Repository files navigation

angular-g11n

Travis Status for radify/angular-g11n Bower version Dependency Status devDependency Status

Simple globalization (internationalization + localization) for AngularJS. Developed by Radify. Allows you to manage your g11n in simple JSON format and to switch languages on the fly. Also supports CSV import/export as a Gulp task.

Quickstart

Install into your project. You can clone it or do it as a submodule but the easiest way is to user Bower to manage your dependencies:

bower install angular-g11n

Then, include it on your page:

<script src="bower_components/angular-g11n/src/angular-g11n.js"></script>

In your app.js (or whatever you use to define your application), load the ur.g11n module:

'use strict';

var app = angular.module('sampleApp', [
    'ur.g11n'
]);

app.run(function(Locale) {
    Locale.set('en', {
        "lead-copy": "Simple Translations for AngularJS"
    });
    Locale.set('izzle', {
        "lead-copy": "Sizzle Trizzle for Angulizzle "
    });

    Locale.uses('en');
});

Now, in your templates, you have a 't' helper, so you might include something like:

<div class="jumbotron">
  <h1>angular-g11n</h1>
  <p class="lead">
    {{ 'lead-copy' | t }}
  </p>
</div>

Try changing the Locale.uses line to:

// ...
    Locale.uses('izzle');
});

Then refresh the page. You'll see the copy has changed!

Documentation

This page is just to get you started, for more detail, see the pages below:

manual.md - a full guide to using angular-g11n.

API.md - details of the methods available in the angular-g11n API.

managing-g11n-as-csv.md - you can manage g11n using CSV files if JSON doesn't suit you.

LICENSE - terms and conditions.

CONTRIBUTING.md - guide to contributing to angular-g11n.