Over a million developers have joined DZone.

Learn MVC Using Angular Dynamic Localization

DZone's Guide to

Learn MVC Using Angular Dynamic Localization

In this tutorial, we show you how to incorporate localization into your web application, allowing you to reach a much wider audience.

· 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.


This article demonstrates low to use Agular dynamic localization in MVC using the Angular i18n package in Visual Studio 2017.


Localization is a very important part of region based applications. It customizes your application for a given culture and locale. So, this localization can change dynamically using Angular Dynamic Locale Module.

By following the below steps, you can use Angular file upload in MVC.

  • Create MVC Project.
  • Configure Angular i18n and Dynamic Locale.
  • Work in Angular i18n and Dynamic Locale.

Create MVC Project

Open Visual Studio 2017.


Go to New menu > click New and Project. Now, it will open a New Project window.


You can select ASP.NET Web Application on Framework 4.5. Enter the name of the project in “Solution name” text box, then click OK.


One more window should appear. Select the MVC Template in this pop-up and click OK. Now, start cropping the image.

Configure Angular i18n and Dynamic Locale

You can download the plug-in from:

Or you can install it from npm. If you try npm, don’t forget to install Node.js. Then, use the following commands:

npm install angular-i18n 

npm install angular-dynamic-locale 

Open the _Layout.cshtml and refer the.js file from downloaded folder to this View page.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />  
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
 <script src="~/Scripts/bootstrap.min.js"></script>  
 <script src="~/PlugIn/angular/angular.min.js"></script>  
 <script src="~/PlugIn/angular-dynamic-locale/dist/tmhDynamicLocale.js"></script>  
 <script src="~/PlugIn/angular-ui-router/release/angular-ui-router.js"></script>  

Link your Angular configurable file.

<script src="~/App/App.module.js"></script>  
        <script src="~/App/App.config.js"></script>  
        <script src="~/App/LocaleController.js"></script> 

Angular Module

You will need to include the module as a dependency on your application.

var Locale = angular.module(Locale, ['ui.router', 'tmh.dynamicLocale']);  

Work in Angular i18n and Dynamic Locale

“Locale” is my Angular module name. So, I have added as the value for “ng-app.”

<div class="container body-content" ng-app=" Locale">  


<div ng-controller="LocalizationController" class="container container-md">  
        <div class="row">  
            <div class="col-md-5">  
                Select a locale  
                <select ng-model="model.selectedLocale"  
                        ng-options="key as value for (key, value) in availableLocales"  
                        ng-change="changeLocale(model.selectedLocale)" class="form-control"></select>  
            <div class="col-md-7"> 
                <table class="table table-responsive table-bordered">  
                            Selected locale id:  
        Current locale id:  
                            A big number:  
                            {{1234567890 | number}}  
                            The Epoch was on:  
                            {{0 | date}}  
                            One million:  
                            {{1000000 | currency}}  



Angular Config

This module expects for the Angular locales to present at 'angular-i18n/angular-locale_{{locale}}.js.' If the locales are at another URL, this can be changed at tmhDynamicLocaleProvider using localeLocationPattern (string).

function localeConfig(tmhDynamicLocaleProvider) {  

Angular Controller

Angular initiates the locale in a dropdown and sets the locale id as “en” in Angular.

    .controller('LocalizationController', LocalizationController);  
function LocalizationController($rootScope, tmhDynamicLocale, $locale) {  
  $rootScope.availableLocales = {  
    'en': 'English',  
    'es': 'Spanish',  
    'de': 'German',  
    'fr': 'French',  
    'ar': 'Arabic',  
    'ja': 'Japanese',  
    'ko': 'Korean',  
    'zh': 'Chinese'};  

  $rootScope.model = {selectedLocale: 'en'};   
  $rootScope.$locale = $locale;   
  $rootScope.changeLocale = tmhDynamicLocale.set;   

When using this method, tmhDynamicLocale.set will return a promise that will be resolved when the locale is loaded and will resolve to the new locale

Click the F5 button and run the application. Now, it will open the browser where you can see the result.

Output 1


I have loaded default locale as English.

Output 2


I have changed the locale to Chinese, so the data is changed to Chinese.


In this article, we have seen dynamic localization using Angular i18n. If you have any queries, please tell me through the comments section.

Happy Coding!

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

asp.net mvc ,angular ,localization ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}