AngularJS i18n

AngularJS internazionalization example.

by hamzeen hameem

HTML

<div ng-app="app">
    <div ng-controller="TestCtrl">
                
        <p>{{'AGE' | i18n}}</p>
        <p>{{'SALUTATION' | i18n}}</p>
        
        <button ng-click="switchLang('it')">{{'ITALIAN' | i18n}}</button>
        <button ng-click="switchLang('en')">{{'ENGLISH' | i18n}}</button>

    </div>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('TestCtrl', ['$scope', '$rootScope', 
function ($scope, $rootScope) {

    $scope.switchLang = function (lang) {
        $rootScope.currentLanguage = lang;
    }

}]);

app.filter('i18n', ['$rootScope', function ($rootScope) {
    return function (input) {
        
        var translations = {
            'it': {
                'SALUTATION': 'Saluto',
                'AGE': 'EtĂ ',
                'ITALIAN': 'Italiano',
                'ENGLISH': 'English'
            },
            'en': {
                'SALUTATION': 'Salutation',
                'AGE': 'Age',
                'ITALIAN': 'Italian',
                'ENGLISH': 'English'
            }
        };

        var currentLanguage = $rootScope.currentLanguage || 'it';
        
        return translations[currentLanguage][input];
    }
}]);