{"id":23064,"date":"2015-07-17T15:14:49","date_gmt":"2015-07-17T09:44:49","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=23064"},"modified":"2017-08-03T15:50:16","modified_gmt":"2017-08-03T10:20:16","slug":"internationalization-with-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/internationalization-with-angularjs\/","title":{"rendered":"Internationalization with AngularJS"},"content":{"rendered":"

Why is internationalization\u00a0support so important?<\/span><\/strong><\/h3>\n

These days variety of web projects demand the support for multiple languages\u00a0feature. Most of the internet users do not have English as their first language. Thus there is a need to reach those users as well. There are many modules available to achieve multilingual feature in AngularJs<\/a> like angular-gettext, angular-translate. We’ll cover the basics of angular-translate, configurations with some\u00a0examples.<\/p>\n

What is angular-translate?<\/strong><\/p>\n

It is a module which helps to implement internationalization\u00a0features in AngularJs. It provides us with components like filters, directives<\/a>, and functions to load i18n data asynchronously. It uses JSON format messages to achieve ease of implementation.<\/p>\n

<\/h3>\n

Configuration<\/strong><\/h3>\n

You can use bower to install ‘angular-translate’ and ‘angular’.<\/p>\n

[code lang=”html”]
\nbower install angular
\nbower install angular-translate
\n[\/code]<\/p>\n

Here is the CDN\u00a0link for angular and angular-translate:<\/p>\n

[code lang=”javascript”]
\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/angular.js\/1.3.16\/angular.min.js
\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bower-angular-translate\/2.7.1\/angular-translate.min.js
\n[\/code]<\/p>\n

 <\/p>\n

<\/h3>\n

Setting up your page<\/h3>\n

When setting up your page, you have to include angular.js and angular-translate.js file (index.html).<\/p>\n

<\/p>\n

[code lang=”html”]<div>
\n <h3> Hello<\/h3>
\n <p>This is a demo app for multilingual support.<\/p>
\n <label>Click here for switching language between spanish to english <\/label>
\n <button> Change<\/button>
\n<\/div>
\n[\/code]<\/p>\n

 <\/p>\n

Adding dependency in your app\u00a0<\/strong><\/h3>\n

Inject ‘pascalprecht.translate’ module in your app:<\/p>\n

var MultilingualApp = angular.module('MultilingualApp', ['pascalprecht.translate']);<\/code><\/p>\n

 <\/p>\n

\u00a0Configure $translateProvider in your app<\/h3>\n

[code lang=”javascript”]
\nMultilingualApp.config(function ($translateProvider) {
\n $translateProvider.translations(‘US_EN’, {
\n ‘GREETING’: ‘Hello !’,
\n ‘DESCRIPTION’: ‘This is a demo app for multilingual support.’,
\n ‘LBL_SWITCH’:’Click here for switching language between spanish to english’,
\n ‘CLICK’: ‘Click’
\n });<\/p>\n

$translateProvider.translations(‘SPANISH’, {
\n ‘GREETING’: ‘Hola !’,
\n ‘DESCRIPTION’: ‘Esta es una aplicaci\u00f3n de demostraci\u00f3n para soporte multiling\u00fce.’,
\n ‘LBL_SWITCH’: ‘Haga clic aqu\u00ed para cambiar el idioma entre espa\u00f1ol al Ingl\u00e9s’,
\n ‘CLICK’: ‘Clic’
\n });<\/p>\n

\/\/It sets default language for your app
\n$translateProvider.preferredLanguage(‘US_EN’);
\n});
\n[\/code]<\/p>\n

<\/h3>\n

Add dependency in your controller<\/h3>\n

In your controller inject ‘$translate’ service.<\/p>\n

[code lang=”javascript”]
\nMultilingualApp.controller(‘MyCtrl’, function ($scope, $translate) {
\n $scope.changeLanguage = function () {
\n var language = $translate.use();
\n if (language === ‘US_EN’) {
\n $translate.use(‘SPANISH’);
\n } else {
\n $translate.use(‘US_EN’);
\n }
\n };
\n});
\n[\/code]<\/p>\n

 <\/p>\n

$translate.use() : When it is called without parameter it is treated as getter function. It will return current key (language). If you pass parameter then it is acted like setter function and it will reset the language.
\nYour angular\u00a0application\u00a0should resemble to following piece of code:<\/p>\n

[code lang=”javascript”]
\nvar MultilingualApp = angular.module("MultilingualApp", ["pascalprecht.translate"]);<\/p>\n

MultilingualApp.config(function ($translateProvider) {
\n $translateProvider.translations("US_EN", {
\n "GREETING": "Hello !",
\n "DESCRIPTION": "This is a demo app for multilingual support.",
\n "LBL_SWITCH": "Click here for switching language between spanish to english",
\n "CLICK": "Click"
\n });
\n $translateProvider.translations("SPANISH", {
\n "GREETING": "Hola !",
\n "DESCRIPTION": "Esta es una aplicacion de demostracion para soporte multilingue",
\n "LBL_SWITCH": "Haga clic aqu\u00ed para cambiar el idioma entre espanol al Ingles",
\n "CLICK": "Click"
\n });
\n $translateProvider.preferredLanguage("US_EN");
\n});<\/p>\n

MultilingualApp.controller("MyCtrl", function ($scope, $translate) {
\n $scope.changeLanguage = function () {
\n var language = $translate.use();
\n if (language === "US_EN") {
\n $translate.use("SPANISH");
\n } else {
\n $translate.use("US_EN");
\n }
\n };
\n});
\n[\/code]<\/p>\n

<\/h3>\n

Update \u00a0view<\/h3>\n

There are three ways to update your view to enable internationalization.<\/p>\n