130. Setting up and Loading Routes

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.

130. Setting up and Loading Routes

요약

이 녹음에 대해 AI에게 물어보기