Hello again, everyone.
So up until this time, we've been answering the question, what is angular?
And we talked briefly about angular features, then you may think, well, we kind of got a little sidetracked,
but you'll see why we did not.
In fact, it's time to talk in more detail.
In this section, we will discuss the main features of angular dive into some details and understand
a little bit more clearly what's going on.
Now, I'm sure you remember in the very first part, we included Bootstrap and our first project and
we prepared a small example like this.
So in other words, the page returned by the Seelie and Reach from localhost 4200.
Now, of course, you remember that we prepared the examples that we saw here on the Dow component e-mail
page.
And look at this when we delete them.
And say the changes, everything in our page is gone.
Now, we've made this change and when we save the pages automatically refreshed without refreshing it
in the browser.
So how does this happen?
How does the browser know how to change these things?
Well, what we've looked at so far looks like the only page processed here is an opt out component,
not HTML.
But of course, that can't be the case.
Right.
I think I mentioned this before.
So we know that the page processed here is actually index data.
Shimao, that is the page served by this server is indexed HDMI out.
So this page allows us to make single page applications with angular.
So when we look at this page, we see a normal e-mail page had section and body section.
Now when we look at that section, there are normal human code.
But here is a title part that appears in the browser or the link part with the fabric on here.
However, the part that says app root in the body section is different from the codes that we've seen
in HTML.
Look here, we don't see anything that says approved in the browser.
However, when we say inspect.
We can see that the page that is run is index dot, html, and there is app route here.
So actually Apple is not HTML code, the root component that Seelie created for us, which will connect
the entire application.
That's what's going on here.
So here is the app module, which is the composition of the app components.
All righty then.
So in this section we're going to talk about what components mean and what their functions are in the
nitty gritty details.
But don't get yourself in the weeds.
So now let's open up about components that to yes and yes, it's a typescript file, so we'll look here
and we'll see the component decorator.
Actually, we see the app route indicated by the selector.
Now here's the app route we see in the index, not e-mail file.
So in other words, with the app route here, we define app, that component to the index, not HTML
page.
So in a way, we transfer the information on this page into index HTML file.
So look here, while transferring this page, there is also an HTML NCSA page here, so you see how
we're actually transferring the entire app module.
So let me show you, when we open the app component HTML page the information here or the information
in the app component that CSS file by defining app route with Selector and our app component stats file.
We've now moved all the app component information in this file to index dot html.
So now the real question is, how does Angular know how to run the index, not the amount paid?
And how do we run all this information combined?
How does it do that?
Well, here, the index that each page is presented in the browser and the script is imported at the
end.
So these scripts are automatically injected by the Seelie.
So we don't necessarily see the script part of the indexed e-mail page.
It's actually a little confusing in that way.
Right.
But every time we rebuild our project while running it with engy serve, this script will automatically
be imported into the index, not HTML page.
And finally, this imported script is added to our code and presented in the browser.
So the script files will be executed and we can actually say they're the first codes to be run.
So how do we know that we have the first code to run?
Well, the answer to this is in the main that's file.
So already we call the main file.
So when we look at this file, we see a few imported files and the part showing which modules run first
in the browser.
So here is the part that I want to draw our attention to bootstrap module.
So this is the first file that will be run.
So that's at module.
And when we look into it.
What's imported here and Britain here is actually the app, that module, that's file.
Now, if we look a little bit deeper, the airport module that's file here, we see the bootstrap directory
containing all app components and so Angular knows where to start and how to move forward.
So Angular starts with the main text file and is redirected to the app module text file from there.
And here it's routed to all components.
And then ANGULAR analyses the Abdah components file and which files to run.
So when we look here again, it sees the selector and app route and runs our index, that HTML page
and also looks here and our HDMI file, it's attached.
And here's a file that we want to display on the page.
Now, let's say that we want to add style to this.
Well, it's done with a ceasefire, and when we want to add new style changes, we just add our ceasefire.
So if you take a step back and look at it, you could say that Angular works in a loop.
So just bring it all together then.
Angular starts with the main dots file.
This file is then redirected to angular dot module that TIAs, then it knows from here that it's got
to run app components.
And then finally the circle is completed in the app component Dotti s file.
So here it's passed to the index, not HTML file with approved.
So app component files are run and angular operations are displayed in the browser.
Simple, huh?
Now I realize that it can be a bit tricky and a whole lot confusing, but as we progress here, it's
going to be a lot easier to comprehend, I guess.
Well, no, I believe I believe that to be true.
I'm going to get easier.
So just to recap, in this section, we learned the component logic and created our own components.
OK, so I want to see in the next lesson.
Hello again, everyone.
So up until this time, we've been answering the question, what is angular?
And we talked briefly about angular features, then you may think, well, we kind of got a little sidetracked,
but you'll see why we did not.
In fact, it's time to talk in more detail on this section.
We will discuss the main features of angular dive into some details and understand a little bit more
clearly what's going on now.
I'm sure you remember in the very first part, we included Bootstrap and our first project and we prepared
a small example like this.
So in other words, the page returned by the Seelie and Reach from localhost 4200.
Now, of course, you remember that we prepared the examples that we saw here on the Dow component,
that e-mail page.
And look at this.
When we delete them and say the changes, everything in our page is gone.
So now we've made this change and when we save the pages automatically refreshed without refreshing
it in the browser.
So how does this happen?
How does the browser know how to change these things?
Well, what we've looked at so far looks like the only page processed here is AFG component, not HTML.
But of course that can't be the case, right?
I think I mentioned this before.
So we know that the page process here is actually index data.
Shimao, that is the page served by this server is indexed HTML.
So this page allows us to make single page applications with ANGULAR.
So when we look at this page, we see a normal HTML page, head section and body section.
Now when we look at that head section, there are normal human code, but here is a title part that
appears in the browser or the link part with the fabric on here.
However, the part that says app root in the body section is different from the codes that we've seen
in HTML.
Look at here.
We don't see anything that says approved in the browser.
However, when we say inspect, we can see that the page that is run is indexed HTML and there is app
root here.
So actually Apple is not HTML code, the root component that Seelie created for us, which will connect
the entire application.
That's what's going on here.
So here is the app module, which is the composition of the app component.
All righty then.
So in this section we're going to talk about what components mean and what their functions are in the
nitty gritty details.
But don't get yourself in the weeds.
So now let's open up about components that to yes and yes, it's a typescript file, so we'll look here
and we'll see the component decorator.
Actually we see the root indicated by the selector.
Now, here's the output we see in the index e-mail file.
So in other words, with the app route here, we define that component to the index dot HDMI page.
So in a way, we transfer the information on this page into index HTML file.
So look here, while transferring this page, there is also an HTML NCIS page here.
So you see how we're actually transferring the entire app module.
So let me show you, when we open the app component, that HTML page the information here or the information
in the app component that CSS file by defining app route with Selector and our app component stats file,
we've now moved all the app component information in this file to indexed dot html.
So now the real question is, how does Angular know how to run the index, not the amount paid, and
how do we run all this information combined?
How does it do that?
Well, here, the index that each page is presented in the browser and the script is imported at the
end.
So these scripts are automatically injected by the Seelie, so we don't necessarily see the script part
of the indexed e-mail page.
It's actually a little confusing in that way.
Right.
But every time we rebuild our project while running it with Engy, sir, this script will automatically
be imported into the index, not HTML page.
And finally, this imported script is added to our code and presented in the browser.
So the script files will be executed and we can actually say they're the first codes to be run.
So how do we know that we have the first code to run?
Well, the answer to this is in the main that's file.
So already we call the main file.
So when we look at this file, we see a few imported files and the part showing which modules run first
in the browser.
So here is the part that I want to draw our attention to bootstrap module.
So this is the first file that will be run.
So that's at module when we look into it.
What's imported here and written here is actually the app.
That module that's file.
Now, if we look a little bit deeper, the airport module that's file here, we see the bootstrap directory
containing all components and so Angular knows where to start and how to move forward.
So Angular starts with the main text file and is redirected to the app module text file from there and
here.
It's routed to all app components and then angular analyses, the app component components file and
which files to run.
So when we look here again, it sees the selector and app route and runs our index, that HTML page
and also looks here and our HDMI file, it's attached.
And here's a file that we want to display on the page.
Now let's say that we want to add style to this.
Well, it's done with a case file and when we want to add new style changes, we just add our success
file.
So if you take a step back and look at it, you could say that Angular works in a loop.
So just bring it all together then.
Angular starts with the main dots file.
This file is then redirected to angular dot module that TIAs that it knows from here that it's got to
run app components.
And then finally the circle is completed in the app component he?
S file.
So here it's passed to the index html file with approved.
So app component files are run and angular operations are displayed in the browser.
BOEM simple huh.
Now I realize that it can be a bit tricky and a whole lot confusing, but as we progress here, it's
going to be a lot easier to comprehend, I guess.
Well, no, I believe, I believe that to be true going to get easier.
So just to recap, in this section we learned the component logic and created our own components.
OK, so I want to see in the next lesson.