1
00:00:03,700 --> 00:00:09,450
Hello, everyone, and welcome back in this list, and we are going to start a new section of our course,

2
00:00:09,460 --> 00:00:12,690
we are going to talk about angular internationalization.

3
00:00:12,700 --> 00:00:17,430
We are going to take this application here and we are going to translate it to French.

4
00:00:17,440 --> 00:00:23,110
We are going to see how to handle applications with multiple languages in general as we are about to

5
00:00:23,110 --> 00:00:28,990
learn in the next few lessons, angular as excellent built-In internationalization support.

6
00:00:29,200 --> 00:00:31,810
So let's start translating here our application.

7
00:00:31,990 --> 00:00:36,120
Let's start, for example, by this button here, the added course button.

8
00:00:36,130 --> 00:00:42,630
So let's say that this string here added course would need to be translated into other multiple languages.

9
00:00:42,790 --> 00:00:50,230
The first step in order to make these text translatable is to mark here the button with the Aetate in

10
00:00:50,230 --> 00:00:51,670
an attribute.

11
00:00:51,700 --> 00:00:58,750
So this is an abbreviation that means internationalization, 18 being the number of letters between

12
00:00:58,750 --> 00:01:00,220
E and N.

13
00:01:00,250 --> 00:01:04,269
It's a very common abbreviation for the word internationalization.

14
00:01:04,420 --> 00:01:07,840
Notice that this is not an angular directive.

15
00:01:07,840 --> 00:01:14,410
It's simply a custom attribute that tools such as the angular zeolite are going to use to extract the

16
00:01:14,410 --> 00:01:18,320
string, as we will see in a moment before going any further.

17
00:01:18,340 --> 00:01:21,570
Let's now see how this attribute is actually being used.

18
00:01:21,580 --> 00:01:26,860
We are going to head over here to the terminal and we're going to stop our angular development server.

19
00:01:27,070 --> 00:01:32,530
Next, we are going to run an angular zeolite command that is going to extract from this application

20
00:01:32,710 --> 00:01:37,320
all the strings that need to be translated in order to perform this extraction.

21
00:01:37,330 --> 00:01:42,730
We are going to run the command Engie X for Extract Aetate in N.

22
00:01:42,850 --> 00:01:49,270
If we run this command after a moment, we are going to notice that here in the root of our application,

23
00:01:49,270 --> 00:01:51,670
we're going to find a message is file.

24
00:01:51,850 --> 00:01:53,440
The extraction is completed.

25
00:01:53,440 --> 00:01:55,120
So let's have a look at the file.

26
00:01:55,120 --> 00:01:57,900
You will find it here under the source folder.

27
00:01:57,910 --> 00:02:05,560
It's these file messages that Excel F so Exelis, it's only one of the possible formats that we can

28
00:02:05,560 --> 00:02:09,160
use in order to extract strings from our application.

29
00:02:09,310 --> 00:02:15,720
If we open this up, we are going to see that this is an example file that contains here our string.

30
00:02:15,730 --> 00:02:16,570
Have a look at it.

31
00:02:16,570 --> 00:02:22,750
It's here under this translation unit and we have here the source text and of the source tag and the

32
00:02:22,750 --> 00:02:28,870
string is added course as expected, in order to have syntax highlighting, it's important to go to

33
00:02:28,870 --> 00:02:35,170
your editor and associate, the Xolair extension to an XML code syntax highlighting.

34
00:02:35,170 --> 00:02:38,380
So we are going to open here to the preferences on Webster.

35
00:02:38,480 --> 00:02:45,940
We are going to look for the XML file type and here we are going to add a new extension standard Excel.

36
00:02:46,000 --> 00:02:49,420
If we now apply and click, OK, we are going to see that now.

37
00:02:49,450 --> 00:02:53,040
Our document is being syntax highlighted as expected.

38
00:02:53,170 --> 00:02:55,330
Let's have a better look at this file.

39
00:02:55,340 --> 00:02:58,810
So as we can see, we have the string ready to be translated.

40
00:02:58,930 --> 00:03:05,200
And we also have here a unique ADA that identifies this particular string.

41
00:03:05,320 --> 00:03:08,630
Let's talk about how this idea is getting generated.

42
00:03:08,710 --> 00:03:15,820
This file is going to be sent to a translator that will then use some sort of user interface to load

43
00:03:15,820 --> 00:03:22,570
this data, provide the translation and extract back a translated file that is going to contain the

44
00:03:22,570 --> 00:03:23,940
translated text.

45
00:03:23,980 --> 00:03:28,740
We are then going to take that file and we are going to integrate it into our build system.

