In continuation to my earlier blog on the `Angular 2 Single Page Apps Using Routing’ blog series, in this one, I will go through the process required for creating a Home Component.
Creating Home Component
Create Home folder under app folder.
Create home.component.ts under Home folder. Put the following code in it:
import { Component } from '@angular/core';@Component({
moduleId: module.id,
templateUrl: ‘home.html’
})
export class HomeComponent { };
Setting moduleId: module.id in the @Component decorator will use relative path else Angular 2 will be looking for your files at the root level.
Create home.html under Home folder. Put the following code in it:
<div class="jumbotron hidden-xs"> </div> <div class="animal-sel-img col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center"> <a [routerLink]="['/cats']" class="align-center"><img src="../assets/images/cat.jpg" alt="Cats" class="img-responsive img-circle"></a> </div> <div class="animal-sel-img col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center"> <a [routerLink]="['/dogs']" class="align-center"><img src="../assets/images/dog.jpg" alt="Dogs" class="img-responsive img-circle"></a> </div>
The RouterLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink.
Routing applications should add a <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.
<base href="/">
Create base route configuration file app.routes.ts under app folder. Put the following code in it:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from ‘./home/home.component’;
// Route Configuration
export const routes: Routes = [
{ path: ”, component: HomeComponent, pathMatch: ‘full’}, //default
{ path: ‘home’, component: HomeComponent },
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
The appRoutes array of routes describes how to navigate. Pass it to the Router.forRoot method in the module imports to configure the router.
Each Route maps a URL path to a component. There are no leading slashes in the path. The router parses and builds the final URL for you, allowing you to use both relative and “absolute” paths when navigating between application views.
The empty path in the route represents the default path for the application, the place to go when the path in the URL is empty, as it typically is at the start.
Update app.module.ts to refer home.component.ts and app.routes.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from ‘./app.component’;
import { HomeComponent } from ‘./home/home.component’;
import { routing } from ‘./app.routes’;
@NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent, HomeComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Update styles.css in the root
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;
}