i18n AngularJS provider

There’s more than one way to perform i18n translations within our AngularJS projects. IMHO the best one is https://angular-translate.github.io/, but today I’m going to show you how I’m doing translations in my small AngularJS projects (normally Ionic projects).

I’ve packaged my custom solution and I also create one bower package ready to use via bower command line:

bower install ng-i8n --save

First we add our provider

<script src='lib/ng-i8n/dist/i8n.min.js'></script>

And now we add our new module (‘gonzalo123.i18n’) to our AngularJS project

angular.module('G', ['ionic', 'ngCordova', 'gonzalo123.i18n'])

Now we’re ready to initialise our provider with the default language and translation data

    .config(function (i18nProvider, Conf) {
        i18nProvider.init(Conf.defaultLang, Conf.lang);

I like to use constants to store default lang and translation table, but it isn’t necessary. We can just pass the default language and Lang object to our provider

    .constant('Conf', {
        defaultLang: 'es',
        lang: {
            HI: {
                en: 'Hello',
                es: 'Hola'

And that’s all. We can translate key in templates (the project also provides a filter):

<h1 class="title">{{ 'HI' | i18n }}</h1>

And also inside our controllers

    .controller('HomeController', function ($scope, i18n) {
        $scope.hi = i18n.traslate('HI');

If we need to change user language, we only need to trigger ‘use’ function:

    .controller('HomeController', function ($scope, i18n) {
        $scope.changeLang = function(lang) {

Here we can see the code of our provider:

(function () {
    "use strict";

    angular.module('gonzalo123.i8n', [])
        .provider('i18n', function () {
            var myLang = {},
                userLang = 'en',

            translate = function (key) {
                if (myLang.hasOwnProperty(key)) {
                    return myLang[key][userLang] || key;
                } else {
                    return key;

            this.$get = function () {
                return {
                    use: this.use,
                    translate: translate

            this.use = function (lang) {
                userLang = lang;

            this.init = function (lang, conf) {
                userLang = lang;
                myLang = conf;

        .filter('i18n', ['i18n', function (i18n) {
            var i18nFilter = function (key) {
                return i18n.translate(key);

            i8nFilter.$stateful = true;

            return i18nFilter;

Anyway the project is in my github account


8 thoughts on “i18n AngularJS provider

  1. I’ve never heard of ‘i8n’. I wonder if you meant ‘i18n’ which is shorthand for ‘Internationalization’.
    “i + 18 letters + n”

    1. Agree. Updated! In fact the original name was GLang and I replaced from this name to i8n before publishing Damn! ­čÖé

  2. An error has crept into your code (I assume…). In your controller you used ‘traslate’ instead of ‘translate’ .. Otherwise thank you for this module.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.