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'

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">
	<script src="" />
	<script src="" />
	<script src="app.js" />
	<link href="style.css" rel="stylesheet" type="text/css"  />
	<title translate>TITLE</title>
	<div class="loginpanel">
	  <div class="txt">
	    <input id="user" type="text" placeholder="{{'USERNAME' | translate}}" />
	    <label for="user" class="entypo-user"></label>
	  <div class="txt">
	    <input id="pwd" type="password" placeholder="{{'PASSWORD' | translate}}" />
	    <label for="pwd" class="entypo-lock"></label>
	  <div class="buttons">
	    <input type="button" value="{{'LOGIN' | translate}}" />
<span class="resp-info"></span>

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:


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

AngularJS Tutorial: Conditional Render Example As a web developer I can say that everyone that works with web development, no matter the language, comes across conditional rendering very often (almost every day), it's pretty much impossible to see a project that doesn't have a UI component that cannot be shown if a specific condition isn't true....
Angular2 Tutorial: Creating Custom Pipes Angular 2 Pipes provide us a very simple way to transform/format the data displayed by our application, there are some built-in pipes we can use, but sometimes they don't meet our needs, that's when we have to create custom pipes. This will be a very quick tutorial in which I'll give you an example ...
Tutorial: Creating AngularJS Services Imagine that you have a project with countless features responsible for performing a huge variety of tasks, if you don't do as much as you can to organize it, how would the code look like? It would be nearly impossible to maintain this project if everything is mixed together in the code, no one woul...
Tutorial: Integrating AngularJS with NodeJS Integrating AngularJS with NodeJS I know this tutorial may seem a little bit too basic for a lot of you, but these are two of the most popular javascript frameworks at the moment, as a result of that there are lots of people just getting started with NodeJS and AngularJS, and it's a very common ...

2 comments on “AngularJS Internationalization Example

  1. Manjunath

    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>