1
00:00:00,720 --> 00:00:01,890
Hello again, everyone.

2
00:00:02,280 --> 00:00:08,130
So up until this time, we've been answering the question, what is angular?

3
00:00:09,060 --> 00:00:16,590
And we talked briefly about angular features, then you may think, well, we kind of got a little sidetracked,

4
00:00:16,980 --> 00:00:19,770
but you'll see why we did not.

5
00:00:20,670 --> 00:00:24,390
In fact, it's time to talk in more detail.

6
00:00:25,080 --> 00:00:31,710
In this section, we will discuss the main features of angular dive into some details and understand

7
00:00:31,710 --> 00:00:33,700
a little bit more clearly what's going on.

8
00:00:35,970 --> 00:00:43,590
Now, I'm sure you remember in the very first part, we included Bootstrap and our first project and

9
00:00:43,980 --> 00:00:46,710
we prepared a small example like this.

10
00:00:47,670 --> 00:00:53,850
So in other words, the page returned by the Seelie and Reach from localhost 4200.

11
00:00:56,100 --> 00:01:01,970
Now, of course, you remember that we prepared the examples that we saw here on the Dow component e-mail

12
00:01:01,980 --> 00:01:02,370
page.

13
00:01:05,810 --> 00:01:07,460
And look at this when we delete them.

14
00:01:09,600 --> 00:01:13,760
And say the changes, everything in our page is gone.

15
00:01:16,110 --> 00:01:22,920
Now, we've made this change and when we save the pages automatically refreshed without refreshing it

16
00:01:22,920 --> 00:01:23,580
in the browser.

17
00:01:24,780 --> 00:01:26,460
So how does this happen?

18
00:01:27,070 --> 00:01:29,340
How does the browser know how to change these things?

19
00:01:31,650 --> 00:01:39,450
Well, what we've looked at so far looks like the only page processed here is an opt out component,

20
00:01:39,450 --> 00:01:41,070
not HTML.

21
00:01:41,970 --> 00:01:43,530
But of course, that can't be the case.

22
00:01:44,370 --> 00:01:44,720
Right.

23
00:01:47,070 --> 00:01:48,840
I think I mentioned this before.

24
00:01:50,130 --> 00:01:54,500
So we know that the page processed here is actually index data.

25
00:01:54,540 --> 00:02:02,520
Shimao, that is the page served by this server is indexed HDMI out.

26
00:02:04,590 --> 00:02:10,030
So this page allows us to make single page applications with angular.

27
00:02:11,340 --> 00:02:17,080
So when we look at this page, we see a normal e-mail page had section and body section.

28
00:02:18,720 --> 00:02:22,310
Now when we look at that section, there are normal human code.

29
00:02:24,840 --> 00:02:30,790
But here is a title part that appears in the browser or the link part with the fabric on here.

30
00:02:32,310 --> 00:02:38,370
However, the part that says app root in the body section is different from the codes that we've seen

31
00:02:38,370 --> 00:02:39,210
in HTML.

32
00:02:41,290 --> 00:02:45,790
Look here, we don't see anything that says approved in the browser.

33
00:02:47,100 --> 00:02:49,200
However, when we say inspect.

34
00:02:52,090 --> 00:02:59,070
We can see that the page that is run is index dot, html, and there is app route here.

35
00:03:01,140 --> 00:03:10,420
So actually Apple is not HTML code, the root component that Seelie created for us, which will connect

36
00:03:10,420 --> 00:03:11,980
the entire application.

37
00:03:12,340 --> 00:03:13,760
That's what's going on here.

38
00:03:15,580 --> 00:03:22,220
So here is the app module, which is the composition of the app components.

39
00:03:24,370 --> 00:03:25,090
All righty then.

40
00:03:25,120 --> 00:03:31,240
So in this section we're going to talk about what components mean and what their functions are in the

41
00:03:31,240 --> 00:03:32,890
nitty gritty details.

42
00:03:33,460 --> 00:03:38,050
But don't get yourself in the weeds.

