148. Outsourcing the Route Configuration

Jul 15, 2026 05:39 · 4:40 · English · Whisper Turbo · 2 المتكلمون

تنتهي صلاحية هذا النص اليوم. تحسين التخزين الدائم →

فهرس المحاضرات

0:02

S… Speaker 2 (148. Outsourcing the Route Configuration)

So,

0:03

S… Speaker 2 (148. Outsourcing the Route Configuration)

a lot was covered.

0:05

S… Speaker 1 (148. Outsourcing the Route Configuration)

Let's dive even deeper.

0:06

S… Speaker 2 (148. Outsourcing the Route Configuration)

If we have a look at our application,

0:09

S… Speaker 1 (148. Outsourcing the Route Configuration)

our app module,

0:10

S… Speaker 1 (148. Outsourcing the Route Configuration)

you already see that the routing takes up some

0:14

S… Speaker 1 (148. Outsourcing the Route Configuration)

significant space in our app module.

0:16

S… Speaker 2 (148. Outsourcing the Route Configuration)

So typically,

0:18

S… Speaker 2 (148. Outsourcing the Route Configuration)

if you have more than,

0:20

S… Speaker 2 (148. Outsourcing the Route Configuration)

let's say, two or three routes,

0:21

S… Speaker 1 (148. Outsourcing the Route Configuration)

you don't add it directly in the app module.

0:25

S… Speaker 1 (148. Outsourcing the Route Configuration)

Instead,

0:26

S… Speaker 1 (148. Outsourcing the Route Configuration)

you add a new file,

0:27

S… Speaker 1 (148. Outsourcing the Route Configuration)

which is for the application as a whole.

0:31

S… Speaker 1 (148. Outsourcing the Route Configuration)

typically is called app routing module.

0:34

S… Speaker 1 (148. Outsourcing the Route Configuration)

So the app -routing .module .cs file now

0:39

S… Speaker 1 (148. Outsourcing the Route Configuration)

will hold a second module.

0:41

S… Speaker 1 (148. Outsourcing the Route Configuration)

And I will have a whole module course section about

0:45

S… Speaker 1 (148. Outsourcing the Route Configuration)

Angular modules later in the course.

0:47

S… Speaker 1 (148. Outsourcing the Route Configuration)

There we will dive much deeper and learn how you can define

0:52

S… Speaker 1 (148. Outsourcing the Route Configuration)

and use multiple modules,

0:53

S… Speaker 1 (148. Outsourcing the Route Configuration)

use them together.

0:54

S… Speaker 1 (148. Outsourcing the Route Configuration)

This is a super easy use case here.

0:57

S… Speaker 1 (148. Outsourcing the Route Configuration)

So let's add it now.

0:58

S… Speaker 2 (148. Outsourcing the Route Configuration)

Here.

0:59

S… Speaker 1 (148. Outsourcing the Route Configuration)

will give this a name of app routing module because that is what

1:03

S… Speaker 1 (148. Outsourcing the Route Configuration)

it is and it receives this at ng module decorator

1:08

S… Speaker 1 (148. Outsourcing the Route Configuration)

So this is configured with a JavaScript object being passed to it.

1:12

S… Speaker 1 (148. Outsourcing the Route Configuration)

And this will be a super simple module.

1:14

S… Speaker 1 (148. Outsourcing the Route Configuration)

Now,

1:15

S… Speaker 1 (148. Outsourcing the Route Configuration)

as mentioned,

1:16

S… Speaker 1 (148. Outsourcing the Route Configuration)

I will dive deeper into this later.

1:18

S… Speaker 1 (148. Outsourcing the Route Configuration)

You can basically build your Angular app from multiple modules.

1:22

S… Speaker 1 (148. Outsourcing the Route Configuration)

This simple module here will handle all our routing

1:26

S… Speaker 2 (148. Outsourcing the Route Configuration)

-related tasks.

1:27

S… Speaker 1 (148. Outsourcing the Route Configuration)

So I will cut all my routes,

1:29

S… Speaker 1 (148. Outsourcing the Route Configuration)

this app routes constant,

1:31

S… Speaker 1 (148. Outsourcing the Route Configuration)

and add it in there.

1:33

S… Speaker 2 (148. Outsourcing the Route Configuration)

Of course,

1:34

S… Speaker 1 (148. Outsourcing the Route Configuration)

now...

1:35

S… Speaker 1 (148. Outsourcing the Route Configuration)

I need to make sure that all these imports here are added.

1:39

S… Speaker 1 (148. Outsourcing the Route Configuration)

So make sure to add all the imports to all these

1:44

S… Speaker 2 (148. Outsourcing the Route Configuration)

components.

1:44

S… Speaker 1 (148. Outsourcing the Route Configuration)

And also,

1:46

S… Speaker 2 (148. Outsourcing the Route Configuration)

of course,

1:46

S… Speaker 1 (148. Outsourcing the Route Configuration)

here to routes from the at Angular router

1:50

S… Speaker 2 (148. Outsourcing the Route Configuration)

package.

1:52

S… Speaker 1 (148. Outsourcing the Route Configuration)

And you don't need to add declarations here because these

1:56

S… Speaker 1 (148. Outsourcing the Route Configuration)

components already are declared in your app module.

2:00

S… Speaker 1 (148. Outsourcing the Route Configuration)

And we will soon add the app routing module to this root module.

2:04

S… Speaker 1 (148. Outsourcing the Route Configuration)

So no need to redeclare them.

2:06

S… Speaker 1 (148. Outsourcing the Route Configuration)

This would actually even give you an error.

2:08

S… Speaker 1 (148. Outsourcing the Route Configuration)

We also have to remove the router module from here,

2:12

S… Speaker 1 (148. Outsourcing the Route Configuration)

from our root module.

2:14

