130. Setting up and Loading Routes

Jul 15, 2026 05:27 · 8:02 · English · Whisper Turbo · 2 Ομιλητές

Αυτό το αντίγραφο λήγει σήμερα. Αναβάθμιση για μόνιμη αποθήκευση →

Δείκτης διάλεξης

0:02

S… Speaker 1 (130. Setting up and Loading Routes)

So here I am in the source code responsible for the app you saw in the last

0:06

S… Speaker 1 (130. Setting up and Loading Routes)

lecture and as you can see here I got three major components

0:10

S… Speaker 1 (130. Setting up and Loading Routes)

and then some sub components of these components

0:14

S… Speaker 1 (130. Setting up and Loading Routes)

In the app component,

0:15

S… Speaker 1 (130. Setting up and Loading Routes)

I'm loading them all.

0:16

S… Speaker 1 (130. Setting up and Loading Routes)

My home component,

0:17

S… Speaker 1 (130. Setting up and Loading Routes)

my users component,

0:18

S… Speaker 1 (130. Setting up and Loading Routes)

and the servers component.

0:19

S… Speaker 1 (130. Setting up and Loading Routes)

For now,

0:20

S… Speaker 1 (130. Setting up and Loading Routes)

I'm going to ignore my subcomponents here,

0:23

S… Speaker 1 (130. Setting up and Loading Routes)

edit server and the single server,

0:25

S… Speaker 1 (130. Setting up and Loading Routes)

so we will later nest this even more.

0:27

S… Speaker 1 (130. Setting up and Loading Routes)

But for now,

0:28

S… Speaker 1 (130. Setting up and Loading Routes)

it would be nice if of these three components,

0:30

S… Speaker 1 (130. Setting up and Loading Routes)

I would only display one at a time.

0:33

S… Speaker 1 (130. Setting up and Loading Routes)

So that we can dynamically load them by clicking on these links here at

0:37

S… Speaker 1 (130. Setting up and Loading Routes)

the top, and we really load a different route in our app.

0:41

S… Speaker 1 (130. Setting up and Loading Routes)

Now, where do we register such routes?

0:43

S… Speaker 1 (130. Setting up and Loading Routes)

Let's think about this logically.

0:45

S… Speaker 2 (130. Setting up and Loading Routes)

These routes are responsible for our whole app,

0:49

S… Speaker 1 (130. Setting up and Loading Routes)

everywhere in our application.

0:50

S… Speaker 1 (130. Setting up and Loading Routes)

If we enter slash users,

0:52

S… Speaker 1 (130. Setting up and Loading Routes)

we want to load the user's component as our main page,

0:57

S… Speaker 2 (130. Setting up and Loading Routes)

let's say.

0:57

S… Speaker 1 (130. Setting up and Loading Routes)

So since this is really a core part of our app,

1:01

S… Speaker 1 (130. Setting up and Loading Routes)

where should we register it?

1:03

S… Speaker 1 (130. Setting up and Loading Routes)

Well, the app module sounds like a good place because here is

1:08

S… Speaker 1 (130. Setting up and Loading Routes)

where we configure our app,

1:09

S… Speaker 1 (130. Setting up and Loading Routes)

where we add all these components and so on.

1:12

S… Speaker 1 (130. Setting up and Loading Routes)

So this might be a good place to also inform Angular about the routes our

1:16

S… Speaker 1 (130. Setting up and Loading Routes)

application has.

1:17

S… Speaker 1 (130. Setting up and Loading Routes)

And it is.

1:18

S… Speaker 1 (130. Setting up and Loading Routes)

So here above this at ng module decorator

1:22

S… Speaker 1 (130. Setting up and Loading Routes)

here, I will add a new constant and I will name it app routes

1:27

S… Speaker 1 (130. Setting up and Loading Routes)

because it should hold all the routes of my application.

1:30

S… Speaker 1 (130. Setting up and Loading Routes)

Now, this routes constant should be of a specific type,

1:34

S… Speaker 2 (130. Setting up and Loading Routes)

the routes type,

1:35

S… Speaker 1 (130. Setting up and Loading Routes)

which needs to be imported from at Angular router.

1:39

S… Speaker 1 (130. Setting up and Loading Routes)

So make sure to add this import at the top.

1:42

S… Speaker 1 (130. Setting up and Loading Routes)

This is the type informing Angular or giving these routes

1:47

S… Speaker 2 (130. Setting up and Loading Routes)

some structure,

1:47

S… Speaker 2 (130. Setting up and Loading Routes)

I should say.

1:48

S… Speaker 1 (130. Setting up and Loading Routes)

You don't necessarily have to add it here,

1:51

S… Speaker 2 (130. Setting up and Loading Routes)

but it is a good practice.

1:52

S… Speaker 2 (130. Setting up and Loading Routes)

Now,

