Video Tutorials

Policy

Twitter LogoFacebook Logo
Understanding Routing in Angular
Learn how to create and display web pages.
By: King

When we talk about routing in web development, we are talking about the control of distributing content to our users based on the web address we enter in the browser.

Routing always used to be that you have a browser and a web server. 

When you enter a web address in the browser, the browser will send a request to a web server and the server will look through the list of routes for the website. Then it will respond back with a page associated with that address. 

Once the browser receives the page, it will render it on to the screen. This process is repeated every time you visit a page.

Image from Codeible.com

Routing is different when you use Angular.

When you enter a web site that is built with Angular, instead of fetching for a page from a web server, the browser will download a JavaScript application from the server and run it locally. Then all the routing is done on the computer, inside the application. 

What’s happening behind the scenes, is that we’re swapping the components inside our web page with other components . This causes an illusion that we are getting a new page but in reality, we’re really in the same page. Contents are just being swapped in and out.

How it works is that, there will be a bunch of components, and several placeholders in parts of our page where we components can be swapped in and out. Then there is a route handler that manages the routes and placements of the components.

Image from Codeible.com

Consider this scenario, if we navigate to the example.com/downloads and our route handler contains that route, the router handler will take the downloads component and place it into the placeholders of our page.

Image from Codeible.com

Let’s do some examples. Open your Angular project on VS code.

Setting Up for Routing

Earlier in the course, we already have routing set up because we entered yes for the routing question.

But if you did not enable routing, you can execute this command with these options.

ng generate module app-routing —routing —flat —module app

This will help us create our router and add it to our application.

If you are curious to what the command do, 

ng generate module app-routing, will create a module call app-routing.

The —routing flag will add the necessary codes in the module so that it will become a route handler.

The —flat flag will place the file inside the app folder instead of creating its own folder.

And the —module flag will add the routing module inside our app module so it will be used in the application

These files and options are generated automatically when we entered yes for the routing question. So you can skip this step if you did.

Our next step is to go in the app component html page and add the placeholder for our route handler to place components in.

To add a placeholder, we use the router-outlet tags.

<router-outlet></router-outlet>

Now we are set up for routing, we have our route handler and a placeholder for the route handler to place components in.

Defining Routes

Let’s add some routes to our application. 

Go into the app-routing module file. What you need to focus on is the routes array.

const routes: Routes = [];

This is where we define our routes.

Each route is an object that must have the path and component property.

const routes: Routes = [

   { path: "", component: null }
];

The path is the extension of our domain name. For example, if the web site is example.com, and our path is downloads, it would be example.com/downloads. Similarity, if our path is an empty string, it would just be example.com because an empty string means no extension. 

Component is the component we want to place in the placeholder when this route is activated.

Let’s try it. Since we do not have a component, create a component call downloads with the ng generate component command. Then set the component property of the route to the component. 

ng generate component downloads

import { DownloadsComponent } from './downloads/downloads.component';

...

const routes: Routes = [
   { path: "downloads", component: DownloadsComponent}
];

So now when we go to localhost:4200/downloads, it should display the contents in the downloads component, which is a paragraph tag with a message.

<p>downloads works!</p>

Let’s verify that. Save the project and start the local server. Open the browser and go to localhost:4200/downloads.

Image from Codeible.com

As you can see, the contents in the downloads components is being displayed.

Wildcard Routes

Now let’s say we went to a nonexistent route., like downloads2. Let’s see what happens.

Image from Codeible.com

We got a blank page because we did not define a route for downloads2. 

This is bad, because we want to always let visitors of our site know that there is a problem when they go to a nonexistent web address of our site. 

One solution will be to define a bunch of routes so users will always get a to a page. However, that is a bad approach and it is unreliable.

In Angular we can use something call the wildcard path. When a route uses this path, the route will be activated when no other routes matches the web address. We can use this to display something on the screen like an error message when the visitor visits a nonexistent route.

To begin, generate an error component. 

ng generate component Error

Go to the app-routing module file and add a wildcard route. To indicate that route is the wildcard route, we set the path property of the route with the double Asterix syntax. Lastly, use the error component for the component property.

import { ErrorComponent } from './error/error.component';
import { DownloadsComponent } from './downloads/downloads.component';

...

const routes: Routes = [
   { path: "downloads", component: DownloadsComponent},
   { path: "**", component: ErrorComponent}
];

Now save the project and go to the browser. Go to localhost:4200/downloads2.

Image from Codeible.com

As you can see, even though we did not define a route for downloads2, we still displayed something on the screen.

Recap

Let’s take a moment to recap what we have learned.

1. We learned how to set up our application for routing using the ng generate module command and  some flags.

2. We learned how to insert a placeholder in our page so the route handler can place components in it when a particular route is activated.

3. We learn how to define routes.

4. And we also we learned the importance of wildcard routes and how to define one.
Thank you for watching, if you find this video helpful, please like and subscribe to support the channel. If you have questions, leave a comment in the section below.


Sign In