46
00:03:28,750 --> 00:03:34,510
So as you can see, in order for all this process to work correctly, it's essential that we understand

47
00:03:34,510 --> 00:03:37,090
how this unique idea works.

48
00:03:37,090 --> 00:03:42,250
What makes this idea change and how was this idea generated?

49
00:03:42,370 --> 00:03:47,800
In order to understand how this unique identifier works, let's switch over here to our application.

50
00:03:47,920 --> 00:03:52,240
And let's apply here another message that we need to have translated.

51
00:03:52,360 --> 00:03:56,850
We are going to add here an H for tag and we're going to adhere to the message.

52
00:03:56,980 --> 00:03:59,490
Welcome to the angular coordinative.

53
00:03:59,500 --> 00:04:04,690
Of course, now we are going to mark this string as something that needs translation.

54
00:04:04,700 --> 00:04:09,190
So, again, we are going to apply here the Aetate in an attribute.

55
00:04:09,340 --> 00:04:14,530
Let's now quickly switch over to the terminal and run again the extraction command.

56
00:04:14,650 --> 00:04:20,560
After a couple of moments, the extraction is completed and if we switch here to our messages file,

57
00:04:20,560 --> 00:04:21,970
we are going to see that now.

58
00:04:21,970 --> 00:04:29,260
We have here two translation units instead of one, we have one per each string that needs to be translated

59
00:04:29,320 --> 00:04:34,030
and each of the translation units has its own unique identifier.

60
00:04:34,180 --> 00:04:35,890
Let's keep on the clipboard.

61
00:04:36,040 --> 00:04:39,460
These identified here that ends in Fredi.

62
00:04:39,490 --> 00:04:46,630
Let's switch over here to our application component and let's even keep here the idea in a comment.

63
00:04:46,780 --> 00:04:49,900
We are going to try to understand how this idea works.

64
00:04:49,900 --> 00:04:53,680
So this is the V that was generated ending on Fredi.

65
00:04:53,710 --> 00:05:00,370
Let's see what happens if we take this page for Tag and we move it to somewhere else in the template.

66
00:05:00,610 --> 00:05:06,880
If we switch to the terminal and we run again our extraction, we are going to see that the idea is

67
00:05:06,880 --> 00:05:07,760
still the same.

68
00:05:07,870 --> 00:05:09,760
Let's confirm if that's the case.

69
00:05:09,760 --> 00:05:15,340
We are going to copy this idea that we have saved from the previous extraction and we are going to check

70
00:05:15,340 --> 00:05:17,150
if it still exists here.

71
00:05:17,230 --> 00:05:21,170
So if we find it, we are going to see that it's indeed still here.

72
00:05:21,220 --> 00:05:23,960
We still have the exact same idea.

73
00:05:23,980 --> 00:05:31,660
So as we move our age for tag throughout the page, as we refactor the page, if this text here doesn't

74
00:05:31,660 --> 00:05:35,120
change, then the idea is going to remain the same.

75
00:05:35,230 --> 00:05:38,620
Let's see what happens if we now change the text here.

76
00:05:38,620 --> 00:05:44,440
Somehow, let's remove here the words deep dive and run again our extraction.

77
00:05:44,470 --> 00:05:49,570
Once the extraction is completed, we are going to switch to our messages file and we're going to see

78
00:05:49,570 --> 00:05:49,780
that.

79
00:05:49,780 --> 00:05:57,580
Indeed, our previous idea that ended in free the no longer exists here in this file in its place.

80
00:05:57,580 --> 00:06:01,360
We have here a completely new idea ending in five.

81
00:06:01,360 --> 00:06:08,140
If so, as you can see, one of the components that is used to generate these unique V is the content

82
00:06:08,140 --> 00:06:09,580
of the string itself.

83
00:06:09,730 --> 00:06:16,630
This is great because if you change the string in development and the string needs to be retranslated,

84
00:06:16,660 --> 00:06:23,590
then in our next internationalization extraction, that string is going to be picked up as a completely

85
00:06:23,590 --> 00:06:28,300
new translation unit and it will be transparently sent to the translator.

86
00:06:28,360 --> 00:06:33,460
So we don't have to manually identify the strings that need to be translated again.

87
00:06:33,490 --> 00:06:40,540
Our extraction tool will continuously find new strings to translate automatically using these unique

88
00:06:40,540 --> 00:06:42,450
idea generation process.

89
00:06:42,550 --> 00:06:49,240
Let's learn more about what makes up this unique idea and how can we provide extra information about

90
00:06:49,240 --> 00:06:55,540
the string to help the translator provide an accurate translation that matches the context onto which

91
00:06:55,540 --> 00:06:57,150
the string is being used.