This tutorial is out of date and no longer maintained.
There is a time for each project when internationalization (i18n) becomes absolutely needed. Sometimes it’s because of regional specific customers or when the application has to be shown to people in many countries. Usually, when its architecture is not ready for that- it starts becoming a really painful process.
In the AngularJS world, there’s the awesome angular-translate
(it’s used for handling language translation stuff) and the angular-dynamic-locale
(it’s used for changing angular $locale-
which means formatting dates, numbers, currencies, etc.) libraries.
On the other hand, we have the really popular Yeoman AngularJS generator, which is widely used for scaffolding AngularJS applications.
Let’s provide asynchronous translate (without page reload) to Yeoman’s AngularJS application.
Note: Some of the code examples in this article are shown in a reduced manner to show the main code and idea.
These symbols ...
mean that some parts of the code are left out.
In GitHub, you can find detailed instructions on how to create applications using generator-angular
.
In our case just run:
Answer "Yes"
to all questions regarding the decision to use Sass and Sass Bootstrap versions. Leave the default list of AngularJS modules.
After a while you will have the Yeoman-based Angular application with some pre-generated file structure and pre-defined controllers, views, and even some tests.
To run it in you browser with the live-reload, on any changes, just run:
It might look similar to that.
$locale
after the language change.Run in the shell:
Let’s add a translation for Splendid!
text on the green button. We can do it by applying to this text translate filter in app/views/main.html
:
I also provided a prefix for translations to quickly figure out where they are used:
views.main.Splendid!
-> views
folder, file main.html
Using this, in this way, you can provide translations for all your templates.
Create files app/resources/locale-{{locale}}.json
where {{locale}}
- needed locales to handle. In the current example I’ll provide the following locales:
app/resources/locale-en_US.json
for English (United States):
app/resources/locale-ru_RU.json
for Russian (Russia):
directives.language-select.Language
will be used in the languages dropdown.
In appscriptsapp.js
file:
Add dependencies for the main app:
Provide info about locales and the preferred locale which are used in your app (key values will be used in languages dropdown):
To get warnings in the developer console, regarding forgotten IDs in translations, just add:
Next step is about adding asynchronous loading for the translations:
And, finally, provide the config with direction of where to load the $locale settings files for angular-dynamic-locale
:
We need to have some Services to change language and apply some additional logic (e.g. change AngularJS $locale). This will be used for creation and interaction with the languages drop down later.
Create app/scripts/services/LocaleService.js
file with the following content:
In this part, we will add the language drop-down and set actions to changing the language in it. This select element has to be shown only when there is more than 1 language provided.
Let’s create an AngularJS directive app/scripts/directives/LanguageSelectDirective.js
:
And don’t forget to include these scripts and language selects in the app/index.html
:
The last thing is we have to let Grunt know about our additions.
For that we will update Gruntfile.js
:
"live-reload"
task config - will add live reload on changing of translations."copy"
task config - to copy resources files and locales settings to the result build.After that, you can test the text Splendid!
and see that it really is changed after switching language in the dropdown. For that just run:
To test the distribution build just run:
And then open dist/index.html
in your browser.
You can play with the working project at GitHub.
As you can see, until the page is loaded, the translations with $locale
are not set and an animation is shown. Also, this can be due to the added on language change.
On changing the language, you can see that the page title, all of the content, and the time format have changed.
You can compare which parts of the original Yeoman AngularJS project were changed to add localization looking at GitHub diff between the branches with the clear AngularJs Yeoman app and with the applied asynchronous translation.
In this section, we will review some examples of providing language-specific content.
As above, we can apply translations for templates using e.g. translate filter:
There are also a couple of other techniques.
To apply a changing page title and a meta[name="description"]
attribute (which is used to provide text for sharing in social networks), you can use angular ng-bind
and ng-attr-content
directives (see how it’s done in the demo app):
and to provide an update to these fields in controller:
You can replace your images when you switch the language providing {{locale}}
part to ng-src
attribute in your views:
And in the controller:
You, also, can check it out on the Home page (Yeoman image).
If you want to apply some specific CSS, depending on the current locale, you can do it, because in our example we provided the lang
attribute for the <html/>
tag with the current locale value. e.g.:
You can see that by switching the language on the About page - it will, then, change the page layout.
Step-by-step we have provided localization for our Yeoman AngularJS app.
We understand how to create translations files, handling translations in html-templates, and AngularJs controllers.
Also, we discussed how to provide specific styles/images/page titles and even some HTML attribute values for different locales.
Who knows, maybe it’s a good idea for creating a Yeoman “angular-translate” generator.
Let me know what your experience has been with the localization? Would you like to see some more of the above or some other parts to be highlighted/described in more detail? I want to hear from you!
All code and working AngularJS applications, with asynchronous languages loading, can be found in GitHub.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!