43
00:03:42,630 --> 00:03:50,610
So now let's open up about components that to yes and yes, it's a typescript file, so we'll look here

44
00:03:50,610 --> 00:03:53,190
and we'll see the component decorator.

45
00:03:58,900 --> 00:04:03,880
Actually, we see the app route indicated by the selector.

46
00:04:05,860 --> 00:04:10,060
Now here's the app route we see in the index, not e-mail file.

47
00:04:10,960 --> 00:04:17,950
So in other words, with the app route here, we define app, that component to the index, not HTML

48
00:04:17,950 --> 00:04:18,340
page.

49
00:04:19,180 --> 00:04:25,390
So in a way, we transfer the information on this page into index HTML file.

50
00:04:28,710 --> 00:04:37,080
So look here, while transferring this page, there is also an HTML NCSA page here, so you see how

51
00:04:37,080 --> 00:04:40,330
we're actually transferring the entire app module.

52
00:04:42,180 --> 00:04:48,630
So let me show you, when we open the app component HTML page the information here or the information

53
00:04:48,630 --> 00:04:58,120
in the app component that CSS file by defining app route with Selector and our app component stats file.

54
00:04:58,500 --> 00:05:06,720
We've now moved all the app component information in this file to index dot html.

55
00:05:09,260 --> 00:05:14,430
So now the real question is, how does Angular know how to run the index, not the amount paid?

56
00:05:15,500 --> 00:05:19,390
And how do we run all this information combined?

57
00:05:19,790 --> 00:05:20,660
How does it do that?

58
00:05:21,770 --> 00:05:28,670
Well, here, the index that each page is presented in the browser and the script is imported at the

59
00:05:28,670 --> 00:05:28,960
end.

60
00:05:30,500 --> 00:05:34,430
So these scripts are automatically injected by the Seelie.

61
00:05:35,630 --> 00:05:40,860
So we don't necessarily see the script part of the indexed e-mail page.

62
00:05:41,300 --> 00:05:43,640
It's actually a little confusing in that way.

63
00:05:43,640 --> 00:05:43,990
Right.

64
00:05:44,000 --> 00:05:53,180
But every time we rebuild our project while running it with engy serve, this script will automatically

65
00:05:53,180 --> 00:05:56,330
be imported into the index, not HTML page.

66
00:05:56,960 --> 00:06:03,040
And finally, this imported script is added to our code and presented in the browser.

67
00:06:04,160 --> 00:06:10,940
So the script files will be executed and we can actually say they're the first codes to be run.

68
00:06:14,000 --> 00:06:16,970
So how do we know that we have the first code to run?

69
00:06:18,410 --> 00:06:22,420
Well, the answer to this is in the main that's file.

70
00:06:23,510 --> 00:06:25,200
So already we call the main file.

71
00:06:25,700 --> 00:06:32,540
So when we look at this file, we see a few imported files and the part showing which modules run first

72
00:06:32,540 --> 00:06:33,530
in the browser.

73
00:06:34,310 --> 00:06:39,990
So here is the part that I want to draw our attention to bootstrap module.

74
00:06:41,030 --> 00:06:43,250
So this is the first file that will be run.

75
00:06:46,500 --> 00:06:47,760
So that's at module.

76
00:06:52,710 --> 00:06:53,980
And when we look into it.

77
00:06:57,410 --> 00:07:04,640
What's imported here and Britain here is actually the app, that module, that's file.

78
00:07:08,890 --> 00:07:15,100
Now, if we look a little bit deeper, the airport module that's file here, we see the bootstrap directory

79
00:07:15,100 --> 00:07:22,420
containing all app components and so Angular knows where to start and how to move forward.

80
00:07:23,830 --> 00:07:31,510
So Angular starts with the main text file and is redirected to the app module text file from there.

81
00:07:37,470 --> 00:07:40,770
And here it's routed to all components.

82
00:07:46,840 --> 00:07:54,190
And then ANGULAR analyses the Abdah components file and which files to run.