1:53

S… Speaker 1 (130. Setting up and Loading Routes)

with this import added and the constant set up,

1:55

S… Speaker 1 (130. Setting up and Loading Routes)

what should this constant actually hold?

1:57

S… Speaker 1 (130. Setting up and Loading Routes)

It should hold an array because we will have multiple

2:01

S… Speaker 1 (130. Setting up and Loading Routes)

routes.

2:02

S… Speaker 1 (130. Setting up and Loading Routes)

So we add all the routes we want to set up to this array for

2:06

S… Speaker 1 (130. Setting up and Loading Routes)

now. And each route now is just a JavaScript object in this array.

2:10

S… Speaker 1 (130. Setting up and Loading Routes)

Now the question is,

2:12

S… Speaker 1 (130. Setting up and Loading Routes)

how should such a route be configured in an Angular app?

2:15

S… Speaker 2 (130. Setting up and Loading Routes)

It has to follow a specific pattern,

2:17

S… Speaker 1 (130. Setting up and Loading Routes)

a specific structure for Angular to be able to use it.

2:21

S… Speaker 1 (130. Setting up and Loading Routes)

And this structure always needs a path.

2:25

S… Speaker 1 (130. Setting up and Loading Routes)

This is what gets entered in the URL after your domain.

2:29

S… Speaker 1 (130. Setting up and Loading Routes)

This should be a string and the first route I want

2:33

S… Speaker 1 (130. Setting up and Loading Routes)

to add could be my users route.

2:36

S… Speaker 1 (130. Setting up and Loading Routes)

This allows me to then visit

2:39

S… Speaker 1 (130. Setting up and Loading Routes)

localhost or whatever your domain is 4200 in this case here

2:43

S… Speaker 1 (130. Setting up and Loading Routes)

and then slash users so that is your path without

2:47

S… Speaker 1 (130. Setting up and Loading Routes)

the slash and this is important make sure you don't add the slash

2:51

S… Speaker 1 (130. Setting up and Loading Routes)

here this would be incorrect added without the slash so

2:55

S… Speaker 1 (130. Setting up and Loading Routes)

this is now the path and this will later allow angular to determine which

2:59

S… Speaker 1 (130. Setting up and Loading Routes)

route in our array of routes here should be selected if we enter

3:03

S… Speaker 1 (130. Setting up and Loading Routes)

something in the url or click some link

3:06

S… Speaker 1 (130. Setting up and Loading Routes)

because it clearly defines which path this route should

3:10

S… Speaker 1 (130. Setting up and Loading Routes)

be.

3:11

S… Speaker 1 (130. Setting up and Loading Routes)

Now we also need to define what should happen when this path

3:16

S… Speaker 2 (130. Setting up and Loading Routes)

here is reached.

3:16

S… Speaker 1 (130. Setting up and Loading Routes)

Right now,

3:17

S… Speaker 1 (130. Setting up and Loading Routes)

nothing happens.

3:18

S… Speaker 1 (130. Setting up and Loading Routes)

It's a route,

3:19

S… Speaker 2 (130. Setting up and Loading Routes)

but yeah,

3:20

S… Speaker 2 (130. Setting up and Loading Routes)

there is no action attached to it.

3:22

S… Speaker 1 (130. Setting up and Loading Routes)

The action typically is a component so that you inform

3:26

S… Speaker 1 (130. Setting up and Loading Routes)

Angular that once this path here is reached,

3:29

S… Speaker 1 (130. Setting up and Loading Routes)

a certain component should be loaded.

3:31

S… Speaker 1 (130. Setting up and Loading Routes)

And this component will then be the page,

3:34

S… Speaker 1 (130. Setting up and Loading Routes)

you could say, which gets loaded.

3:35

S… Speaker 1 (130. Setting up and Loading Routes)

So here for users,

3:37

S… Speaker 1 (130. Setting up and Loading Routes)

it sounds about right to load our

3:40

S… Speaker 1 (130. Setting up and Loading Routes)

users component and of course it's up to you to make sure that in your

3:44

S… Speaker 1 (130. Setting up and Loading Routes)

application you are indeed well configuring your components

3:49

S… Speaker 1 (130. Setting up and Loading Routes)

you want to serve as pages to look like pages to have all the content

3:53

S… Speaker 1 (130. Setting up and Loading Routes)

you want to have on this page in this case that's the case for my users component

3:57

S… Speaker 1 (130. Setting up and Loading Routes)

here at least for now it will output my list of users

4:01

S… Speaker 1 (130. Setting up and Loading Routes)

and then the single user component next to it and we will later improve

4:05

S… Speaker 2 (130. Setting up and Loading Routes)

this to also be able to

4:07

S… Speaker 1 (130. Setting up and Loading Routes)

select the user from this list of users here,

4:09

