If your Angular app needs to let users have multiple language options, the best way to do it is with a translation library. This is referred to as internationalization, or i18n for short.
Fun fact: i18n seems like a weird name – but it’s just shorthand. The word ‘internationalization’ has 20 letters… i<18 letters>n … i18n! You might see l10n mentioned sometimes too – that one is shorthand for ‘localization’.
Maybe you want to support two languages – say English and Swedish. Using the angular-translate library, this is a piece of cake. Here’s how to do it.
Install the package
Assuming you’re using Bower, install it this way:
bower install angular-translate
If you’re not using a package manager, you can grab the library from here.
But furthermore, if you’re not using a package manager, you really should be! Learn more about Bower and set that up as soon as you can. It’ll make your life a lot easier.
Include the script in your HTML file
Change the path if you need to (your angular-translate might be installed somewhere else).
Make your app require the library as a dependency
Add the translations
Here, we’re injecting
$translateProvider into the app’s config function. This is a service that angular-translate makes available, and it is what we use to specify the different languages the app will support.
The other imporant part is calling
preferredLanguage. angular-translate will not choose a language for you, even if there is only one option. You have to specify it.
Translate some stuff!
In your views, instead of using plain text, we’re going to put in the corresponding translation keys.
Be careful that you remember to put the keys in quotes, or it won’t work.
Now that it’s working, add more languages
In order to add other languages to the app, all we need to do is call the
translations function again. Those calls can be chained, as in this example:
Let your user choose the language
It’s not all that helpful to have multiple languages if your user can’t choose the one they want. This is easy to do with the
$translate.use() function. At this point we need to add a controller to allow selecting the language.
The view has a
select dropdown which allows choosing English or Svenska.
See it all working in the Plunker here!
Now you know how to get up and running with angular-translate! Not too hard, right?
Try recreating it from scratch in your own Plunker to get some practice. The best way to learn this stuff is to practice it on your own. Don’t just copy and paste from tutorials!
The library has a lot more flexibility, too. Here are a couple other things to look into once you need them:
- Use the
translateattribute to give translation keys without the braces
- Extract your translations to separate JSON files and load them using
- Use the
translatefilter in services and controllers to translate things outside of the view.
Now get out there and start applying sweet i18n and l10n to your apps!
Learning React can be a struggle — so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.
Learn to think in React
- 90+ screencast lessons
- Full transcripts and closed captions
- All the code from the lessons
- Developer interviews
Dave Ceddia’s Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end devs wanting to upskill or consolidate.