[MUSIC]
In this exercise we're going to look at how we can leverage the Angular's
routing module to be able to support multiple components, and
be able to navigate to any one of those components in our Angular application.
Taking a quick look at the state of our application.
At the end of the last exercise,
we already noticed that in this application, in the header,
we have links to four different quote, unquote pages here.
Now in Angular terms, this would be supported by using
different components, as we will see in this exercise.
So here we see that when we click on the Home,
we want to be able to see the details of what should be present in the Home page.
And similarly, the About and the Menu of course you already see it right there,
and then the Contact, probably displays some information about the content for
this particular restaurant.
So how do they go about supporting something like this?
First, by taking one quick look at it we see that the Menu is
already supported by displaying the information about the menu here, and
this is already facilitated with the use of the Menu component.
So we see that the Menu component is juxtaposed between the header and
the footer and is able to display the information right there.
Now, how can we leverage the use of the Angular router module to enable
us to support these multiple components and be able to navigate among them.
Now, to get started, first, of course, we need multiple components,
each of them showing their respective view so that we can navigate among the views.
So let's add in three more components to our Angular application,
the Home, the About and the Contact.
You already know how to do that, so let's go to that step next.
At the prompt, type ng g component
home to create the home component.
Similarly generate
the about component and
also while we are at it
the contact component.
So now we have three components added in together with the new component that we
already have.
The disk detail component is already being used in the menu components so
we don't consider it for the moment.
But we now have home, about, contact and menu components, and
we need a way of going between them.
So how do we go about doing that?
So that is where me make use of the Angular router module.
To get started on using the router module to enable us to navigate
among these components, let's add in a new Angular module.
Now this pattern of using the router module is something that is suggested for
slightly more complex Angular applications, but
if we make that as a standard practice it goes a long way to help us in the future.
So I am starting off even the simple application with
putting the router module into its own separate module.
So that encompasses all of our routing needs into a separate module.
To get started, we again use the Angular CLI to
create another module, and we will call that module as app routing.
So this app routing module that we're going to create is going to leverage
the Angular slotting module to provide routing features for our application.
And then we going to make use of that in our app module to enable routing.
To create a new module called app routing,
at the prompt type ng g module app-routing,
and that should create an app routing module and
put an app-routing.module.ts file into that particular folder there.
Now this app-routing module is just left there.
We need to explicitly include that into our app module,
so it has to be able to make use of it.
Going to the editor we now see that we now have another folder here
called app-routing and inside that we have an AppRoutingModule here,
we choose a generic Angular module that the Angular CLI has generated for us.
This has nothing specific about routing as such at the moment,
but we're going to add those features in there.
But, before we do that, let's use this AppRoutingModule in our app.module,
the root module for our Angular application.
To do that, open the app.module, and
while we are here, let me do a little bit of clean up here.
I tend not to like disorganized code, so
I'm just going to move all this code for
the components together in one place there and
then I have my services being required down below here.
Now we have a new module that we are getting
from the AppRoutingModule,
which we just created and
then I'm going to require that
AppRoutingModule into my,
Route module or the AppModule here.
So, I include the AppRoutingModule by importing it first there.
And then after that, into the imports, I go in and
then add in the AppRoutingModule.
Right there, AppRoutingModule.
So with this, my app module,
the root module, is now fixed up to make use of the AppRoutingModule.
Now this gives me the freedom to develop my routing part in
my AppRoutingModule with full confidence that it will be used by my app module.
So let's save the changes to the app module, and
then we will go back and open the AppRoutingModule here.
And here we're going to make use of
the router module that Angular provides for us.
So here let me import the,
RouterModule here, and also the companion
Routes module that is available from Angular.
And then so I'm going to import that from Angular,
and then, RouterModule here.
So from the angular router library, I import both the RouterModule and
the Routes module.
So once I do that, obviously, I need to be able to include the RouterModule in here.
So in addition to the CommonModule that I have imported there,
I need to also use the RouterModule here.
Now, I'm going to leave it at this point.
We will develop the routes for our Angular application and
then come back and fix this up a little bit later.
So with this, let me save the changes to the app routing module.
And what I'm going to do is, just for the sake of keeping my code clean and
organized, I'm going to define all the routes for my application in another file.
But I will create in the app-routing folder and
then I will name it as routes.ts5.
Now, inside this file, I will create all the routes that I need.
So in here, I'm going to import,
The Routes from, @angular/router,
and then use that to construct the routes for my application.
Now in addition, I need to be able to import all
the components that I have within my application.
Because I want to be able to navigate to all the components.
So where do I have the list of all the components?
I have them in the app_module.
So let me go to the app_module.
I try not to type things as far as possible to keep things under control.
So I will go to the app_module, and then I copy in all the components that I have.
I don't need the AppComponent because I won't be directly navigating to that in my
application, but the remaining ones I will need.
So I'm going to simply copy all of those and
then include them into my routes file, here.
So now I have the MenuComponent, the Dishdetail, Header, Foot.
Actually, I don't need the Header and FooterComponent either.
I wont be needing the Header and
FooterComponent because I am not going to navigate to them using routes.
So let me delete the Header and the Footer Components.
I only need the Menu, Home, About, Contacts.
I included the Dishdetail, we will come to that in one of the later exercises.
So now that we have included all these, the next step is for
me to define the various routes that are available here.
I will define a constant here
named routes of the type Routes.
So now you see why I have important routes from the Angular router there.
So this will allow me to define an array specifying
the various routes that are part of my application.
In here, let me specify all the routes here.
Now when you specify routes in your Angular
application, you will specify the path.
Which I will start out with the HomeComponent,
and then when I navigate to the home path,
the corresponding component is the HomeComponent.
So when my URL includes home,
then I will be navigating to the HomeComponent.
In the lecture earlier, we have already seen how we use the HTML
pushState() to recognize internal
navigation, using the HTML support for the pushState().
So that is what I'm leveraging here in order to define these various routes here.
So when I say localhost:4200/home,
then that is pointing to the HomeComponent, here.
So that's the way I will navigate to the HomeComponent.
Similarly, we can define for the other components in our application.
The next path that I'm going to define is to the MenuComponent.
For this exercise, I'm just going to define only these two.
The remaining ones will be filled in as part
of some of the later exercises and assignment that follows.
So we have two of them set up, Home and Menu.
Now, I should also provide the default route here.
So when the user navigates to localhost:4200,
then you will end up in the default location.
So in that case, I will simply redirect the user to the HomeComponent,
which is what will be displayed into the Angular application.
So to do that, I will type in redirectTo property.
And then define that to be /home.
Meaning that when you navigate without providing a URL path there,
then you would automatically navigate to the HomeComponent,
and this should match full here.
So these three, I will supply for the routes here, for the moment.
The remaining ones,
as I said, will be added in as part of the rest of the exercises.
Now, obviously you see these red squiggly
lines there because these are all in
../ So let me fix those up.
So now, from the routes.ts file,
we are preparing this Routes constant here and
then making it available.
So now that this is ready for us, we will go back to the app-routing.module.
And in the app-routing.module,
I'm going to import the routes constant,
Routes constant.
If you want to say that as routes, routes constants, and use it here.
Now, how do I make use of it here?
Now, the RouterModule takes as
a parameter for the forRoot,
The parameter is the routes configuration.
So I'm going to supply the routes as the parameter for that, the RouterModule.
Okay, so that fixes up our routing configuration for our application.
One final change that we need to fix up is that from the app-routing.module,
we want to be able to export the RouterModule to our app-module so
that it can also make use of it.
So this is where we make use of the export
property in our NgModule decorator.
And make our RouterModule available for the AppModule.
So let's save the changes also thus far.
Now, when you route to one of these parts,
whatever you display the view for the particular component.
We don't have anything at the moment in our application.
When you look at the AppComponent.html file.
Here, by default we only have the app-header, app-menu,
and the app-footer here.
Now fortunately,
the Angular RouterModule provides us
with a directive called as router-outlet.
So whenever you specify this directive as,
The tag in your template file.
Then your Angular application will automatically use
that as the place where the corresponding view needs to be inserted in.
So, by specifying the router-outlet in my AppComponent's template file.
Now I will be able to display any of those information in that particular location.
So we have made changes to the app routing module,
the AppComponent.html file, where we added the router-outlet.
We defined the routes in the Routes.ts file and
then we have the AppModule where we added in the AppRoutingModule
as one of the imports there, after importing it up here.
So after all these changes, let's go and
take a look at what our Angular applications is showing in the browser.
Going to our browser, we can now see that in our browser
the default thing that has been shown here is home works.
From your knowledge of how the component that is generated by Angular CLI works.
You already recognize that this must be in the template for the home component.
Also, take a look at the URL in the address part of the browser.
You see that it says localhost:4200/home.
If I simply type localhost:4200,
this will automatically redirect itself to localhost:4200/home.
Because we setup that particular route in our routes configuration here.
Now we have no way of going to the remaining modules, so
how do we provide the linking so we can navigate to the remaining module.
So to fill that in, we need to go and be able to add additional
information in the header components template files so
that it can navigate among these various components.
Coming back to our editor, let me open the HeaderComponent.html file.
Inside this HeaderComponent file, we see that we have these buttons
up here that should enable us to navigate to those particular components there.
So here, we take the help of another attribute directive that
the routing module provides for us called as routerLink.
So to these we will supply
routerLink as /home.
Which means that for this particular button,
the home link in our tool bar.
When we click on that, that should automatically direct me to the home.
So this way, my Angular application knows where to send me at this point.
So that is for home there.
Now similarly, let me also add one for the menu here.
For the menu, when I click on the menu link there,
that should take me to the menu component.
So the routerLink attribute directive enables me to specify, as you see
here a string where I can specify the path that needs to be added in.
Let's save this changes also, and then now take a final look at our application.
Going to our application, now we see that a Home component is displayed here.
When we click on the Menu component, we are at the menu.
So notice how my application automatically navigated to
the menu component to show the view with the menu here.
And also taking a look at the address bar,
notice how the address bar now shows localhost:4200/menu.
Again, we can navigate back to the home component and to the menu component,
back and forth.
So this shows how by adding this routing to our application,
we are able to navigate and show different views within our application.
Now, the about and contact, we're going to do that as part of
another exercise and the assignment that follows later on.
This completes this exercise where we have used Angular router module and
then configured our Angular application to use various routes
to show the different views.
This is a good time for
you to do a Git commit with the message Angular router basics.
[MUSIC]