Globalization and Localization in MVC using AngularJS

This article describes about the Globalization and Localization (multilingual) support for the website in angularJS and MVC.

Here, we are going to explore on
1) Definition of terms
2) Getting the current culture from the server to the client
3) Support for Multiple languages (label texts)

Definition of Terms:
Globalization: the combination of Internationalization and Localization.
Internationalization (i18n*): making your application is able to support a range of languages and locals.
Localization (L10n*): Making your application support a specific language
Language and Local culture format is defined as locale id (ex: en-US)

Getting the current culture from the server to the client
It’s always recommended to read the language accepted by browser from the request coming to the server due to diversity in browsers.
So, write a code in controller to get the culture.

ViewBag.Language = Request.UserLanguages[0];

Create an html element hidden field to hold at client side to persist this culture.

@Html.Hidden("hdnLanguage", (object)ViewBag.Language)

Later, we use this hidden field in angular and render the respective language file.

Support for multiple languages (label texts)
In most of the requirements, we require to change the label texts based on the user’s culture. So we create a resource file for each culture and access it. Here, I am going to create a json file for each culture as json is a light weight and easy to load from angularjs.

Create a MVC project and add the angular packages. Please refer my previous article for basic setup of angularjs in MVC5.
http://nullskull.com/a/10479043/spa-single-page-application-in-mvc-5-and-angularjs.aspx

Add the below nugget packages
Angular Cookies
Angular Translate
Angular-local-storage
As well, copy the angular-translate-loader-static-files.js, angular-translate-storage-cookie.js and angular-translate-storage-local.js files to your scripts folder.


Reference all these script files in bundle.config


Add ngcookies and translate directives to angular module as below.

var app = angular.module('angularspa', ["ngCookies", "pascalprecht.translate"]);

Create a Translations folder under Scripts and add the json file. For naming conventions, follow the json file name as culture name. For example: en-US.json

The format of the json file as follows.


Now, add config to angular module and load the culture specific json file

app.config(['$translateProvider',
     function ($translateProvider) {
         $translateProvider.useStaticFilesLoader({
             prefix: 'Scripts/angular/translations/',
             suffix: '.json'
         });

         var launguage = document.getElementById('hdnLanguage').value;

         $translateProvider.useLocalStorage();
        
         $translateProvider.preferredLanguage(launguage);
     }]);

From above, using the $translateProvider for loading the json files, accessing the language (culture) from hidden field and passing the language to the translateProvider function to render that culture specific file.

Note: As we are accessing the json file types, remember to add the MIME type in web.config. Otherwise you will get 404 error while retrieving the json file.

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
  </system.webServer>

Now, add the translate key word and keys that were defined in json file to html elements or controls wherever you require to display culture specific text.

<h1 translate>title</h1>
<p class="lead" translate>subTitle</p>

That’s it. We are done, the output looks like as below.


Please download the working sample from below location.
http://nullskull.com/FileUpload/-407123783_AngularSpa-Globalization.zip

By Siva Jagan Dhulipalla   Popularity  (1196 Views)