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

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

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