1
00:00:00,180 --> 00:00:08,520
Oh, again, everyone, so and the lessons that we've already done, OK, we explained the Angler project

2
00:00:08,520 --> 00:00:13,890
and we've tried to understand the angular architecture, but we didn't make any changes in the project

3
00:00:13,890 --> 00:00:15,900
that we created in that default project.

4
00:00:15,910 --> 00:00:18,930
So I want to show you in this lesson.

5
00:00:20,200 --> 00:00:26,410
How to make a little more sense of what we've learned by making a few changes in our first project.

6
00:00:26,890 --> 00:00:27,220
All right.

7
00:00:27,220 --> 00:00:29,380
There's a great way to connect the dots, so to speak.

8
00:00:30,620 --> 00:00:35,300
So as you may remember, we said that we would use Visual Studio is code editor.

9
00:00:36,760 --> 00:00:42,870
Now, in our last Husain's we created our first project, we ran it through the idee.

10
00:00:44,240 --> 00:00:50,020
Now, I want to run the project that we created again through the editor and like this, my friends,

11
00:00:50,020 --> 00:00:51,730
our project is visible here.

12
00:00:52,980 --> 00:00:59,190
But it's not going to be visible if we haven't opened it through the ED before.

13
00:01:01,000 --> 00:01:08,890
So then we can say new and open folder where our project is located, in fact, whatever editor you're

14
00:01:08,890 --> 00:01:12,280
going to use, we do need to open the project folder first.

15
00:01:14,480 --> 00:01:19,160
As hopefully you remember, we are opening a new terminal to run the project here.

16
00:01:20,890 --> 00:01:23,890
Then we run the and serve code.

17
00:01:25,720 --> 00:01:29,980
And after our code runs, we're going to use localhost 4200.

18
00:01:33,360 --> 00:01:39,060
So now let me just point out here that unless we close the terminal, are projects going to continue

19
00:01:39,060 --> 00:01:40,500
to work on the browser?

20
00:01:42,780 --> 00:01:50,040
Or if we turn off the terminal, we need to rerun it with the code and serve.

21
00:01:55,030 --> 00:02:01,210
So here the projects are already running, so I don't need to run it again if you close it before you

22
00:02:01,210 --> 00:02:02,280
can run your project again.

23
00:02:04,020 --> 00:02:04,460
So, yes.

24
00:02:04,510 --> 00:02:08,100
Now, let's make a few changes in our first project.

25
00:02:11,340 --> 00:02:19,140
So you may remember we briefly mentioned the app folder and the components before, so now I first opened

26
00:02:19,140 --> 00:02:22,040
the page app component that HD HDMI.

27
00:02:26,820 --> 00:02:32,070
And when you look in here, you can actually see a view close to the image that we see in the browser.

28
00:02:48,240 --> 00:02:52,890
For example, we can see this top titles section in the highlight card section.

29
00:02:59,530 --> 00:03:01,810
Now, let's see this section once again in the browser.

30
00:03:05,140 --> 00:03:07,600
If I change the section here and if I write.

31
00:03:08,820 --> 00:03:13,730
Hello, World, which is always a software classic, never gets old.

32
00:03:15,390 --> 00:03:21,750
And what you see here, this section in the browser has changed like that, we didn't refresh it right.

33
00:03:22,620 --> 00:03:24,150
We just need to save the changes.

34
00:03:26,080 --> 00:03:29,890
However, here, the title part in curly brackets is fixed.

35
00:03:34,910 --> 00:03:36,380
So where does all this come from?

36
00:03:37,340 --> 00:03:44,300
Well, as I mentioned to you before, a framework consisting of angular components, for example, there

37
00:03:44,330 --> 00:03:53,580
are regulations about access to on the styling folder and abdon component Nazi, SS or Abdol components.

38
00:03:54,760 --> 00:03:58,030
Which is an important typescript component found here.

39
00:04:00,640 --> 00:04:03,790
So if I go here now, this typescript component.

