Frontend State Management with Angular and NGRX : Setting up application pages and and routing

Setting up application pages and and routing

Next up, we will set up our application pages using the Angular CLI and then map the pages in our routes. 

We will create the new page components under a components directory, by running the commands below.

ng g component components/Home   
ng g component components/Culture
ng g component components/Entertainment
ng g component components/Technology
ng g component components/Science
ng g component components/Business
ng g component components/Videos

In the app-routing.module.ts file, we set up our routes, the complete routes set up is shown below: 

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

import { CultureComponent } from './components/culture/culture.component';
import { EntertainmentComponent } from './components/entertainment/entertainment.component';
import { HomeComponent } from './components/home/home.component';
import { TechnologyComponent } from './components/technology/technology.component';
import { ScienceComponent } from './components/science/science.component';
import { BusinessComponent } from './components/business/business.component';
import { VideosComponent } from './components/videos/videos.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'culture', component: CultureComponent },
  { path: 'entertainment', component: EntertainmentComponent },
  { path: 'technology', component: TechnologyComponent },
  { path: 'science', component: ScienceComponent },
  { path: 'business', component: BusinessComponent },
  { path: 'videos', component: VideosComponent },
  { path: '**', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

course logo
Frontend State Management with Angular and NGRX
Number of sections:
12
Content length:
Delivery formats:
Frontend State Management with Angular and NGRX