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

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

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

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

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 }}