AngularJS Internationalization Example

Today I’m going to give you a very simple example of how to translate a AngularJS page with the module angular-translate. To illustrate how to do that, I’m going to create a login screen with 3 or 4 labels, then I’ll make them available in two different languages: English and French. If you need more languages you just have to follow the same principle.

The first thing we need to do is to provide the texts in both languages to our application, we can easily do that in the module.config function, let’s take a look at the code, this will be our app.js file:

var app = angular.module('angularjs_internationalization',['pascalprecht.translate']);
 
app.config(function($translateProvider) {
  $translateProvider.translations('en_US', {
    TITLE: 'Login Form',
    USERNAME: 'Username',
    PASSWORD: 'Password',
    LOGIN: 'Login'
  });
 
  $translateProvider.translations('fr_CA', {
    TITLE: 'Formulaire de login',
    USERNAME: 'Identifiant',
    PASSWORD: 'Mot de passe',
    LOGIN: 'Connexion'
  });
  $translateProvider.determinePreferredLanguage();
});

I just declared the two languages using the function translations() from the translateProvider service, it receives the language key as the first argument and an object containing the texts as the second, note that related texts have same ID in both objects, it won’t work if you use different IDs. After that I called the function determinePreferredLanguage() which tells AngularJS to choose the most suitable language for each user, you can also pick a language by hand, I’ll tell you how to do that in a moment.

Next, we need to create the HTML page, just copy the following code and paste into your index.html file:

<html ng-app="angularjs_internationalization">
<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.9.0/angular-translate.min.js" />
	<script src="app.js" />
	<link href="style.css" rel="stylesheet" type="text/css"  />
	<title translate>TITLE</title>
</head>
<body>
	<div class="loginpanel">
	  <div class="txt">
	    <input id="user" type="text" placeholder="{{'USERNAME' | translate}}" />
	    <label for="user" class="entypo-user"></label>
	  </div>
	  <div class="txt">
	    <input id="pwd" type="password" placeholder="{{'PASSWORD' | translate}}" />
	    <label for="pwd" class="entypo-lock"></label>
	  </div>
	  <div class="buttons">
	    <input type="button" value="{{'LOGIN' | translate}}" />
	  </div>
	</div>
<span class="resp-info"></span>
</body>
</html>

You don’t need to be concerned about every single line of this code, what matters here is just how we call our texts from the angular module, which is very simple, as you can see in the placeholder attribute of both inputs, you just need to call your text ID followed by the filter translate.

Now if you run you project you should see the page in your browser’s default language:

Login Form in English
Login Form in English

If you want to test the other language as well, instead of calling the determinePreferredLanguage() function at the end of the config() method, you have to call preferredLanguage() passing the language you want:

$translateProvider.preferredLanguage('fr_CA');

And this should be the result:

Login Form Translated
Login Form Translated

That’s it guys! Thanks for reading this tutorial, just leave a comment if you have any problems, I’ll be glad to help!

Recommended for you

2 comments on “AngularJS Internationalization Example

  1. Manjunath

    Hi,
    Is it possible to use UTF code to translate as text in angular js? If yes, can you please explain how i would achieve it.

    Thanks ,
    Manjunath S S

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>