Angular Routing Made Easy — Part 1

When we run an Angular application and serve it on a port number say ( 4200 ), we get our application running at http://localhost:4200

This is the only path our browser understands, and hence it can’t serve different destinations on different paths such as http://localhost:4200/items. But, What if we have multiple paths in the same application ?

How can we solve this problem?

Well, let’s do some cheating :). What if, we can tell our browser all the destinations and all the paths to reach them initially ? The problem will be solved because now, the browser will know everything initially.

That’s where the Javascript Router comes in action. It makes our lives easier by changing the destination whenever the path changes. In technical terms, by changing the application state whenever the browser URL changes and vice-versa.

These Routers are written in certain Javascript Frameworks and for Angular we have it packaged as @angular/router

The @angular/router contains the shown terms:

Router Components

1. Service: This is a global service present inside the Angular Application.
2. State: The state of Router is maintained by Router State.
3. Configuration: It maintains information about all the routing states which is present inside the application.
4. Guard: This is a code that runs whenever the router is activated, deactivated or loaded.
5. Snapshot: It will provide access to state and data for a particular route node.
6. Resolver: The script that will fetch data before the requested page is initiated.
7. Outlet: This is the location in DOM for router outlet to place it’s components.

Don’t worry much about these difficult terms, we are going to cover them with the code :)

Coding Time

To tell the paths and destinations to your browser, you need to import the RouterModule and Routes from @angular/router into your app.module.ts file.

import {RouterModule, Routes} from '@angular/router';

After this, you can define an array of your paths and destination pages.

const routes: Routes = [
  {
    path: '',
    redirectTo: 'items',
    pathMatch: 'full'
  },
  {
    path: 'items',
    component: AppComponent
  }
];

Note: Here, the pathMatch is specifying a strict matching of path to reach the destination page.

Lastly, you need to pass the routes array in the RouterModule using RouterModule.forRoot(routes) and have to add it to imports

RouterModule.forRoot(routes)

The complete app.module.ts file will look like this:

Explanation:

In the routes array, the path object is '' which means the path http://localhost:4200/ , we have not provided any destination to this object, but we are redirecting this path to items path using redirectTo key.

Now, every request on http://localhost:4200/ will be redirected to http://localhost:4200/items . In the next object, we specified the destination for the path items to AppComponent by using the key component which means on each request of http://localhost:4200/items AppComponent will get render.

Process Flow:

Request on http://localhost:4200/

Redirected to http://localhost:4200/items

AppComponent will get Render

Awesome …. :) Our Routing configuration is set up, but we need to tell the Angular Application where to place our rendered AppComponent.

For that, we will use the router-outlet .

As our application bootstrap the AppComponent on first load. The best choice will be to transfer the code of AppComponent to the child-component and to only place router-outlet inside the AppComponent .

So, let’s make the child-component, named ListComponent here using the command:

ng generate component list

And then, we will transfer the whole code to ListComponent from AppComponent

Finally we will write <router-outlet></router-outlet> in app.component.html . This will ensure that the DOM of the component should be placed here.

Finally, you will see the output on the screen as follows. This is the child component that is being rendered inside it’s parent when the path is matched in the Router.

AppComponent

For the complete code, please check the repository

aayusharora/Angular-Routing

I hope, this post will really help you to add Routes easily in your Angular Application. In the next part, we will see the concept behind Nested Routing .

Till then, ng-bye

Visit Aayush Arora on MentorCruise

If you liked the article, please clap your heart out. Tip — You can clap 50 times!

Please also share on Fb and Twitter. If you’d like to get updates, follow me on Twitter and Medium. If anything is not clear or you want to point out something, please comment down below.