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