Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to do AngularJS i8n For Small Projects

DZone's Guide to

How to do AngularJS i8n For Small Projects

For larger projects, angular-translate is probably the best way to perform Angular i8n, but if you're just doing a small project, it's easier to do it this way.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

There’s more than one way to perform i8n 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.i8n’) to our AngularJS project.

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


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

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


I like to use constants to store defaultLang and translation tables, 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 the key in templates (the project also provides a filter):

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


And also inside our controllers.

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


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

    .controller('HomeController', function ($scope, i8n) {
        $scope.changeLang = function(lang) {
            i8n.use(lang);
        };
    })


Here we can see the code of our provider:

(function () {
    "use strict";

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

            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('i8n', ['i8n', function (i8n) {
            var i8nFilter = function (key) {
                return i8n.translate(key);
            };

            i8nFilter.$stateful = true;

            return i8nFilter;
        }])
    ;
})();


Check out the project on in my github account

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
angularjs ,i8n

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}