AngularJS - Internationalization

Hello there, aspiring web developers! Today, we're going to embark on an exciting journey into the world of internationalization in AngularJS. As your friendly neighborhood computer science teacher, I'm here to guide you through this fascinating topic. So, grab your favorite beverage, get comfortable, and let's dive in!

What is Internationalization?

Before we start coding, let's understand what internationalization means. Imagine you've created a fantastic website, but it's only in English. What if you want people from different countries to use it? That's where internationalization comes in! It's like giving your website a passport to travel the world.

Internationalization (often abbreviated as i18n - there are 18 letters between the 'i' and the 'n') is the process of designing your application so it can be adapted to various languages and regions without engineering changes.

Why is Internationalization Important?

Think of it this way: if you owned an ice cream shop, would you only offer one flavor? Of course not! You'd want to cater to different tastes. The same goes for websites. By internationalizing your AngularJS application, you're making it accessible and user-friendly for people around the globe. It's like serving digital ice cream in every flavor!

Now, let's roll up our sleeves and see how AngularJS makes internationalization a breeze.

Setting Up AngularJS for Internationalization

First things first, we need to set up our AngularJS application to handle internationalization. We'll be using the angular-translate library, which is like a magic wand for translating our app.

Here's how we set it up:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.18.4/angular-translate.min.js"></script>
</head>
<body>
    <div ng-controller="TranslateController">
        <!-- Our app content will go here -->
    </div>
    <script src="app.js"></script>
</body>
</html>

In our app.js file, we'll set up our AngularJS module and configure the translate provider:

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
    // Configuration will go here
}]);

app.controller('TranslateController', function($scope, $translate) {
    // Controller logic will go here
});

Example Using Danish Locale

Now, let's create a simple example where we'll translate our app into Danish. Why Danish, you ask? Well, why not! Plus, I once had a student who was obsessed with Danish pastries, so this one's for you, Lars!

Let's update our app.js:

app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.translations('en', {
        TITLE: 'Hello',
        FOO: 'This is a paragraph.',
        BUTTON_LANG_EN: 'English',
        BUTTON_LANG_DA: 'Danish'
    });
    $translateProvider.translations('da', {
        TITLE: 'Hej',
        FOO: 'Dette er et afsnit.',
        BUTTON_LANG_EN: 'Engelsk',
        BUTTON_LANG_DA: 'Dansk'
    });
    $translateProvider.preferredLanguage('en');
}]);

app.controller('TranslateController', function($scope, $translate) {
    $scope.changeLanguage = function (langKey) {
        $translate.use(langKey);
    };
});

Here's what's happening:

We define translations for English ('en') and Danish ('da').
We set English as the preferred language.
We create a changeLanguage function in our controller to switch languages.

Now, let's update our HTML:

<div ng-controller="TranslateController">
    <h2>{{ 'TITLE' | translate }}</h2>
    <p>{{ 'FOO' | translate }}</p>
    <button ng-click="changeLanguage('en')">{{ 'BUTTON_LANG_EN' | translate }}</button>
    <button ng-click="changeLanguage('da')">{{ 'BUTTON_LANG_DA' | translate }}</button>
</div>

Output

When you run this code, you'll see:

A title saying "Hello"
A paragraph saying "This is a paragraph."
Two buttons labeled "English" and "Danish"

Click the "Danish" button, and voila! Your app now speaks Danish:

The title changes to "Hej"
The paragraph says "Dette er et afsnit."
The buttons are now labeled "Engelsk" and "Dansk"

It's like magic, isn't it? But remember, it's not magic - it's the power of AngularJS and your coding skills!

Example Using Browser Locale

Now, let's take it up a notch. What if we want our app to automatically use the user's browser language? It's like having a website that speaks your language before you even ask!

Let's modify our app.js:

app.config(['$translateProvider', function ($translateProvider) {
    $translateProvider.translations('en', {
        TITLE: 'Hello',
        FOO: 'This is a paragraph.',
        BUTTON_LANG_EN: 'English',
        BUTTON_LANG_DA: 'Danish'
    });
    $translateProvider.translations('da', {
        TITLE: 'Hej',
        FOO: 'Dette er et afsnit.',
        BUTTON_LANG_EN: 'Engelsk',
        BUTTON_LANG_DA: 'Dansk'
    });
    $translateProvider.useLocalStorage();
    $translateProvider.fallbackLanguage('en');
    $translateProvider.registerAvailableLanguageKeys(['en', 'da'], {
        'en*': 'en',
        'da*': 'da'
    });
    $translateProvider.determinePreferredLanguage();
}]);

What's new here?

We use local storage to remember the user's language preference.
We set English as the fallback language.
We register available language keys.
We use determinePreferredLanguage() to automatically detect the browser's language.

Output

Now, when a user visits your website:

If their browser language is set to Danish, they'll see the Danish version.
If it's set to any other language, they'll see the English version (our fallback).
The chosen language will be remembered for their next visit.

It's like your website is a chameleon, adapting to each user's environment!

Conclusion

And there you have it, folks! We've turned our AngularJS application into a multilingual marvel. Remember, internationalization is not just about translation - it's about creating a welcoming experience for users around the world.

As you continue your coding journey, always keep your users in mind. Whether they're in Copenhagen or California, your app can now greet them in a language they understand.

Keep practicing, stay curious, and who knows? Maybe one day you'll create an app that speaks more languages than C-3PO! Until next time, happy coding!

Method	Description
`$translateProvider.translations(langKey, translationTable)`	Adds a new translation table for a specific language
`$translateProvider.preferredLanguage(langKey)`	Sets the preferred language
`$translateProvider.useLocalStorage()`	Uses local storage to remember language preference
`$translateProvider.fallbackLanguage(langKey)`	Sets a fallback language
`$translateProvider.registerAvailableLanguageKeys(keys, aliases)`	Registers available languages and their aliases
`$translateProvider.determinePreferredLanguage()`	Automatically detects the browser's preferred language
`$translate.use(langKey)`	Changes the current language

Credits: Image by storyset

Previous Tutorial:

AngularJS - Custom Directives

Next Tutorial:

AngularJS - ToDo Application