Oh, again, everyone, so and the lessons that we've already done, OK, we explained the Angler project
and we've tried to understand the angular architecture, but we didn't make any changes in the project
that we created in that default project.
So I want to show you in this lesson.
How to make a little more sense of what we've learned by making a few changes in our first project.
All right.
There's a great way to connect the dots, so to speak.
So as you may remember, we said that we would use Visual Studio is code editor.
Now, in our last Husain's we created our first project, we ran it through the idee.
Now, I want to run the project that we created again through the editor and like this, my friends,
our project is visible here.
But it's not going to be visible if we haven't opened it through the ED before.
So then we can say new and open folder where our project is located, in fact, whatever editor you're
going to use, we do need to open the project folder first.
As hopefully you remember, we are opening a new terminal to run the project here.
Then we run the and serve code.
And after our code runs, we're going to use localhost 4200.
So now let me just point out here that unless we close the terminal, are projects going to continue
to work on the browser?
Or if we turn off the terminal, we need to rerun it with the code and serve.
So here the projects are already running, so I don't need to run it again if you close it before you
can run your project again.
So, yes.
Now, let's make a few changes in our first project.
So you may remember we briefly mentioned the app folder and the components before, so now I first opened
the page app component that HD HDMI.
And when you look in here, you can actually see a view close to the image that we see in the browser.
For example, we can see this top titles section in the highlight card section.
Now, let's see this section once again in the browser.
If I change the section here and if I write.
Hello, World, which is always a software classic, never gets old.
And what you see here, this section in the browser has changed like that, we didn't refresh it right.
We just need to save the changes.
However, here, the title part in curly brackets is fixed.
So where does all this come from?
Well, as I mentioned to you before, a framework consisting of angular components, for example, there
are regulations about access to on the styling folder and abdon component Nazi, SS or Abdol components.
Which is an important typescript component found here.
So if I go here now, this typescript component.
Actually, the part that will be compiled and converted to normal JavaScript, I'm going to explain
the typescript section in a lot more detail later, but I do want to show you this right now.
So looky here we see the title section.
In fact, the part that we see as the title in the female component comes from the typescript component.
And here's the part called data binding.
All right.
Now, this allows us to make these dynamic changes.
And look, here I am making a small change.
And this is actually the part in curly brackets in the HTML file.
And when I save it and look at the browser, there's a change.
Right, so I just want to reinforce the idea that we do not have to perform any refreshes in the browser.
That's the way it's supposed to work.
All right, so now let's bump up the interesting factor, right, click on the browser and say inspect.
Now, I usually work in Krumm.
I would like to mention that because I think it's much more comfortable to use when developing and reviewing
code.
So now, my friends, when we examine the code part here.
There is the section inside the head tag in the HTML file at the top.
And below is a script pa, so the angular framework code and our build code.
And there is an app route partition.
In fact, we can see this in component to Yazz.
In fact, we can see this code index HTML underscores.
And look, there's also approved.
And of course, we can't see the script part because it's dynamically injected.
In fact, angular loads, this index, that HMO page every time.
So later, we'll have these dynamically injected script imports and the script imports will dynamically
replace the approved with our own component.
All right.
I think you get the idea it's enough for now.
So that's the angular logic, a little bit more in depth, but of course, if you haven't worked with
this kind of framework before, it's very normal to go.
Wait, what?
So we're going to talk about each section in much more detail throughout the course, right?
I wanted to give you a basic overview and I'm going to be here to help you understand more clearly as
we prepare projects.
Well, pretty much everything that you may encounter.
So for now, I'd advise you to just kick back and you'll see everything more clearly in the coming sections.
Remember, we're going to dig in the details step by step as we go on.
So see in the next lesson.
Goodbye for now.