Building AngularJS Web Applications for an International Audience
While this approach would work it is tedious and error-prone to prefix all the routes
with /:locale. What we can do instead is to define a base tag in a landing's page
HTML and point it to a locale folder:
<head>
<meta charset="utf-8">
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular/angular-locale_<%= locale %>.js"></script>
<base href="/<%= locale %>/"></head>The AngularJS $location service (and thus its routing system) can recognize
the
href attribute.
Using a base tag that points to a locale folder has one more advantage as we can
use relative URLs to download AngularJS templates (partials). If we decide to adopt
build-time approach to localization we would generate translated partials in folders
corresponding to a given locale. A properly configured
that AngularJS downloads partials for a configured locale.
Using the <base> tag on a page means that we need to use non-
relative URLs for all static content that is not locale-dependent.In the real-life deployment scenarios partials most probably will be pre-fetched at
the beginning, instead of being downloaded on the fly so defining the
has less practical implications from the partials point of view. Chapter 12, Packaging
and Deploying AngularJS Web Applications covers different deployment scenarios in
great details.
Switching locales
In the current version of AngularJS all the dependent modules must be listed as
dependencies of the main application module before an application is bootstrapped.
The ngLocale module isn't an exception here, which means that it needs to be loaded
into a browser, and declared as a dependency before AngularJS application can be
started. As a consequence we need to select a module with local settings before an
application starts. Moreover the selected module can't be swapped for another one
without re-initializing AngularJS application.