Hello, everyone, and welcome back in this list, and we are going to start a new section of our course,
we are going to talk about angular internationalization.
We are going to take this application here and we are going to translate it to French.
We are going to see how to handle applications with multiple languages in general as we are about to
learn in the next few lessons, angular as excellent built-In internationalization support.
So let's start translating here our application.
Let's start, for example, by this button here, the added course button.
So let's say that this string here added course would need to be translated into other multiple languages.
The first step in order to make these text translatable is to mark here the button with the Aetate in
an attribute.
So this is an abbreviation that means internationalization, 18 being the number of letters between
E and N.
It's a very common abbreviation for the word internationalization.
Notice that this is not an angular directive.
It's simply a custom attribute that tools such as the angular zeolite are going to use to extract the
string, as we will see in a moment before going any further.
Let's now see how this attribute is actually being used.
We are going to head over here to the terminal and we're going to stop our angular development server.
Next, we are going to run an angular zeolite command that is going to extract from this application
all the strings that need to be translated in order to perform this extraction.
We are going to run the command Engie X for Extract Aetate in N.
If we run this command after a moment, we are going to notice that here in the root of our application,
we're going to find a message is file.
The extraction is completed.
So let's have a look at the file.
You will find it here under the source folder.
It's these file messages that Excel F so Exelis, it's only one of the possible formats that we can
use in order to extract strings from our application.
If we open this up, we are going to see that this is an example file that contains here our string.
Have a look at it.
It's here under this translation unit and we have here the source text and of the source tag and the
string is added course as expected, in order to have syntax highlighting, it's important to go to
your editor and associate, the Xolair extension to an XML code syntax highlighting.
So we are going to open here to the preferences on Webster.
We are going to look for the XML file type and here we are going to add a new extension standard Excel.
If we now apply and click, OK, we are going to see that now.
Our document is being syntax highlighted as expected.
Let's have a better look at this file.
So as we can see, we have the string ready to be translated.
And we also have here a unique ADA that identifies this particular string.
Let's talk about how this idea is getting generated.
This file is going to be sent to a translator that will then use some sort of user interface to load
this data, provide the translation and extract back a translated file that is going to contain the
translated text.
We are then going to take that file and we are going to integrate it into our build system.
So as you can see, in order for all this process to work correctly, it's essential that we understand
how this unique idea works.
What makes this idea change and how was this idea generated?
In order to understand how this unique identifier works, let's switch over here to our application.
And let's apply here another message that we need to have translated.
We are going to add here an H for tag and we're going to adhere to the message.
Welcome to the angular coordinative.
Of course, now we are going to mark this string as something that needs translation.
So, again, we are going to apply here the Aetate in an attribute.
Let's now quickly switch over to the terminal and run again the extraction command.
After a couple of moments, the extraction is completed and if we switch here to our messages file,
we are going to see that now.
We have here two translation units instead of one, we have one per each string that needs to be translated
and each of the translation units has its own unique identifier.
Let's keep on the clipboard.
These identified here that ends in Fredi.
Let's switch over here to our application component and let's even keep here the idea in a comment.
We are going to try to understand how this idea works.
So this is the V that was generated ending on Fredi.
Let's see what happens if we take this page for Tag and we move it to somewhere else in the template.
If we switch to the terminal and we run again our extraction, we are going to see that the idea is
still the same.
Let's confirm if that's the case.
We are going to copy this idea that we have saved from the previous extraction and we are going to check
if it still exists here.
So if we find it, we are going to see that it's indeed still here.
We still have the exact same idea.
So as we move our age for tag throughout the page, as we refactor the page, if this text here doesn't
change, then the idea is going to remain the same.
Let's see what happens if we now change the text here.
Somehow, let's remove here the words deep dive and run again our extraction.
Once the extraction is completed, we are going to switch to our messages file and we're going to see
that.
Indeed, our previous idea that ended in free the no longer exists here in this file in its place.
We have here a completely new idea ending in five.
If so, as you can see, one of the components that is used to generate these unique V is the content
of the string itself.
This is great because if you change the string in development and the string needs to be retranslated,
then in our next internationalization extraction, that string is going to be picked up as a completely
new translation unit and it will be transparently sent to the translator.
So we don't have to manually identify the strings that need to be translated again.
Our extraction tool will continuously find new strings to translate automatically using these unique
idea generation process.
Let's learn more about what makes up this unique idea and how can we provide extra information about
the string to help the translator provide an accurate translation that matches the context onto which
the string is being used.