In a traditional website before single-page apps, each page was served independently from the server. When you went to index.html, the browser would ask the server for the index.html file, which the server would then return to the browser and then display. And if you went to page1.html, it would ask the server for that file, the file would be returned and the entire page would be replaced even if 80% of the page was the same as the prior page.

With Modern web applications this process is much more efficient, since an app is loaded into memory by loading just a single page, typically index.html. Then all other pages are actually loaded via JavaScript, but they’re not really full pages but sections of the full page.

By configuring routes in angular we can take advantage of all this modularity.

The Process of configuring routes in angular is very easy.

First we’ll place Angular’s router outlet component, which is a directive that tells our router where to render the content in the view.

<router-outlet></router-outlet>

For instance, if we have a view:

@Component({
  template: `
  <div>
    <div>Extra Stuff…</div>
    <router-outlet></router-outlet>
  </div>
 `
})
 

After that somehow we need to tell Angular when a user requests a particular URL, display its corresponding component here. We do that by defining routes. These routes are going to basically be an array of route objects like this:

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'projects', component: ProjectsComponent },
  { path: 'projects/:id', component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];j

line { path: ‘home’, component: HomeComponent },

basically  says, if the URL matches /home, then show this HomeComponent wherever our router outlet component is.

<router-outlet></router-outlet>

In line { path: ‘projects/:id’, component: ProjectsComponent } we are handle out project detail page route , this route looks a little different because it has this :id on the end of it. That’s basically a parameter placeholder where we expect a value to be passed in on the route, this route will match things like /projects/1 or /project/anything, and when it sees a route like that, it will display the project details component.

In line  { path: ”, redirectTo: ‘home’, pathMatch: ‘full’ } we have a default route so that if the user navigates to the root of our site, it will take them also to the home page, so that will look this line is just saying when the path is empty or when we’re at the root of our site, then redirect to the route/home and redirect routes need this path match property and there are two options for that, either prefix or full. Prefix means redirect if the URL starts with the specified path string and full means redirect if it fully matches the specified path string.

Angular provides a typescript definition “Routes” that will give us some extra IntelliSense and compile time safety if we add it.

Import {  Routes } from ‘@angular/router’;

Example:

const routes : Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'projects', component: ProjectsComponent },
  { path: 'projects/:id', component: ProjectsComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

Then We just need to tell Angular to load this config over in our app.module.

To install our router into our app we use the RouterModule.forRoot() function in the imports key of our NgModule:

@NgModule({
  declarations: [
    RoutesDemoApp,
    HomeComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes) // <-- installs Router routes, components and services
  ],
  bootstrap: [ RoutesDemoApp ],
  providers: [
    provide(LocationStrategy, {useClass: HashLocationStrategy})
  ]
})
class RoutesDemoAppModule {}
 
// bootstrap app
platformBrowserDynamic().bootstrapModule(RoutesDemoAppModule)
  .catch((err: any) => console.error(err));

Notice that we give our routes as the argument to RouterModule.forRoot().

When we put RouterModule in our imports it means that we’re able to use the RouterOutlet and RouterLink components in this module.

One more thing that we need to do when we adding routing to our app is we need to tell Angular where on our web server our app is hosted. For example, our app is actually hosted right at the root of our web server, but what if our app was hosted in /myapp-app.

Angular needs to know this so that it knows what its routes are relative to so that it can parse the URL. So we do that by providing a base tag in our index.html like this:

<base href=”/” >

If it was hosted for example in /myapp-app we would just indicate that like this:

<base href=”/ myapp-app” >

This is basically how to implement basic routing, I’ll create a new post where I can go over more complex route examples as Pre-loading Data for Components, Lazily Loading, Guarding Against Route Activation and more..

LEAVE A REPLY

Please enter your comment!
Please enter your name here