Tip:
Highlight text to annotate it
X
Hello everyone. This is an overview of angular-translate
So, what is angular-translate? Angular-translate is a module which makes
it easy to translate applications made with AngularJS. It is a fully client side modules,
so there are on special scripts required on the server side.
One of the main concepts of angular-translate is simplicity. There are only few lines of
configuration code required to make translation system work for you. Since the library provides
a bunch of features out of the box you don't need to write any translation logic.
But as you know there might be some situations when standard solutions do not fit our needs.
And this is when another key concept of angular-translate comes in. The library has a modular structure.
So you can easily reconfigure or completely replace almost any functional part.
Let's take a look at a usage scenario of angular-translate.
Here are listed 5 basic steps to translate your application. First of all you have to
get angular-translate. You can install it with bower, fork it on the GitHub.com or just
download it from a website. After that just include the module to the HTML file, inject
it to your application, than provide some configurations and finally you can translate
your application.
As for features angular-translate provides to the developer.
The module gives you a possibility to use either a directive, a filter or a service
to translate your applications. The result is the same so you are completely free to
choose which tool is better in every particular situation.
You might know that you can give translations to the angular-translate directly in the code
of application. It's cool. But, you know, it might be not very comfy to keep all translations
in the javascript code. If you want to move your translations to the separate files you
have to know that angular-translate supports asynch loading. You just have to configure
a loader and the module will get translations from the server by itself.
Angular-translate can work with multiple languages at the same time. As a result it can switch
languages in runtime. No page reload or additional server logic is required.
If the translation is not found in the current language angular-translate can use some other
language as a fallback language. For example, imagine the French is a current language and
English is fallback language. You want to get a translation, for example, for the key
"hello". If there is no such translation in the French language angular-translate will
search the translation for the this key in the English language. Such translation might
be worse, but the user will be still able to get useful information from your application.
You can also use variables in your translations. Angular-translate will replace all found found
variables with the values you provide. It is something like you know a string "Hello,
{{username}}", for example, here username is a variable and it can be John, or Jack,
or Bob - whatever you want.
Angular-translate has a pluralization support provided by the MessageFormat library. So
you can freely use plurals to make your translations more user friendly.
Okay. You might say that this is good that angular-translate can show my translations
to the user, but what if I have missed some of them? Fallback language is not enough in
this situation. When you have a lot of translations on the page it's hard to recognize if some
translations are missed. In this case angular-translate can help you. You simply lot all missed translations
to the console or provide some custom error handling service.
And at last events. angular-translate broadcasts a bunch of events representing basic operations
it does. You can react on this events in your code to provide some synchronization stuff
between translations system and other parts of your application.
As was mentioned before angular-translate has modular structure. So you can re-implement
some services and tell angular-translate to use them. This way standard possibilities
of angular-translate can be extended a lot.
There is a list of service types you can re-implement if you need. These are:
Services which load translations. angular-translate by default ships 3 loaders to you. But if
they don't satisfy your needs, you can create your custom loader which is perfect in your
particular situation.
Services which handle interpolation in translations. angular-translate by default uses interpolations
service of AngularJS. But if want something different you can create your custom interpolator.
Storages. Angular-tranlate can store the language chosen by the user in either local storage
or cookie storage. But if you want to use something else just create a custom storage.
And finally error handlers. Angular-translate's default error handler can log missing translations
to the console. You might want to provide some more clever error handling. In this case
feel free to create a custom error handler.
So, that's it. Thanks for watching.