All language subtitles for 8. How Angular Creates Components3

Our card component is now visible on the screen which is great.

But in this video I want to give you a little bit deeper understanding of exactly what is going on.

In particular I want to help you understand how angular actually takes that app Card element that we

placed inside that HDL file right here and it makes a instance of the card component and displays it

on the screen.

So in this video we're going to go through one or two quick diagrams that's going to give you a better

understanding of how angular actually boots up our application in the browser and eventually displays

an instance of the card component right there.

All right.

So the first diagram we're going to look at is going to look completely unrelated but trust me this

all ties together.

This is what happens when we first tried to access our application inside the browser.

You and I open up a new browser window and we type into it.

Local host colon forty two hundred.

When we hit the enter key our browser is going to issue an H TTP request to our angular development

server.

Remember our angular development server is running on our local machine.

That is the program that you and I are starting up when we run and G starts or excuse me AMG serve or

NPM start at our terminal that we make an initial h t keep your quest over to that server.

The angular development server then always responds by first sending us a file called the Index dot

h t email file.

This is a file that actually exists inside of our project directory right now.

So if we go back over to our Ed and look inside the s RC directory you'll see a file inside there called

index dot HDMI out.

So again first thing that gets sent to our browser when we're trying to access our application.

Now when you look at this file one thing that you might notice right away is that there are no script

tags inside of it.

So it kind of appears as though we are never actually loading up any javascript code.

Well if you go back over to our application site the browser really quickly and open up your element

Inspector here's my element Inspector.

You'll notice that there actually are a series of script tags inside of here it turns out that our angular

development server before sending the contents of this file down to the browser it is going to automatically

add a couple of script tags to the very bottom of that body element right there.

That is how we eventually get some javascript script tags added inside of here but that resulting file

finally gets sent down to the browser the browser is going to see all the script tags and then make

some follow up requests to the development server to get access to all those scripts.

And so our server is going to send down all that JavaScript which gets executed inside the browser now

as soon as our browser starts to load all those different files.

It's going to take a look at each the different components that we have declared in particular.

It's going to look at the component class files but that is our art dot component dot T.S. file and

our app dot component dot t s file.

Now as I mentioned just a moment ago both of these files of this little thing at the top right here

a little bit of typescript called a decorator inside the decorator.

We've got that selector property whenever angular sees this selector thing right here and makes a little

mental note and it says hey well a selector anytime I see an HMO element with that a little element

name right there going to create a new instance of this component and show it in the DOM at this point.

Things are getting just a little bit complicated.

Let's take a look at a flow diagram that's going to breakdown those last couple of things I mentioned

into a series of discrete steps all right.

So here's our diagram

okay.

We're gonna go through this step by step.

There's a couple of steps here but they're mostly repetitive so we're going to go through it rather

quickly though angular is going to load up each of those different component class files and it's going

to take a look at that selector property.

Here's the key part.

We first need to have some kind of root component that gets displayed in the DOM though when angular

first loads up inside the browser it's going to take a look at the H team l document that was sent down

to the browser itself.

If we go back to that indexed on each e-mail file right here you'll notice that inside the body there

is an app dash root element that is a little sign to angular that we want to show our app component.

If you go back to the app component dot t s file you'll notice that the selector for that one is app

dash route.

So as soon as angular sees that it's going to try to find a matching component inside an application

with the selector of app dash route the angular finds the app component and then creates an instance

of that component.

Remember in JavaScript we've got the idea of classes.

Classes are like a blueprint.

We don't ever use a class directly.

Instead we create instances out of those classes.

The angular is going to create an instance of that app component class angular is then going to take

a look at that instance.

That's going to take a look at the accompanying template file.

It's going to pass the template file and turn it all into real H2.

It's going to take all that HMO and stick it directly into the app dash route element that it had found.

We refer to that app dash route element or the element that's kind of containing all the output of the

component template as a host element.

We can actually see this very easily inside the browser.

So if you go back over to our application you'll notice that inside of our Dom we've got that app dash

route element.

If we expand it we'll see everything that makes up our actual each CML for the template.

So again we referred to app Astra right here.

That is our host element.

Then while throwing all the contents of that template into the DOM angular next sees that inside there

is an element called app dash cart typically that one right there the once again angular is going to

take a look at all of the different components inside of our application.

That's going to find one with a selector of app dash cart.

In this case it finds our hard component to yes file it right here as it has a matching selector so

angular will then create an instance out of that card component and then the entire process is going

to repeat itself again.

Angular is going to take that instances template it's going to turn it into real HDL and then it's going

to stick it into the app card element which once again we refer to as the host element.

And once again we can see that directly in the DOM but there's the app dash card right there.

And if we expand that element we'll see inside there is the paragraph element.

OK.

So that is what is going on behind the scenes.

It is a recursive process angular loads up.

It finds all these different elements with special names it sees if it has a matching component with

a matching selector if it does it's going to create an instance out of that component render the template

and stick all the resulting H2 UML into that host element and then it just repeats that process over

and over and over again OK.

So now you've seen this.

Well let's take another pause right here and continue working on our application in just a moment.