Routing in Angular2

In frameworks like Rails we are required to set routes to each controller or view we want to display to the end user.  It’s a great security practice.

What Are Routes?

What routing allows us to do is to give a path (such as ‘/home’) and send it to a logical component (Controller in Rails speak.)  Let’s say we have a component called “Dashboard” but we don’t want people to see “Dashboard” in the url.  We want this to be the root of the app.  We do that with routes.  Maybe we have another route for the administration of the app that would be accessed off the /administration url.  That too is setup with routes.

I mentioned this is a security practice in Rails… With Rails and Grails, these frameworks will not render any server file or controller unless a route is specified.  This prevents the class PHP hack of getting compromised PHP code (code that would execute a reverse shell) onto a server and pulling it up in a browser.  Files just don’t render in these frameworks, unless there is a route defined in the code itself.

Routing in Angular2

In Angular2 routing is also available.  Here are some key features you need to do to setup routing in Angular:

in app/app.module.ts

we need to add this import at the top:

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

Above the @NgModule we need to assign a constant setting our paths… Below is an example where we have two components (HomeComponent and AdministrationConponent) – this routing is done in the following syntax:

const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'administration', component: AdministrationComponent}
]

Each path is defined within the curly brackets.  Notice the root path is not ‘/’ – doing so will throw an Angular2 error about “no path can start with /”

We also need to update the imports array listed in @NgModule in this file…. it would add RouterModule.forRoot(appRoutes) like so:

imports: [
  BrowserModule,
  FormsModule,
  HttpModule,
  RouterModule.forRoot(appRoutes)
]

Now our app will route to the appropriate components… so hitting the main URL will attempt to pull up the HomeComponent and /administration will attempt to pull up the AdministrationComponent.  But they will error out because it will say it doesn’t know what to load on these components.  We need one more change:

In the app.component.html file we add:

<router-outlet></router-outlet>

Routing Flow

Your index.html file under /app will declare what the app loads.  For example, it might declare

<body>
  <app-root>Loading...</app-root>
</body>

This instructs the app to call the app-root component, and while it’s loading to render the word “Loading…”

The app root component is by default your app.*.* files (such as the ts file and the html.)  As it renders the html file it hits the router-outlet tag… and the Router is defined in the app.module.ts file.  The appropriate routes will pull in the appropriate templates… i.e. hitting at the root of the app will p ull in the /home/home.component.html, and *.ts files.  Hitting the /administration path will pull the /administration/administration.component.ts and html files and so forth.

Routing in Angular2
User Rating: 0 (0 votes)