S… Speaker 1 (130. Setting up and Loading Routes)

but for now that's fine.

4:11

S… Speaker 1 (130. Setting up and Loading Routes)

So this is now my first route with the users component getting

4:15

S… Speaker 1 (130. Setting up and Loading Routes)

loaded once we target slash users.

4:18

S… Speaker 1 (130. Setting up and Loading Routes)

Now let's add a couple of other routes.

4:20

S… Speaker 2 (130. Setting up and Loading Routes)

I'll duplicate this or replicate this twice.

4:23

S… Speaker 1 (130. Setting up and Loading Routes)

I also want to have a certain page I display once

4:28

S… Speaker 1 (130. Setting up and Loading Routes)

we have just localhost 4200.

4:31

S… Speaker 1 (130. Setting up and Loading Routes)

So an empty path after it,

4:33

S… Speaker 2 (130. Setting up and Loading Routes)

you could say.

4:34

S… Speaker 2 (130. Setting up and Loading Routes)

So we should also create a

4:36

S… Speaker 1 (130. Setting up and Loading Routes)

a route for this with just an empty path,

4:39

S… Speaker 1 (130. Setting up and Loading Routes)

and here I want to load my home component.

4:42

S… Speaker 2 (130. Setting up and Loading Routes)

This is the starting page,

4:43

S… Speaker 2 (130. Setting up and Loading Routes)

you could say.

4:43

S… Speaker 2 (130. Setting up and Loading Routes)

You,

4:45

S… Speaker 1 (130. Setting up and Loading Routes)

of course, don't need to have such an empty path,

4:47

S… Speaker 1 (130. Setting up and Loading Routes)

but then you somehow need to handle this,

4:49

S… Speaker 1 (130. Setting up and Loading Routes)

well, the user accesses an empty path differently,

4:53

S… Speaker 1 (130. Setting up and Loading Routes)

and I will come back to this later.

4:54

S… Speaker 1 (130. Setting up and Loading Routes)

So for now,

4:55

S… Speaker 1 (130. Setting up and Loading Routes)

we have an empty path,

4:56

S… Speaker 1 (130. Setting up and Loading Routes)

just localhost 4200 loading the home component,

5:00

S… Speaker 1 (130. Setting up and Loading Routes)

slash users will load the users component,

5:03

S… Speaker 1 (130. Setting up and Loading Routes)

And I also want to have slash servers,

5:05

S… Speaker 1 (130. Setting up and Loading Routes)

which will load my server or servers component.

5:10

S… Speaker 2 (130. Setting up and Loading Routes)

With that,

5:11

S… Speaker 2 (130. Setting up and Loading Routes)

three routes are set up here,

5:13

S… Speaker 1 (130. Setting up and Loading Routes)

but that alone won't do anything.

5:15

S… Speaker 1 (130. Setting up and Loading Routes)

How would Angular know that you want to use this constant?

5:19

S… Speaker 1 (130. Setting up and Loading Routes)

You could have added any constant here and the name app routes,

5:23

S… Speaker 2 (130. Setting up and Loading Routes)

well that is totally up to you.

5:25

S… Speaker 1 (130. Setting up and Loading Routes)

So right now these routes will be ignored by Angular and the type routes

5:29

S… Speaker 1 (130. Setting up and Loading Routes)

here doesn't do anything when it comes to this.

5:31

S… Speaker 1 (130. Setting up and Loading Routes)

So we somehow need to register these routes in our app.

5:35

S… Speaker 1 (130. Setting up and Loading Routes)

And we do this by adding a new import here to

5:39

S… Speaker 2 (130. Setting up and Loading Routes)

this imports array.

5:40

S… Speaker 1 (130. Setting up and Loading Routes)

We need to add the router module here and

5:44

S… Speaker 1 (130. Setting up and Loading Routes)

the router module should be imported from our at Angular

5:48

S… Speaker 2 (130. Setting up and Loading Routes)

router package here.

5:50

S… Speaker 1 (130. Setting up and Loading Routes)

So with this added,

5:52

S… Speaker 1 (130. Setting up and Loading Routes)

we're adding the routing functionality to our app,

5:55

S… Speaker 1 (130. Setting up and Loading Routes)

but still our routes are not registered.

5:58

S… Speaker 1 (130. Setting up and Loading Routes)

That is why this router module has a special method we can call for root,

6:03

S… Speaker 1 (130. Setting up and Loading Routes)

which allows us to register some routes for our main application

6:08

S… Speaker 1 (130. Setting up and Loading Routes)

here.

6:08

S… Speaker 1 (130. Setting up and Loading Routes)

So for root will now receive our app routes

6:12

S… Speaker 1 (130. Setting up and Loading Routes)

constant here as an argument.

6:14

S… Speaker 1 (130. Setting up and Loading Routes)

And with that,

6:16

