Angular 2 Single Page Apps using Routing – Part 5

Have you gone through the earlier four blogs, in this 5-part blog series: `Angular 2 Single Page Apps using Routing – Part 1′ and `Angular 2 Single Page Apps using Routing – Part 2′, Angular 2 Single Page Apps using Routing – Part 3 and Angular 2 Single Page Apps using Routing – Part 4‘?

Update base route configuration file app.routes.ts under app folder:

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

import { HomeComponent } from ‘./home/home.component’;
import { CatComponent } from ‘./cats/cat.component’;

// Route Configuration
export const routes: Routes = [
{ path: ”, component: HomeComponent, pathMatch: ‘full’}, //default
{ path: ‘home’, component: HomeComponent },
{ path: ‘cats’, component: CatComponent }, //for cats
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Update app.module.ts to refer cat.component.ts

import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent } from ‘./app.component’;
import { HomeComponent } from ‘./home/home.component’;
import { routing } from ‘./app.routes’;
import { CatComponent } from ‘./cats/cat.component’;
import { PetService } from ‘./pet.service’;

@NgModule({
imports: [ BrowserModule, routing, HttpModule, JsonpModule ],
declarations: [ AppComponent, HomeComponent, CatComponent ],
providers: [ PetService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Update styles.css in the root. Media query used for mobile view UI changes.

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
 }
 .navbar {
 margin-bottom: 20px;
 }
 .jumbotron {
 background:transparent url(assets/images/catsdogs.jpg) center top no-repeat;
 height:250px;
 }
 .align-center {
 display: inline-block;
 }
 .btn-hidden {
 display: none;
 }
 /*Start: Media Query*/
 @media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
 .container.page {
 padding:0;
 }
 .container.page div[class^='col-xs-'] {
 padding:0 !important;
 }
 .scroll {
 height:auto;
 }
 .navbar {
 margin-bottom: 0;
 }
 .list-group-item:first-child {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 }
 .mobile-portrait-hidden {
 display:none;
 }
 .mobile-portrait-visible {
 display:block !important;
 }
 .btn.return-listing {
 border-radius: 0;
 }
 }

@media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: landscape) {
.container.page {
padding:0;
}
.container.page .animal-sel-img.col-xs-12 {
width:50% !important;
padding:0 !important;
}
.container.page .col-xs-12.side-by-side {
width:50% !important;
}
.scroll {
height:280px;
}
}

/*End: Media Query*/

Update app.component.html to set navigation to ‘cats’

<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-briefcase"></i> Pet Care</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li [routerLink]="['/home']" [routerLinkActive]="['active']"><a [routerLink]="['/home']">Home</a></li>
 <li [routerLink]="['/cats']" [routerLinkActive]="['active']"><a [routerLink]="['/cats']">Cats</a></li>
 <li><a href="#">Dogs</a></li>
 </ul>

</div><!–/.nav-collapse –>
</div>
</nav>
<div class=”container page”>
<router-outlet></router-outlet>
</div>

Now run ‘npm start’ in the command prompt and see cat listing and details page as expected.

If the cat listing is not displayed check if proxy is blocking the API url using Console in developer tool.

Creating Dogs Component

Dog component is similar to creating cat component, so try it yourself.