Building AngularJS Web Applications for an International Audience
Using locale-specific symbols and settings
AngularJS deliverables contain a set of modules with the locale-specific settings. This
section illustrates steps required to configure the locale-specific modules as well as it
describes settings and constants available for each locale.
Configuring locale-specific modules
If you explore AngularJS deliverables carefully you will notice that each distribution
contains a folder named i18n. Inside this folder there are files named according to
the following pattern: angular-locale_[locale name].js where [locale name]
corresponds to a locale name (expressed as a combination of a language code and a
country code). For example, a file with local settings for the French language with
Canadian specificities is named as angular-locale_fr-ca.js.
AngularJS is distributed with over 280 files containing locale specific
settings and constants for different languages and countries. Those
files, while distributed with AngularJS, are not maintained as part
of the project. Instead locale-specific settings are extracted from the
closure library (http://closure-library.googlecode.com/)
on a regular basis.By default AngularJS will use i8n settings specific to the English locale in the United
States (en-us). If you are writing an application for another locale (or want to choose
different locale for different users) you need to include appropriate file and declare a
dependency on the locale module. For example, to configure a web application to use
the French-Canadian (fr-ca) locale you would organize scripts on your page
as follows:
<!doctype html>
<html ng-app="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>
<body ng-controller="LocaleCtrl">
...
</body>