S… Speaker 1 (130. Setting up and Loading Routes)

our routes are now registered in our Angular app on

6:20

S… Speaker 1 (130. Setting up and Loading Routes)

this router module,

6:21

S… Speaker 1 (130. Setting up and Loading Routes)

which gives us this routing functionality.

6:24

S… Speaker 1 (130. Setting up and Loading Routes)

And now Angular knows our routes.

6:27

S… Speaker 1 (130. Setting up and Loading Routes)

The missing piece is some place to render the currently selected component.

6:32

S… Speaker 1 (130. Setting up and Loading Routes)

Because if you have a look at our app component template,

6:35

S… Speaker 1 (130. Setting up and Loading Routes)

we still add our components here with their selector.

6:39

S… Speaker 1 (130. Setting up and Loading Routes)

Now,

6:40

S… Speaker 1 (130. Setting up and Loading Routes)

okay, we visit slash users,

6:41

S… Speaker 1 (130. Setting up and Loading Routes)

so Angular knows we want to load the users page,

6:44

S… Speaker 1 (130. Setting up and Loading Routes)

but how does it know where to display it?

6:47

S… Speaker 1 (130. Setting up and Loading Routes)

How does it know if you want to display it here or here or maybe here

6:51

S… Speaker 1 (130. Setting up and Loading Routes)

in the header?

6:51

S… Speaker 1 (130. Setting up and Loading Routes)

It doesn't know.

6:53

S… Speaker 1 (130. Setting up and Loading Routes)

So the right place to inform it where to load it

6:56

S… Speaker 1 (130. Setting up and Loading Routes)

is to get rid of all these rows here,

6:59

S… Speaker 1 (130. Setting up and Loading Routes)

but one, so only have the place where you actually want to render your route.

7:03

S… Speaker 1 (130. Setting up and Loading Routes)

And now you don't add your component with its selector,

7:06

S… Speaker 1 (130. Setting up and Loading Routes)

but you add a special directive shipping with Angular,

7:10

S… Speaker 2 (130. Setting up and Loading Routes)

the router outlet.

7:12

S… Speaker 1 (130. Setting up and Loading Routes)

Now this looks like a component,

7:14

S… Speaker 1 (130. Setting up and Loading Routes)

but it still only is a directive.

7:16

S… Speaker 1 (130. Setting up and Loading Routes)

Keep in mind,

7:17

S… Speaker 1 (130. Setting up and Loading Routes)

directives may have any selector,

7:18

S… Speaker 1 (130. Setting up and Loading Routes)

including this component or this element style selector.

7:22

S… Speaker 1 (130. Setting up and Loading Routes)

And with this,

7:23

S… Speaker 1 (130. Setting up and Loading Routes)

this now simply marks the place in our document where

7:27

S… Speaker 1 (130. Setting up and Loading Routes)

we want the Angular router to load the component of the currently

7:31

S… Speaker 2 (130. Setting up and Loading Routes)

selected route.

7:32

S… Speaker 1 (130. Setting up and Loading Routes)

And with this all set up,

7:34

S… Speaker 1 (130. Setting up and Loading Routes)

if we now save this and let it rebuild therefore,

7:37

S… Speaker 2 (130. Setting up and Loading Routes)

we should see that this rebuilds successfully.

7:39

S… Speaker 1 (130. Setting up and Loading Routes)

And if we visit our page now,

7:41

S… Speaker 1 (130. Setting up and Loading Routes)

you see we only see the homepage now.

7:44

S… Speaker 1 (130. Setting up and Loading Routes)

And if we now enter slash users here,

7:47

S… Speaker 2 (130. Setting up and Loading Routes)

we see the users page.

7:49

S… Speaker 1 (130. Setting up and Loading Routes)

And if we enter slash servers,

7:51

S… Speaker 2 (130. Setting up and Loading Routes)

we see the service page.

7:53

S… Speaker 2 (130. Setting up and Loading Routes)

So this is working.

7:54

S… Speaker 1 (130. Setting up and Loading Routes)

Of course, our links are not working.

7:56

S… Speaker 1 (130. Setting up and Loading Routes)

This is something we will work on next.

Αυτό το αντίγραφο δημιουργήθηκε από τον AI (αυτόματη αναγνώριση ομιλίας). Μπορεί να περιέχει σφάλματα Πολιτική AI

❤️ Σου αρέσει το STT.ai; Πες το στους φίλους σου!

Περίληψη

Κάντε κλικ στο Summarize για να δημιουργήσετε μια περίληψη AI αυτής της μεταγραφής.

Ρωτήστε τον Αλ γι' αυτό το σενάριο.

Ρωτήστε οτιδήποτε σχετικά με αυτό το αντίγραφο, το AI θα βρει σχετικές ενότητες και θα απαντήσει.

Τρανσέιντερ άλλος ένας...