In this section, we're going to start adding routing capabilities to our application.
Most applications have pages for housing different types of resources.
We can access a specific resource through the address bar in the browser.
Inside this part of the browser, we can modify the URL to move to a different page.
The concept of serving different resources based on a URL is called routing.
Some examples of a resource can be the home page images, videos and icons from our app.
Traditionally, routing is handled on the back end.
Routing is a standard feature in a majority of backend frameworks.
Wikipedia is a site that implements routing on the back end, we can click on the links to move around
the site as we do so, the entire page gets refreshed.
You can look at the refresh icon in the browser to see this in action.
Every time the icon changes, the browser refreshes the page.
Static assets like CSS or JavaScript need to be read.
Downloaded under the developer tools, we can view a list of files downloaded in the network panel.
Navigating around Wikipedia will cause the list to refresh.
Some of the files are the same from page to page.
It's redundant to download the same files as the years have gone by.
Developers have discovered a better way to implement routing.
Browsers have evolved to shared the responsibility of routing with backend frameworks.
After a few meetings, a new API was introduced called the History API.
It's a standardized API in most popular browsers.
We can navigate to different URLs with JavaScript by doing so.
The browser will not reload the assets.
Let's give it a try.
Switch over to the console panel.
We will add the following function history dot push state.
The push state function will update the path in the URL.
It's essential to make a distinction between the domain and path.
You URLs are made up of different components, for this example.
We are going to look at the two most important components.
First and foremost, we have the domain.
The domain has a hostname and domain extension.
In this example, example, dot com is considered the domain portion of the URL.
After the domain is the path.
The path can point to a specific resource.
Paths allow us to point to individual files or pages.
The push state function allows us to modify the path we can't modify the domain, otherwise we would
receive a cross origin error.
Luckily, we don't need to redirect to different URLs.
This function has three arguments.
The first argument is the data for the new page.
We are going to pass in null for this demonstration.
We don't need to pass on data.
The next argument can be set to null.
This argument is ignored by browsers.
It's not worth learning about.
The most important argument is the third argument is the path to navigate to.
Let's pass in pizza.
Before you run this function, keep an eye on the address bar and refresh icon.
After running this function, the path has been updated to the new path.
Most importantly, the page has not been refreshed.
In addition, the push state function has added the URL to the user's browsing history.
We can press the backward and forward buttons.
These actions do not cause the browser to refresh, either.
We can leverage the history API to navigate around the app.
There are some advantages to allowing the client to handle routing.
We benefit by providing a better user experience, lowering bandwidth costs and boosting performance.
However, there is one caveat if we look at the page, nothing has changed.
The history API modifies the URL.
It doesn't manage the documents.
This task is left to us to handle.
Fortunately, angular ships a separate package for handling routing.
In the resource section of this lecture, I provide a link to the angular router package.
Angular can manage swapping components, updating the URL and monitoring changes under the hood.
It uses the history API, therefore it's compatible with most browsers.
This package does not come installed with the default angular package.
We have the option of installing it manually.
Alternatively, we can include this package during the creation of our project.
In fact, that's what we did.
If you can recall, we enabled routing for our project when creating it with the angular Seelye.
It has been configured in our project.
This entire section will be devoted to learning about the router package.
Let's look at the configuration in the next lecture.