Angular 2 - Time to jump in! (Routing)

*** This blog was written with Angular2 RC-3, I will be updating to the latest release shortly.  Thanks! ***

In my previous posts we created the toolbar and menu bar for the Splat-Shot application.  Now we need to create the components behind the menu bar and setup some routing.  The first thing to do is create a new component, and the AngularCLI makes this really easy.  Because we also want our components to be routes, use the 'generate route' command.  Make sure you are in the root directory of your project folder /splat-shot and type:

1	ng generate route home

AngularCLI will create the TypeScript component, the HTML / CSS files along with a component test.  By default AngularCLI creates a 'lasy loaded' view designated by the '+home' directory name.  This is listed in the style guide for marking lazy loaded components.  Another interesting point is that you should not explicitly import lazy loaded components in their parent or sibling components, see style guide for more information.  Let's add some basic HTML and CSS:

src / app / +home / home.component.html

1 2 3 4 5

<div class="welcome"> <h4>Welcome to:</h4> <h1>Splat Shot</h1> <h4>Racquetball League Scoreboard</h4> </div>

src / app / +home / home.component.css

1 2 3

.welcome { text-align: center; }

Save both the files and live-reload should kick off and ... nothing happens.  That is because we have to tell our main component to load the home component as the default route.

src / app / splat-shot.component.ts

...
import { Routes, Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
...
  providers: [
    ROUTER_PROVIDERS,
    MdIconRegistry
  ]
...
@Routes([
    { path: '/', component: HomeComponent },
    { path: '/home', component: HomeComponent}
])
...
  constructor(private router: Router) {}
 ngOnInit() {
 }
...

Your application should now show the home screen:

I had some help from another really great routing example from Juan Suarez. Now let's add the player list and leaderboard components:

1 2	ng generate route player ng generate route leaderboard

With the other two routes complete, now lets wire up the menu bar.  The AngularCLI already injected the routes, the only thing we have to update is our menu object array:

src / app / splat-shot.component.ts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

... views: Object[] = [ { name: "Home", description: "Latest News in the League.", icon: "home", route: '/home' }, { name: "Matches", description: "Show the upcoming matches.", icon: "perm_contact_calendar", route: '/leaderboard' }, { name: "Players", description: "Show List of players.", icon: "people", route: '/player' } ]; ...

Next, we update our html link to include the routerLink and a click operation to close the menu when a user selects the item:

src / app / splat-shot.component.html

1 2 3 4 5 6 7 8 9 10 11 12 13

... <md-sidenav #sidenav> <md-nav-list> <a md-list-item *ngFor="let view of views" [routerLink]="[ view.route ]" (click)="sidenav.close()"> <md-icon md-list-icon>{{view.icon}}</md-icon> <span md-line>{{view.name}}</span> <span md-line class="secondary">{{view.description}}</span> </a> </md-nav-list> </md-sidenav> ...

You should now be able to select a menu item and have it switch between the different components:

In my next post, we will be looking at adding more functionality to each component than just static text.