18_understanding_the_role_of_appmodule_and_component

Jul 13, 2026 07:13 · 5:15 · English · Whisper Turbo · 1 स्पीकर

इस हस्तलिपि का समय आज बीत चुका है. स्थायी भंडारण के लिए अद्यतन करें →

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.

यह व्याख्या एआई (अंग्रेजी भाषा की पहचान के द्वारा तैयार की गयी थी ।) एआई नीति

❤️ क्या आपको STT.ai पसंद है? अपने दोस्तों को बताइए!

सारांश

इस बुक का एआई सारांश बनाने के लिए सार बनाने के लिए सार को क्लिक करें.

एआई के बारे में पूछें इस ट्रांसमिशन के बारे में

इस हस्तलिपि के बारे में कुछ सवाल पूछिए — एआई को ज़रूरी भागों और जवाब मिलेगा ।

एक और अनुवाद