Over a million developers have joined DZone.

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 to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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) {

Here we can see the code of our provider:

(function () {
    "use strict";

    angular.module('gonzalo123.i8n', [])
        .provider('i8n', 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('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

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

angularjs ,i8n

Published at DZone with permission of Gonzalo Ayuso, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}