83
00:07:58,730 --> 00:08:05,750
So when we look here again, it sees the selector and app route and runs our index, that HTML page

84
00:08:07,190 --> 00:08:11,720
and also looks here and our HDMI file, it's attached.

85
00:08:12,050 --> 00:08:14,660
And here's a file that we want to display on the page.

86
00:08:17,300 --> 00:08:20,820
Now, let's say that we want to add style to this.

87
00:08:20,870 --> 00:08:30,120
Well, it's done with a ceasefire, and when we want to add new style changes, we just add our ceasefire.

88
00:08:33,110 --> 00:08:38,810
So if you take a step back and look at it, you could say that Angular works in a loop.

89
00:08:41,910 --> 00:08:43,730
So just bring it all together then.

90
00:08:44,480 --> 00:08:47,510
Angular starts with the main dots file.

91
00:08:49,180 --> 00:08:58,420
This file is then redirected to angular dot module that TIAs, then it knows from here that it's got

92
00:08:58,420 --> 00:09:00,360
to run app components.

93
00:09:01,600 --> 00:09:06,620
And then finally the circle is completed in the app component Dotti s file.

94
00:09:07,300 --> 00:09:12,160
So here it's passed to the index, not HTML file with approved.

95
00:09:13,840 --> 00:09:19,960
So app component files are run and angular operations are displayed in the browser.

96
00:09:22,990 --> 00:09:23,810
Simple, huh?

97
00:09:24,220 --> 00:09:32,890
Now I realize that it can be a bit tricky and a whole lot confusing, but as we progress here, it's

98
00:09:32,890 --> 00:09:36,430
going to be a lot easier to comprehend, I guess.

99
00:09:37,090 --> 00:09:40,660
Well, no, I believe I believe that to be true.

100
00:09:40,680 --> 00:09:42,750
I'm going to get easier.

101
00:09:44,380 --> 00:09:50,770
So just to recap, in this section, we learned the component logic and created our own components.

102
00:09:51,070 --> 00:09:53,170
OK, so I want to see in the next lesson.

103
00:30:09,670 --> 00:30:10,810
Hello again, everyone.

104
00:30:11,230 --> 00:30:17,110
So up until this time, we've been answering the question, what is angular?

105
00:30:18,010 --> 00:30:25,570
And we talked briefly about angular features, then you may think, well, we kind of got a little sidetracked,

106
00:30:25,960 --> 00:30:28,720
but you'll see why we did not.

107
00:30:29,620 --> 00:30:34,660
In fact, it's time to talk in more detail on this section.

108
00:30:34,660 --> 00:30:41,500
We will discuss the main features of angular dive into some details and understand a little bit more

109
00:30:41,500 --> 00:30:45,190
clearly what's going on now.

110
00:30:45,190 --> 00:30:53,830
I'm sure you remember in the very first part, we included Bootstrap and our first project and we prepared

111
00:30:53,860 --> 00:30:55,650
a small example like this.

112
00:30:56,620 --> 00:31:02,790
So in other words, the page returned by the Seelie and Reach from localhost 4200.

113
00:31:05,050 --> 00:31:10,240
Now, of course, you remember that we prepared the examples that we saw here on the Dow component,

114
00:31:10,250 --> 00:31:11,320
that e-mail page.

115
00:31:12,490 --> 00:31:13,240
And look at this.

116
00:31:13,240 --> 00:31:18,700
When we delete them and say the changes, everything in our page is gone.

117
00:31:20,900 --> 00:31:27,700
So now we've made this change and when we save the pages automatically refreshed without refreshing

118
00:31:27,700 --> 00:31:28,520
it in the browser.

119
00:31:29,710 --> 00:31:31,380
So how does this happen?

120
00:31:31,990 --> 00:31:34,270
How does the browser know how to change these things?

121
00:31:36,550 --> 00:31:45,970
Well, what we've looked at so far looks like the only page processed here is AFG component, not HTML.

122
00:31:46,870 --> 00:31:49,660
But of course that can't be the case, right?

