15_how_an_angular_app_gets_loaded_and_started

0:02

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So this is the page as we see it right now in the project we created

0:07

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

at the end of the last section.

0:09

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

An empty page here,

0:11

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Angular the complete guide,

0:13

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

we reach it at localhost 4200.

0:15

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

This is where our development server hosted by the

0:19

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

CLI or spun up by the CLI will host our Angular

0:24

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

application.

0:24

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Now the content we see here can be changed by

0:28

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

going to the app component HTML file.

0:31

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

in our app folder and in here we can output some text

0:35

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

let's say arm in the app component here in a h3

0:39

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

tag a normal html tag therefore if we save this

0:43

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

we will see it here and it automatically has the bootstrap text

0:48

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

style and so on because we added bootstrap at the end of the last section too but

0:53

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

whilst it might seem kind of obvious that we see it here it is also

0:57

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

kind of strange how does

0:59

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

our browser or how does the server hosting our app know that

1:03

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

it should render the content of app component HTML here.

1:07

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

You could argue it's the only component we have right now and we

1:12

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

will take a closer look at components soon.

1:14

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

But that is not the reason.

1:16

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And actually,

1:17

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

this is not the file served by the server.

1:20

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Instead, the index .html file here is served by the server.

1:24

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And remember that I told you that Angular is a framework which allows you to create

1:28

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

single -page application?

1:30

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

This is the single page which is served,

1:33

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

the index .html file.

1:34

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

Now,

1:35

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

if we have a look at this file,

1:37

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

we see this is a normal HTML file.

1:40

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

We define the title we could see on the tab in the browser

1:44

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

here.

1:45

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And the body of this file is very interesting.

1:47

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Here we get this app root thing with loading

1:52

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

dot dot dot in between.

1:53

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Now clearly we don't see loading dot dot dot here.

1:57

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So somehow this index .html file

2:01

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

seems to have changed.

2:03

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And it did.

2:05

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

App root here,

2:06

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

of course, is not a default HTML element.

2:08

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Instead,

2:09

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

this is one of our own components.

2:11

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

We will soon dive into how we create our own components,

2:15

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

but the CLI created one for us,

2:17

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

the root component of our application,

2:19

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

the component which will tie together our whole application in the end.

2:23

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And all the files in the app folder here,

2:27

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

which have component in their name,

2:29

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

so these files are related to this component.

2:32

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

I will...

2:34

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

go into more detail about these files in one of the next lectures.

2:36

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

For now, let's take a closer look at the AppComponent .ts file,

2:39

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

the TypeScript file here.

2:41

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Here you can see that we have this AddComponent decorator.

2:44

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

This seems to be important.

2:45

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

But more importantly right now,

2:47

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

you see that there we have this selector property,

2:52

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

which assigns a string as a value,

2:54

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and this string holds AppRoot.

2:57

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Now this clearly is the same text as in our index .html file and

3:02

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

this actually is the information Angular needed to be able

3:06

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

to replace this part here in this index .html file

3:10

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

with the template of this component,

3:13

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

the component having this selector and the template of this component

3:17

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

simply is the content here in this app .component .html

3:21

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

file.

3:21

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Now whilst I will dive deeper into how to create components and how to configure

3:26

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

them,

3:26

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

This is what basically happens at the startup.

3:29

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Though the missing information is how is Angular

3:33

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

triggered?

3:34

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

How is it kicked off to actually run over our body

3:38

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

here of this index .html file?

3:42

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And the answer is,

3:43

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

in the final index .html file,

3:46

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

getting served in the browser,

3:47

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and we can verify this by inspecting the source code here,

3:51

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

we got a couple of script imports at the end.

3:54

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

These are injected by the CLI automatically.

3:57

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So that is why we don't see it here in the raw index .html

4:01

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

file.

4:01

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Here we don't have any script imports.

4:03

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

But whenever this ng -serve process rebuilds

4:07

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

our project,

4:08

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

it will create...

4:10

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

bundles, JavaScript,

4:11

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

script bundles,

4:12

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and automatically add the right imports in the index .html

4:16

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

file. A little convenience functionality for us.

4:19

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So in the final file,

4:21

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

these script imports here are present,

4:24

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and these script imports will contain our own code too.

4:28

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So these script files are therefore executed,

4:32

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and they are actually the first code to be executed,

4:35

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and that is just something you have to keep in mind,

4:37

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

is the code

4:39

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

we write in our main .ts file.

4:41

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

That is why it's called main.

4:43

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

This is the first code which gets executed.

4:45

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Let's have a closer look at it then.

4:47

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Here you see that we got a couple of imports,

4:51

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

then we check if we are in production mode or not.

4:54

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

You basically turn off some warning messages,

4:57

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

I can tell you that.

4:57

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

But most importantly here,

4:59

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

this line.

5:00

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

This now bootstraps,

5:02

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

starts our Angular application by

5:06

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

passing

5:07

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

app module to this method and app module

5:11

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

refers to this file here now if we have a look at this

5:16

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

file here we actually see that somehow

5:20

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

we kind of like with the component have the strange at thing here

5:25

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

I will dive into this in a couple of lectures too

5:28

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

But most importantly for now,

5:29

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

here we get this bootstrap array which basically lists all

5:34

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

the components which should be known to Angular at the point

5:38

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

of time it analyzes our index .html file.

5:41

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And here the circle closes because here we reference

5:45

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

our app component.

5:47

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So Angular gets started,

5:50

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

this main .ts file gets started.

5:51

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

There we bootstrap an Angular application and we pass this

5:55

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

module as an argument.

5:57

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

In this module,

5:59

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

we tell Angular,

6:00

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

hey, there is this app component which you should know when you try to

6:04

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

start yourself.

6:05

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And Angular now analyzes the app component,

6:08

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

reads the setup we pass here,

6:11

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and therefore knows this selector app root.

6:14

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And now Angular is able to handle app

6:19

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

root in the index .html file,

6:21

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and it knows,

6:21

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

all right,

6:22

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

this is the selector I know.

6:25

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

You told me that I should know it because it was listed in this bootstrap array in the app

6:29

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

module, this component.

6:30

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So now I know that here I should insert the app component.

6:34

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And the app component happens to have some HTML code,

6:38

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

a template attached to it,

6:40

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

which is this h3 tag.

6:42

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

And this is how the Angular application starts here.

6:45

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

This is why we see what we see.

6:48

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

Now that was a load of information regarding the app startup,

6:52

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

but it's key to understand how this starts with this information.

6:56

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

We can now proceed and dive deeper into how components actually

7:00

S… Speaker 2 (15_how_an_angular_app_gets_loaded_and_started)

work, what they are,

7:02

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

how we can create our own ones,

7:03

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

and what this app module here does in detail.

7:07

S… Speaker 1 (15_how_an_angular_app_gets_loaded_and_started)

So let's move on.

15_how_an_angular_app_gets_loaded_and_started

Oversigt

Spørg AI om denne transskription