[MUSIC]
Let's now start talking about Angular Routing.
Is it routing or is it rooting?
I'm going to be rooting for routing.
So henceforth, I will pronounce all of these as routing,
routes, router and so on.
If you happen to be from an area where in English you pronounce it as route or
router, please bear with me.
So, what exactly is Angular Routing and how does it help us?
In terms of the Angular application that we have seen so
far, we have never seen the use for routing.
We have seen that we can develop an angular application with
multiple components and then make use of them one inside the other, and
develop a whole Angular application without even talking about routing.
Now suppose you have multiple components and
you want to be able to navigate among the components in
a way that you can cause this navigation through, for
example, clicking on links or buttons in your UI and
be able to render different views in your application's screen,
then Angular Routing comes to your rescue.
We will see how we can use routing to develop something called single
page applications.
We'll talk about single page applications in the next lesson.
But for the moment, let's concentrate on Angular Routing and
specifically the Route a module that is available in Angular.
The router module itself is separate from the Angular core module, so
it is available as a separate module and you will need to import it explicitly
into your Angular application in order to make use of the supported
Angular Router model provides for you to navigate among radius
views off the radius components that form part of your angular predation.
So as part of the exercise, we'll add in multiple components and
we will see how we can navigate among them using the angular router.
So as I mentioned already the Angular router
enables navigation among various views.
In such a way that you can include this navigation into
the links or the toolbar-based buttons and
so on that you can include in the UI of your Angular application and
then you can trigger the navigation from one view to another view
by clicking on either the link or the button in your UI.
This is where the Angular Router takes advantage the browser URL and
it uses the browser URL as an instruction for
it to navigate among radius client generated views.
These views are all typically supported by the multiple components
that form hard of your Angular application.
Now when you navigate from one view to another view,
you can also pass in optional parameters to those views.
As we learned in that previous slide,
the Angular Router takes advantage of the URL in order to
enable it to recognize the need to navigate among the middle.
So, this is where Angular Router takes advantage of what
is already supported in HTML5 through the history API?
So, what does the history API enable us to do?
It gives the developers the ability to modify
a website's URL without causing a page refresh.
Now if you are used to visiting various websites in your browser,
you'll normally would either click on the bookmark bar or
on a link in a page or you would explicitly type in
the URL into the address bar of your browser.
Now when you do that, you are explicitly specifying the URL there.
Now when you specify a URL,
you are triggering your browser to automatically go to a server and
fetch that new page and render the page in the browser's window.
Now if it can suppress this need to go to a server and fetch information, but
instead change the URL without causing this page refresh,
then we can take advantage of that to enable us to be able to navigate
among views that form part of a single application and
this is where we take advantage of the HTML5.
History API that supports methods like pushState and replaceState.
So, the pushState allows you to add a history entry into your
browser's history without actually causing a page refresh.
Similarly, a replaceState will modify
the existing history entry in your browser's history.
So whereby, you can even use the back and
forward button of your browser to be able to move back and
forth among the URLs without causing a page refresh.
Now, this is where you need to specify something within your index HTML
page called the base.
So when the HTML history API makes use of these methods,
then for the modification, you need to specify a base
location from where you're specifying the additional parts
of your URL path which will not result in a page refresh.
So in this case, for our Angular application,
this always starts at the root.
So, that's why we specify the base as href="/".
Everything else that comes after that in the URL will be
treated within your Angular application as something that
triggers navigation that is handled the Angular router itself
without causing your browser to need a refresh from a server.
So, that's how the angular router takes advantage of the HTML5 history API.
Now if you don't have the history API,
the other way of doing navigation is by using hashtags.
You already know that in HTML, if you specify any link starting
with a hashtag, that refers to a link within the same page.
So when you click on such links, it will not cause a page refresh.
Instead, it'll redirect you to another location within the same page.
So, that's another way of doing things.
But for clean rendering, the HTML5 API supports this
history API that enables you to manipulate the history of
your browser without causing a page refresh.
After that long winded explanation,
let's take an example to help us to understand this even further.
Suppose you define your URL like this say, for example, example.abc.com/home.
Now with the HTML5 history API,
you can simply take that last part of the URL and
modify that to another URL like I had shown here with example.abc.com/menu.
So you see that the URL now has been changed from slash home to slash menu,
this change can be triggered using a push state method of the HTML5
history API without as I mentioned, without reloading the page.
Instead, this will be an internal trigger for
navigation that the Angular Router explicitly takes advantage for
supporting the navigation among various views of your Angular application.
Now obviously you must be interested in how does the Angular Router take advantage
of this.
So this is where the Angular Router leverages the history manipulation
to modify the browser's URL without triggering a page refresh.
Let's take an example.
Suppose you have your Angular application residing at this particular URL.
Now, it so happens that the Angular application that you are working on
is being rendered to the browser by accessing it at this particular URL.
So, it will help us to quickly understand what the Angular Router enables us to do.
So in this case, when you type in this into your browser URL,
you Angular Router can easily be configured to redirect you
to a default location within your angular application.
Typically, remind me that something as like home.
So that will take you to the default entry point for
your angular application which for
sake of easy understanding, I will label it as /home.
So if your URL contains localhost:4200/home,
that means that you are at your default home location.
Now when this navigation is triggered,
you can then let your Angular Router automatically take you to the view,
for example, that is supported by that home component.
So when the URL becomes localhost:4200/home,
you will automatically render the view of the home component in the browser screen.
Very exactly when you place the view that we'll look at in the next slide and
in the exercise that follows.
Similarly, you can have other views within your Angular
application that can also be supported through other URLs
that are extensions to the localhost:4200.
So for example, if the URL is localhost:4200/aboutus, then that
might lead you to be shown the view that is rendered by the AboutComponent.
And similarly, the menu will show you the MenuComponent and so on.
So what this enables us to do is,
depending upon what the URL being used in your browser
you will use that to automatically navigate among the various
views of your various components of your Angular application.
Now, you don't have to explicitly worry about it.
If you configure the Angular Router to take care of all this, then the router
will automatically take care of providing you the navigation among these
components as we would see in the exercise that follows this particular lecture.
Now before we proceed to the exercise where we will learn more about
the angular router, let me quickly draw your attention to a few terms
within the Angular Router that you will encounter during the exercise and
I would like you to pay special attention to these terms,
because they are crucial to understanding how the Angular Router actually works.
So you would first see that when we design the Angular Router,
we'll be taking that help of the router module that
forms part of the angular slash router library.
So, we're going to be importing the router module into or angular application
into the app module and then also we'll be importing the routes.
So, the routes allows us to define the various routes that our
Angular application makes use of or the Angular Router makes use of.
So in that case, we would be specifying the routes in the form of a path and
the corresponding component.
So as you saw in the previous slide, you saw that each one of those URL
extensions was being mapped to the view of particular component.
So, that kind of information is supplied to that Angular Router
through routes and these routes are all specified using
a JavaScript object like this path with two properties.
Path and component and some additional properties that we will not
encounter right now, but we will see in some of the later exercises.
Also, the second question that you would wonder is where would this view be
rendered in your Angular application?
This is where within our template of our app component,
we will include a directive called as the routerOutlet which is specified as you
see as and .
This will be included into the app component template file,
now then your Angular Router navigates to
the different views of the different components.
The corresponding view of the component will be included within your
applications view wherever you specify this particular router outlet.
So, watch out for that in the exercise that follows.
In addition, to trigger the navigation, you would see that
with many of the a tags that are used within the application.
So for example, I would include a setup a tags with the MD
button Angular material component in the toolbar,
in the header component of our Angular application.
I would associate the a tags with another directive,
an attribute directive called routerLink.
The routerLink is an actual directive that the router module provides for us.
This router link enables us to specify the path like, for example,
written codes, I can see a "/menu".
You can have more details than this for the routerLink.
But for the exercise, we will start with a simple example where we would have,
for example, /menu slash home slash contact us and so
on specified using the routerLink attribute direct.
So when you click on a link like this in your toolbar,
then that will trigger the Angular Router to cause a change or
a navigation to a particular view that is supported by the Angular Router module.
So, the mapping between this link and the corresponding components
is already specified in the route that we give to our Angular application.
So, watch out for all these things as you do the exercise.
I will explain some of these things and the reason for
doing them while we are doing the steps of the exercise that follows this lesson.
[MUSIC]