Building AngularJS Web Applications for an International Audience
Patterns, tips, and tricks
The last part of this chapter is devoted to internationalization and localization
related patterns. We will start by looking into ways of initializing an application
and switching locale. Then we will move to patterns applicable inside a running
application: overriding default locale-specific formats and handling users input in
accordance with a selected locale.
Initializing applications for a given locale
As we've learned in the beginning of this chapter, AngularJS distribution
contains files with locale specific settings. There is one file for each locale and
each file contains definition of the ngLocale module. If we want to take advantage
of locale-specific settings we need to declare a dependency on the ngLocale
module in our application. As a remainder here is how one would initialize
AngularJS application for a fixed locale:
<head>
<meta charset="utf-8">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-locale_fr-ca.js"></script>
<script src="locale.js"></script>
</head>This works fine if our application is supposed to work with only one fixed locale.
In reality, though, we often want to initialize locale based on user's preferences.
There is variety of sources we could consider for user preferences:
- Browser's settings
- HTTP request headers (For example, Accept-Language)
- URL or request parameters
- Server-side settings (user profile, geo-localization, and so on.)
Looking at the list provided earlier we can clearly see that we've got more means
of determining a desired locale on the server side. This is why we would advocate
server side processing for the initial page of an application.
To demonstrate locale selection process in practice, let's have a look into a strategy
implemented in the sample SCRUM application. The approach taken consists of
determining the target locale based on:
- Locale specified as part of a URL that trigger's application's bootstrap
- The Accept-Language request header
- A set of supported locales