123
00:31:52,000 --> 00:31:53,740
I think I mentioned this before.

124
00:31:55,030 --> 00:31:59,420
So we know that the page process here is actually index data.

125
00:31:59,450 --> 00:32:07,400
Shimao, that is the page served by this server is indexed HTML.

126
00:32:09,520 --> 00:32:14,930
So this page allows us to make single page applications with ANGULAR.

127
00:32:16,240 --> 00:32:22,010
So when we look at this page, we see a normal HTML page, head section and body section.

128
00:32:23,620 --> 00:32:32,410
Now when we look at that head section, there are normal human code, but here is a title part that

129
00:32:32,410 --> 00:32:35,720
appears in the browser or the link part with the fabric on here.

130
00:32:37,240 --> 00:32:43,300
However, the part that says app root in the body section is different from the codes that we've seen

131
00:32:43,300 --> 00:32:44,140
in HTML.

132
00:32:46,210 --> 00:32:46,810
Look at here.

133
00:32:47,380 --> 00:32:50,710
We don't see anything that says approved in the browser.

134
00:32:52,030 --> 00:33:00,220
However, when we say inspect, we can see that the page that is run is indexed HTML and there is app

135
00:33:00,400 --> 00:33:01,660
root here.

136
00:33:03,730 --> 00:33:13,030
So actually Apple is not HTML code, the root component that Seelie created for us, which will connect

137
00:33:13,030 --> 00:33:14,570
the entire application.

138
00:33:14,950 --> 00:33:16,340
That's what's going on here.

139
00:33:18,190 --> 00:33:24,820
So here is the app module, which is the composition of the app component.

140
00:33:26,980 --> 00:33:27,690
All righty then.

141
00:33:27,700 --> 00:33:33,850
So in this section we're going to talk about what components mean and what their functions are in the

142
00:33:33,850 --> 00:33:35,470
nitty gritty details.

143
00:33:36,070 --> 00:33:40,660
But don't get yourself in the weeds.

144
00:33:45,240 --> 00:33:53,220
So now let's open up about components that to yes and yes, it's a typescript file, so we'll look here

145
00:33:53,220 --> 00:33:55,770
and we'll see the component decorator.

146
00:33:57,780 --> 00:34:02,760
Actually we see the root indicated by the selector.

147
00:34:04,740 --> 00:34:08,940
Now, here's the output we see in the index e-mail file.

148
00:34:09,840 --> 00:34:17,230
So in other words, with the app route here, we define that component to the index dot HDMI page.

149
00:34:18,060 --> 00:34:24,250
So in a way, we transfer the information on this page into index HTML file.

150
00:34:25,080 --> 00:34:31,550
So look here, while transferring this page, there is also an HTML NCIS page here.

151
00:34:32,730 --> 00:34:36,700
So you see how we're actually transferring the entire app module.

152
00:34:39,540 --> 00:34:45,990
So let me show you, when we open the app component, that HTML page the information here or the information

153
00:34:45,990 --> 00:34:55,500
in the app component that CSS file by defining app route with Selector and our app component stats file,

154
00:34:55,860 --> 00:35:04,080
we've now moved all the app component information in this file to indexed dot html.

155
00:35:06,630 --> 00:35:13,350
So now the real question is, how does Angular know how to run the index, not the amount paid, and

156
00:35:13,980 --> 00:35:16,770
how do we run all this information combined?

157
00:35:17,130 --> 00:35:18,030
How does it do that?

158
00:35:19,140 --> 00:35:26,040
Well, here, the index that each page is presented in the browser and the script is imported at the

159
00:35:26,040 --> 00:35:26,310
end.

160
00:35:27,890 --> 00:35:36,380
So these scripts are automatically injected by the Seelie, so we don't necessarily see the script part

161
00:35:36,380 --> 00:35:38,220
of the indexed e-mail page.

162
00:35:38,660 --> 00:35:41,000
It's actually a little confusing in that way.

163
00:35:41,000 --> 00:35:41,350
Right.