40
00:04:04,690 --> 00:04:10,660
Actually, the part that will be compiled and converted to normal JavaScript, I'm going to explain

41
00:04:10,660 --> 00:04:15,270
the typescript section in a lot more detail later, but I do want to show you this right now.

42
00:04:16,090 --> 00:04:19,170
So looky here we see the title section.

43
00:04:19,510 --> 00:04:25,960
In fact, the part that we see as the title in the female component comes from the typescript component.

44
00:04:27,070 --> 00:04:29,830
And here's the part called data binding.

45
00:04:30,160 --> 00:04:30,520
All right.

46
00:04:31,500 --> 00:04:35,370
Now, this allows us to make these dynamic changes.

47
00:04:37,110 --> 00:04:39,450
And look, here I am making a small change.

48
00:04:40,440 --> 00:04:46,560
And this is actually the part in curly brackets in the HTML file.

49
00:04:47,700 --> 00:04:52,230
And when I save it and look at the browser, there's a change.

50
00:04:53,480 --> 00:04:59,600
Right, so I just want to reinforce the idea that we do not have to perform any refreshes in the browser.

51
00:05:00,760 --> 00:05:02,250
That's the way it's supposed to work.

52
00:05:04,570 --> 00:05:10,630
All right, so now let's bump up the interesting factor, right, click on the browser and say inspect.

53
00:05:12,590 --> 00:05:14,090
Now, I usually work in Krumm.

54
00:05:15,230 --> 00:05:20,390
I would like to mention that because I think it's much more comfortable to use when developing and reviewing

55
00:05:20,390 --> 00:05:20,780
code.

56
00:05:22,490 --> 00:05:25,520
So now, my friends, when we examine the code part here.

57
00:05:29,420 --> 00:05:34,730
There is the section inside the head tag in the HTML file at the top.

58
00:05:39,800 --> 00:05:46,190
And below is a script pa, so the angular framework code and our build code.

59
00:05:47,930 --> 00:05:50,660
And there is an app route partition.

60
00:05:55,010 --> 00:05:58,400
In fact, we can see this in component to Yazz.

61
00:06:03,580 --> 00:06:07,060
In fact, we can see this code index HTML underscores.

62
00:06:09,320 --> 00:06:12,500
And look, there's also approved.

63
00:06:16,630 --> 00:06:21,310
And of course, we can't see the script part because it's dynamically injected.

64
00:06:22,300 --> 00:06:26,680
In fact, angular loads, this index, that HMO page every time.

65
00:06:29,080 --> 00:06:36,070
So later, we'll have these dynamically injected script imports and the script imports will dynamically

66
00:06:36,070 --> 00:06:38,650
replace the approved with our own component.

67
00:06:39,400 --> 00:06:39,780
All right.

68
00:06:40,180 --> 00:06:42,250
I think you get the idea it's enough for now.

69
00:06:43,530 --> 00:06:50,760
So that's the angular logic, a little bit more in depth, but of course, if you haven't worked with

70
00:06:50,760 --> 00:06:53,760
this kind of framework before, it's very normal to go.

71
00:06:54,600 --> 00:06:55,710
Wait, what?

72
00:06:56,920 --> 00:07:01,470
So we're going to talk about each section in much more detail throughout the course, right?

73
00:07:01,720 --> 00:07:08,710
I wanted to give you a basic overview and I'm going to be here to help you understand more clearly as

74
00:07:08,710 --> 00:07:10,090
we prepare projects.

75
00:07:11,320 --> 00:07:13,710
Well, pretty much everything that you may encounter.

76
00:07:14,230 --> 00:07:20,380
So for now, I'd advise you to just kick back and you'll see everything more clearly in the coming sections.

77
00:07:20,530 --> 00:07:24,610
Remember, we're going to dig in the details step by step as we go on.

78
00:07:24,890 --> 00:07:26,120
So see in the next lesson.

79
00:07:26,540 --> 00:07:27,280
Goodbye for now.