16_components_are_important

Jul 13, 2026 07:13 · 3:09 · English · Whisper Turbo · 2 Relatori

Questa trascrizione scade oggi. Aggiornamento per l'immagazzinamento permanente →

Indice delle lezioni

0:02

S… Speaker 1 (16_components_are_important)

In the last lecture,

0:03

S… Speaker 1 (16_components_are_important)

we had a closer look at what happens at the point of time we

0:07

S… Speaker 1 (16_components_are_important)

visit localhost 4200 here in the browser.

0:11

S… Speaker 1 (16_components_are_important)

We understood that the index .html file is served,

0:15

S… Speaker 1 (16_components_are_important)

that it will contain a bunch of scripts here,

0:17

S… Speaker 1 (16_components_are_important)

which get executed,

0:19

S… Speaker 1 (16_components_are_important)

which then basically start the Angular app.

0:21

S… Speaker 1 (16_components_are_important)

The Angular app gets the important information that it should know,

0:25

S… Speaker 1 (16_components_are_important)

the app component that it should analyze it.

0:27

S… Speaker 1 (16_components_are_important)

With that information,

0:28

S… Speaker 1 (16_components_are_important)

the...

0:29

S… Speaker 1 (16_components_are_important)

Angular code is able to parse this here this

0:33

S… Speaker 1 (16_components_are_important)

app root Component here understand it and insert

0:38

S… Speaker 1 (16_components_are_important)

our angular application at this point and that is why we don't see Loading

0:42

S… Speaker 1 (16_components_are_important)

dot dot dot which would still be in the source code of this page as you can see

0:46

S… Speaker 1 (16_components_are_important)

but instead why we see this because angular Overwrites

0:51

S… Speaker 1 (16_components_are_important)

this at runtime because that is well what it does.

0:55

S… Speaker 1 (16_components_are_important)

What's what its job is?

0:57

S… Speaker 1 (16_components_are_important)

So now that we had a closer look at this startup process,

1:01

S… Speaker 1 (16_components_are_important)

let's have a closer look at this component or add components

1:05

S… Speaker 1 (16_components_are_important)

in general.

1:07

S… Speaker 1 (16_components_are_important)

Components are a key feature in Angular.

1:10

S… Speaker 1 (16_components_are_important)

You build your whole application by composing it from

1:14

S… Speaker 1 (16_components_are_important)

a couple of components,

1:15

S… Speaker 1 (16_components_are_important)

which you create on your own.

1:17

S… Speaker 1 (16_components_are_important)

Now,

1:18

S… Speaker 1 (16_components_are_important)

we do start with this app component,

1:20

S… Speaker 2 (16_components_are_important)

the root component,

1:22

S… Speaker 1 (16_components_are_important)

you should say, which holds our entire application basically in the end.

1:25

S… Speaker 1 (16_components_are_important)

So this root component,

1:27

S… Speaker 1 (16_components_are_important)

this app component,

1:28

S… Speaker 1 (16_components_are_important)

will be the component where we later nest or add our other

1:32

S… Speaker 2 (16_components_are_important)

components to.

1:33

S… Speaker 1 (16_components_are_important)

So to this template,

1:35

S… Speaker 1 (16_components_are_important)

this HTML file of the app component,

1:37

S… Speaker 1 (16_components_are_important)

this is where we will later add our other components.

1:40

S… Speaker 1 (16_components_are_important)

Typically,

1:41

S… Speaker 1 (16_components_are_important)

we might have a web page like this with a header with home and users,

1:45

S… Speaker 1 (16_components_are_important)

then a main area and a sidebar maybe.

1:48

S… Speaker 1 (16_components_are_important)

Now if we have a look,

1:49

S… Speaker 1 (16_components_are_important)

this would be a fitting component,

1:51

S… Speaker 1 (16_components_are_important)

the header.

1:52

S… Speaker 1 (16_components_are_important)

And maybe also the items on the header could be their

1:56

S… Speaker 2 (16_components_are_important)

own component.

1:56

S… Speaker 2 (16_components_are_important)

Could be,

1:57

S… Speaker 1 (16_components_are_important)

you don't have to.

1:58

S… Speaker 1 (16_components_are_important)

You will learn throughout the course how I approach the splitting

2:02

S… Speaker 1 (16_components_are_important)

up of an application into separate components.

2:05

S… Speaker 1 (16_components_are_important)

We also have of course our main area and the sidebar

2:09

S… Speaker 2 (16_components_are_important)

here as components.

2:10

S… Speaker 1 (16_components_are_important)

And that is the core idea behind Angular,

2:14

S… Speaker 2 (16_components_are_important)

build components.

2:15

S… Speaker 1 (16_components_are_important)

Each component has its own template,

2:17

S… Speaker 1 (16_components_are_important)

its own HTML code,

2:19

S… Speaker 1 (16_components_are_important)

maybe its own styling,

2:20

S… Speaker 1 (16_components_are_important)

and more importantly also,

2:22

S… Speaker 1 (16_components_are_important)

its own business logic.

2:24

S… Speaker 1 (16_components_are_important)

And this is the great benefit.

2:26

S… Speaker 1 (16_components_are_important)

It allows you to split up your complex application,

2:29

S… Speaker 1 (16_components_are_important)

your complex webpage,

2:31

S… Speaker 1 (16_components_are_important)

into reusable parts.

2:33

S… Speaker 1 (16_components_are_important)

You may use a component more than once.

2:36

S… Speaker 1 (16_components_are_important)

And that allows you to easily replicate that business logic,

2:39

S… Speaker 1 (16_components_are_important)

replicate that styling,

2:41

S… Speaker 1 (16_components_are_important)

or in general,

2:42

S… Speaker 1 (16_components_are_important)

make a finely controlled piece in your application

2:46

S… Speaker 1 (16_components_are_important)

without having to crunch everything into one single

2:50

S… Speaker 1 (16_components_are_important)

script file,

2:51

S… Speaker 1 (16_components_are_important)

one single HTML file.

2:53

S… Speaker 1 (16_components_are_important)

Instead,

2:54

S… Speaker 1 (16_components_are_important)

it's very easy to update,

2:55

S… Speaker 1 (16_components_are_important)

very easy to exchange,

2:56

S… Speaker 1 (16_components_are_important)

and again,

2:57

S… Speaker 1 (16_components_are_important)

reusable.

2:58

S… Speaker 1 (16_components_are_important)

So let's have a closer look at how we actually create a component

3:02

S… Speaker 1 (16_components_are_important)

and what this add component thing does.

3:05

S… Speaker 1 (16_components_are_important)

in the next lecture

Questa trascrizione è stata generata dall'AI (riconoscimento automatico del linguaggio). Può contenere errori Politica dell'IA

❤️ Ti piace STT.ai? Diccelo ai tuoi amici!

Sommario

Fare clic su Summarize per generare un riepilogo AI di questa trascrizione.

Chiedi all'AI Informazioni su questo trascrizione

Chiedere qualsiasi cosa su questa trascrizione L'AI troverà sezioni pertinenti e la risposta.

Trascrivine un altro