164
00:35:41,360 --> 00:35:50,540
But every time we rebuild our project while running it with Engy, sir, this script will automatically

165
00:35:50,540 --> 00:35:53,690
be imported into the index, not HTML page.

166
00:35:54,320 --> 00:36:00,380
And finally, this imported script is added to our code and presented in the browser.

167
00:36:01,520 --> 00:36:08,280
So the script files will be executed and we can actually say they're the first codes to be run.

168
00:36:11,330 --> 00:36:14,330
So how do we know that we have the first code to run?

169
00:36:15,770 --> 00:36:19,780
Well, the answer to this is in the main that's file.

170
00:36:20,870 --> 00:36:22,560
So already we call the main file.

171
00:36:23,030 --> 00:36:29,900
So when we look at this file, we see a few imported files and the part showing which modules run first

172
00:36:29,900 --> 00:36:30,890
in the browser.

173
00:36:31,670 --> 00:36:37,350
So here is the part that I want to draw our attention to bootstrap module.

174
00:36:38,390 --> 00:36:40,610
So this is the first file that will be run.

175
00:36:42,650 --> 00:36:46,490
So that's at module when we look into it.

176
00:36:47,360 --> 00:36:52,430
What's imported here and written here is actually the app.

177
00:36:52,430 --> 00:36:54,590
That module that's file.

178
00:36:58,850 --> 00:37:05,060
Now, if we look a little bit deeper, the airport module that's file here, we see the bootstrap directory

179
00:37:05,060 --> 00:37:12,380
containing all components and so Angular knows where to start and how to move forward.

180
00:37:13,790 --> 00:37:22,880
So Angular starts with the main text file and is redirected to the app module text file from there and

181
00:37:22,880 --> 00:37:23,300
here.

182
00:37:23,300 --> 00:37:33,050
It's routed to all app components and then angular analyses, the app component components file and

183
00:37:33,230 --> 00:37:34,640
which files to run.

184
00:37:36,500 --> 00:37:43,520
So when we look here again, it sees the selector and app route and runs our index, that HTML page

185
00:37:44,960 --> 00:37:49,460
and also looks here and our HDMI file, it's attached.

186
00:37:49,800 --> 00:37:52,430
And here's a file that we want to display on the page.

187
00:37:55,110 --> 00:37:58,630
Now let's say that we want to add style to this.

188
00:37:58,640 --> 00:38:07,520
Well, it's done with a case file and when we want to add new style changes, we just add our success

189
00:38:07,520 --> 00:38:07,890
file.

190
00:38:10,850 --> 00:38:16,570
So if you take a step back and look at it, you could say that Angular works in a loop.

191
00:38:19,670 --> 00:38:21,500
So just bring it all together then.

192
00:38:22,220 --> 00:38:25,270
Angular starts with the main dots file.

193
00:38:26,930 --> 00:38:36,350
This file is then redirected to angular dot module that TIAs that it knows from here that it's got to

194
00:38:36,350 --> 00:38:38,120
run app components.

195
00:38:39,380 --> 00:38:43,470
And then finally the circle is completed in the app component he?

196
00:38:43,580 --> 00:38:44,400
S file.

197
00:38:45,080 --> 00:38:49,910
So here it's passed to the index html file with approved.

198
00:38:51,620 --> 00:38:57,740
So app component files are run and angular operations are displayed in the browser.

199
00:38:58,850 --> 00:39:01,550
BOEM simple huh.

200
00:39:01,970 --> 00:39:10,640
Now I realize that it can be a bit tricky and a whole lot confusing, but as we progress here, it's

201
00:39:10,640 --> 00:39:14,180
going to be a lot easier to comprehend, I guess.

202
00:39:14,840 --> 00:39:20,490
Well, no, I believe, I believe that to be true going to get easier.

203
00:39:22,160 --> 00:39:28,500
So just to recap, in this section we learned the component logic and created our own components.

204
00:39:28,850 --> 00:39:30,950
OK, so I want to see in the next lesson.