18_understanding_the_role_of_appmodule_and_component

0:02

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

In the last lecture,

0:03

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we created our own component,

0:05

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

the server component here.

0:06

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

It's almost ready to be used,

0:09

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

but to use it,

0:10

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we need to change something about our app module.

0:13

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

What is an app module?

0:16

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Angular uses components to build web pages and uses

0:20

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

modules to basically bundle different pieces,

0:24

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

for example,

0:25

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

components of your app into packages.

0:28

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Now,

0:29

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

this is kind of an advanced feature,

0:31

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

but later in the course,

0:32

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

I will have a whole section about modules.

0:34

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

For the majority of this course,

0:37

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we will only use the app module which is absolutely fine for a lot of projects

0:41

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

only in bigger projects you might think about splitting up your app into multiple

0:45

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

odd modules but what does this app module do what is a

0:50

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

module then well it's a as i said bundle of

0:54

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

functionalities of our app and it basically gives angular the information

0:58

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

which features does my app have and use as

1:02

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

you can see it also is just an empty typescript class like our component

1:07

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

And as the component,

1:08

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we transform it into something else by adding a decorator.

1:12

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Here,

1:12

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

it's the ng -module decorator,

1:14

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

which is also imported from AddAngularCore.

1:18

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Now, in there,

1:20

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we see four properties we set up on the object we passed

1:24

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

to ng -module.

1:25

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Declarations,

1:26

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

imports,

1:27

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

providers, and bootstrap.

1:28

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

We had a look at bootstrap.

1:30

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

This was responsible for telling Angular,

1:33

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

hey, which component should you be aware of at the point of time the whole

1:37

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

application starts?

1:38

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So which component should you basically recognize in the index .html file?

1:42

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

And that was the app component.

1:44

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Now,

1:45

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

I already mentioned

1:46

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

that we won't add any more component selectors to the index .html file.

1:50

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

That's just not how it works.

1:52

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Therefore,

1:53

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we won't touch the bootstrap array.

1:55

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Still,

1:56

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we added a new component to Angular.

1:59

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

And this new component now has to be registered here in

2:03

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

the module so that Angular knows that this component exists because,

2:06

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

and this is important,

2:07

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

by default.

2:09

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Angular will not scan all your files here.

2:13

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So if you don't tell it that

2:17

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

the server component exists,

2:18

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

it doesn't know it.

2:20

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Just creating the file is not enough.

2:22

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

That is why we have to register it here in the ng -module

2:26

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

to tell Angular,

2:27

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

hey, part of this module,

2:30

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

and therefore right here of our whole app,

2:32

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

since we only have this module,

2:33

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

is the server component.

2:36

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

We do register new components in this declarations

2:40

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

array.

2:41

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

We already registered the app component here because even though

2:45

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

it's also used in Bootstrap,

2:46

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

it also is a part of our app.

2:47

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Now we also need to add the server component

2:52

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

here.

2:53

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Adding it like this is not enough though,

2:55

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

because now Angular would kind of know that this is part of the app,

2:59

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

but TypeScript wouldn't know where to find this type,

3:02

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

where to find the server component.

3:04

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So when we try to bundle our code,

3:07

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we would get an error,

3:08

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

which you can actually see.

3:10

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

If you save this,

3:12

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

triggering the recompilation,

3:13

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

you see that we get an error in the terminal down there that it can't

3:17

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

find server component because,

3:19

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

and this is not Angular,

3:21

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

this is TypeScript,

3:21

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

it doesn't know where this file is,

3:23

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

where to find this class.

3:25

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So we need to add an import at the top,

3:27

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

manually pointing to this.

3:30

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So we add server component here as an import from

3:35

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

dot slash server and Then here

3:39

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

in the server component and you omit the dot TS you don't

3:44

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

add dot TS to your import It's just server dot component.

3:47

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So the filename without the extension the extension is added by webpack

3:51

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

which bundles our project automatically

3:54

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So with this,

3:55

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

and it's just so important,

3:56

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

this is not Angular,

3:57

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

this is a TypeScript feature.

3:59

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Now TypeScript knows where to find this,

4:01

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

therefore everything can be bundled,

4:03

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

so therefore now Angular,

4:05

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

when it runs,

4:06

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

knows that we have a server component and that it is part of our app.

4:10

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

And with this,

4:11

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

we can now finally use our component.

4:13

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

We will do this in the next lecture,

4:16

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

but maybe you're also wondering what imports and providers does here in the app

4:20

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

module.

4:21

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

I'll come back to providers later in the services section.

4:24

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Imports simply allows us to add some other modules

4:28

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

to this module.

4:30

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Because I told you,

4:31

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

you can split up your app into multiple modules and then you can import these modules to

4:35

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

basically make this module a bit leaner and outsource some stuff into another

4:39

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

module.

4:40

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Now I told you that we are only going to use one module.

4:43

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So what are we importing here?

4:45

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

some modules built into Angular because Angular itself is split

4:49

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

up into modules.

4:50

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So the browser module,

4:51

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

for example, gives us all the base functionality we need to start

4:55

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

our app and forms an HTTP module.

4:57

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

That is something I'll come back to in the forms or HTTP section of the course.

5:01

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

So with this,

5:02

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

the basics about this module should be clear.

5:05

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Again, we'll dive deeper into this later in the course.

5:08

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

We also registered our own component.

5:10

S… Speaker 1 (18_understanding_the_role_of_appmodule_and_component)

Let's now use it in the next lecture.

18_understanding_the_role_of_appmodule_and_component

Sommarju

Staqsi AI Dwar Dan Tranżkript