All language subtitles for 1. Adding Basic Routing

Our application is definitely working to some degree because we are showing both components on the screen

but there is one little issue right now.

Remember we only want to show one little page of sorts to the user at a time.

I want to show either this elements home component that will eventually contain this segment thing and

this place holder thing and then separately I want to at some other point time show this components

home components and I want to decide whether to show one component or the other based upon the current

U.R.L. that the user goes to slash elements.

I want to show the elements home component if the user goes to slash collections.

I want to show the collection some components.

So let's figure out exactly how to show one component or another based upon the current.

You are El the first thing I want to do is tell you about the current scenario that we are in.

This is what we currently have.

We've got our app module we've got the elements module we are exporting that elements home component

and then making use of it at all times inside of our app component.

Right now we would say that the elements module is a domain module because it is exporting this one

component and that component is displayed at all times inside of the app component.

We don't want to have a domain module instead remember we've got these different module types but we

want to have is both a rounded module and a routine module a domain module is one where we have some

components that are going to be displayed at all times.

We want to have first a routed module because we want to have a component that is only going to be displayed

at some point in time and we want to also have a routing module and that's going to define exactly when

to show that component.

Now just between you and me there really is not much difference between a routed module and a domain

module.

We're about to do a refactor and we're going to turn our elements module from a domain into a routed

and here's the little like here's a little behind the scenes thing we're not really going to make any

big change whatsoever to our elements module whatsoever.

The only real thing we're gonna do here is add in a little bit of configuration to our routing module

and say anytime that a user goes to a root of slash elements we want to show the elements home component.

So here's what we are going to do all we're going to do is make sure that inside of our elements routing

module missing was automatically created for us when we generated this elements module that is the elements

routing module file right there the inside of that file we're going to add in a little bit of configuration

we're gonna say anytime that someone goes to a root of elements we want to show the elements home component

on the screen that's it that's all we have to do.

Let me show you exactly how we do that we get started I mean first go back to my app component HMO file

and I'm going to delete those two components that we're currently displaying I don't want to show them

at all times.

Instead I want to only show them when a user is at inappropriate root Next up inside of my elements

module I no longer need to export my elements home component from here I'm going to remove it from that

list of exports I'm not importing it into the app module anymore and then finally inside my elements

routing module This is the real meat and potatoes this is the thing that actually matters inside the

elements routing module we're going to setup a routing rule this is where we are going to say whenever

user goes to a route of elements you want to show the elements home component but to do so at the top

of my elements routing module file I'm going to import the component we want to display which is the

elements home component from elements home elements home dot components and then inside of this routes

array I'm going to add in one object and to that object I'll add in a path of elements and a component

of elements home component like so as you add guests.

This is saying anytime a user goes to the root elements.

Joe this component on the screen.

We are now in this kind of scenario important thing to understand here is that we don't really have

a very direct tie between this component specifically and the app module.

So at no point time right now does the app module actually reference the elements home component.

Instead the app module just imports the entire elements home module and when it imports that entire

module it also automatically is going to load up all these different routing rules who have defined

inside of the elements routing module okay.

So going to save this I can save all the files we just changed.

I'll then go back over to my application now I will see it.

Nothing on the screen but if I go to my address bar and navigate to a local host forty two hundred slash

elements all DNC elements homeworks up here awesome if I go to any other root like elements slash or

blah blah blah whatever else I'm going to very quickly see an error message inside my console that says

sorry but we couldn't find any components to display based upon that root.

Right now I can only go to lash elements.

All right.

So now we've got this put together with Paul's right here.

Continue in just a moment.