S… Speaker 2 (148. Outsourcing the Route Configuration)

Therefore,

2:15

S… Speaker 1 (148. Outsourcing the Route Configuration)

we can remove the imports from the router package.

2:19

S… Speaker 1 (148. Outsourcing the Route Configuration)

Make sure to import router module in your app routing module

2:24

S… Speaker 1 (148. Outsourcing the Route Configuration)

now.

2:24

S… Speaker 1 (148. Outsourcing the Route Configuration)

So to add this import here.

2:26

S… Speaker 1 (148. Outsourcing the Route Configuration)

And now we need to configure something in ng module.

2:30

S… Speaker 1 (148. Outsourcing the Route Configuration)

We basically want to add imports again.

2:34

S… Speaker 1 (148. Outsourcing the Route Configuration)

We had this in the app module too.

2:36

S… Speaker 1 (148. Outsourcing the Route Configuration)

And in imports,

2:37

S… Speaker 1 (148. Outsourcing the Route Configuration)

we want to use this router module,

2:39

S… Speaker 1 (148. Outsourcing the Route Configuration)

use for root as before and pass our routes array

2:44

S… Speaker 2 (148. Outsourcing the Route Configuration)

to it.

2:44

S… Speaker 2 (148. Outsourcing the Route Configuration)

So just like we did before.

2:46

S… Speaker 1 (148. Outsourcing the Route Configuration)

But that alone is not enough now.

2:49

S… Speaker 1 (148. Outsourcing the Route Configuration)

Because as I mentioned,

2:50

S… Speaker 1 (148. Outsourcing the Route Configuration)

we simply want to use this app routing module to outsource

2:54

S… Speaker 2 (148. Outsourcing the Route Configuration)

our routes.

2:55

S… Speaker 1 (148. Outsourcing the Route Configuration)

Therefore, we need to add our app routing module

2:59

S… Speaker 1 (148. Outsourcing the Route Configuration)

back to our main module.

3:01

S… Speaker 1 (148. Outsourcing the Route Configuration)

And for this,

3:02

S… Speaker 1 (148. Outsourcing the Route Configuration)

we need to add the exports array here.

3:05

S… Speaker 1 (148. Outsourcing the Route Configuration)

And I just can mention it again.

3:07

S… Speaker 1 (148. Outsourcing the Route Configuration)

We will dive deeper into modules later in the course.

3:09

S… Speaker 1 (148. Outsourcing the Route Configuration)

Exports simply tells Angular,

3:13

S… Speaker 1 (148. Outsourcing the Route Configuration)

hey, from this module,

3:15

S… Speaker 1 (148. Outsourcing the Route Configuration)

if I were to add this module to the imports

3:19

S… Speaker 1 (148. Outsourcing the Route Configuration)

of another module,

3:20

S… Speaker 2 (148. Outsourcing the Route Configuration)

what should be accessible?

3:23

S… Speaker 1 (148. Outsourcing the Route Configuration)

to this module which imports this module and the

3:28

S… Speaker 1 (148. Outsourcing the Route Configuration)

one thing we want to make accessible is our router module

3:32

S… Speaker 1 (148. Outsourcing the Route Configuration)

now here you don't call for root because you did this here so

3:36

S… Speaker 1 (148. Outsourcing the Route Configuration)

in the first step you configured this router module added your own routes

3:40

S… Speaker 1 (148. Outsourcing the Route Configuration)

to it now we simply export this configured router module

3:45

S… Speaker 1 (148. Outsourcing the Route Configuration)

and therefore in app module

3:47

S… Speaker 1 (148. Outsourcing the Route Configuration)

we can now import our own app routing module.

3:51

S… Speaker 1 (148. Outsourcing the Route Configuration)

So here on the imports array,

3:53

S… Speaker 1 (148. Outsourcing the Route Configuration)

we can simply add app routing module.

3:56

S… Speaker 1 (148. Outsourcing the Route Configuration)

Make sure to add the import path here.

3:58

S… Speaker 1 (148. Outsourcing the Route Configuration)

And with that,

4:00

S… Speaker 1 (148. Outsourcing the Route Configuration)

we have the same setup as before,

4:02

S… Speaker 1 (148. Outsourcing the Route Configuration)

but with a bit of a leaner app module and

4:06

S… Speaker 1 (148. Outsourcing the Route Configuration)

our routing functionality outsourced in this separate module,

4:10

S… Speaker 1 (148. Outsourcing the Route Configuration)

which is kind of a good practice to do to keep your files

4:14

S… Speaker 1 (148. Outsourcing the Route Configuration)

organized and easy to read.

4:16

S… Speaker 1 (148. Outsourcing the Route Configuration)

So same behavior as before if we save this with ng

4:21

S… Speaker 1 (148. Outsourcing the Route Configuration)

serve still running we should therefore see that everything still

4:25

S… Speaker 1 (148. Outsourcing the Route Configuration)

works and This looks good to me But again

4:29

S… Speaker 1 (148. Outsourcing the Route Configuration)

important to understand now with a different setup a bit more readable

4:33

S… Speaker 1 (148. Outsourcing the Route Configuration)

and a good practice to implement if your application grows more complex

هذا النص تم إنتاجه بواسطة AI (التعرف الآلي على الكلام). قد يحتوي على أخطاء - التحقق من الصوت الأصلي للاستخدام الحرج. سياسة الذكاء الاصطناعي

❤️ هل تحب STT.ai؟ أخبر أصدقاءك!

موجز تنفيذي

انقر على ملخص لإنشاء ملخص للذكاء الاصطناعي لهذا النص.

اسأل AI عن هذا النص

وإذا سألت عن أي شيء في هذا النص، سيجد المحقق الخاص الأقسام ذات الصلة ويجيبك.

تفريغ آخر