Skip to main content
Angular 2 Single Page Apps using Routing Part 5

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.

 

Vinod Narayanan

Vinod Narayanan

Vinod Narayanan works with Trigent Software as Technical Lead (UI Development). Vinod has over ten years of experience in analysis, design and development, testing and implementation of web based applications. His areas of expertise include Responsive UI and SharePoint Branding.

Leave a Reply

Your email address will not be published. Required fields are marked *

seventy four − = 69