Angular Routing Example

This is going to be a very simple example on how to use routing in angular. For this tutorial i am using angular 2 with angular CLI. ng cli is the easiest way to create an angular project. if you have not installed it, go to angular.io to download and install on your Mac or PC. Ok, once you have downloaded it, lets create a blank project with the following command:

$ cd [YOUR PROJECT PATH]

example of YOUR PROJECT PATH = C:\projects  or ~/projects

once you are in your projects folder or whatever folder you are going to create this new project, lets build an angular project called routing

$ ng new routing

This will take a while. Once the project has been built, you are ready to view the newly created routing in your browser to the following url: http://localhost:4200

you will see the default message:

App Works!

Now we are ready to edit the files to make a simple routing. To keep it as simple as possible, we are only going to edit two files!

1. Step 1 - The first step is to create a new Component called 'simple' - this component will be shown when you click on the link 'simple'

$ ng generate component simple

2. Step 2 - Once the new 'simple' component has been generated, open file: app/app.module.ts and add the following lines:

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

3. Step 3 - app/app.module.ts  add the following property to the imports object after the HttpModule property

,
    RouterModule.forRoot([
      {
        path: 'RoutingSimpleComponent',
        component: RoutingSimpleComponent
      }
    ])

4. Step 4 - Save your changes to app/app.module.ts, then open file app/app.component.html after </h1>

<a routerLink="/RoutingSimpleComponent">RoutingSimpleComponent</a><br>
     <router-outlet></router-outlet>

5. Step 5 - Save your changes to app/app.component.html

6. Step 6 - Open the following URL in your browser, click on the RoutingSimpleComponent link. Notice when you click on the RoutingSimpleComponent link the content from app/routing-simple/routing-simple.component.html is generated.

Done. Thats it!. I wrote this simple and basic tutorial because i was tired of all the tutorials on line and on youtube which you had to follow from the beginning while they show you how everthing works until you get to the routing section. I followed the Tour Of Heroes on the Angular section, but as soon as i got to the Routing section, i was lost. I wanted to understand the basics without going through all those steps, so i created this simple tutorial on how to use a simple routing in angular.

The following shows how app/app.module.ts and app/app.component.html should look like:

<h1>
{{title}}
</h1>
<a routerLink="/RoutingSimpleComponent">RoutingSimpleComponent</a><br>
<router-outlet></router-outlet> 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule }   from '@angular/router';
import { AppComponent } from './app.component';
import { RoutingSimpleComponent } from './routing-simple/routing-simple.component';

@NgModule({
  declarations: [
    AppComponent,
    RoutingSimpleComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      {
        path: 'RoutingSimpleComponent',
        component: RoutingSimpleComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }