Laravel Lumen CRUD REST API with Angular Application -part 2

Before we get started, ensure that you have the following tools already installed on your local machine.

• An IDE, preferably WebStorm or Visual Studio Code.
• Node JS installed
• Angular CLI and Angular version 5

Creating the angular project

Create a new project angular project by issuing the command in the terminal

ng new shoppers

This application will use the bootstrap 4 framework for CSS.

cd shoppers

Install bootstrap 4 and its dependencies.

npm install bootstrap jquery popper.js —-save

now add the following line to the file styles.css

@import ‘~bootstrap/dist/css/bootstrap.css’;

Now bootstrap CSS is ready to be used in our application.

next open shoppers with the editor by typing

$code . 

In the terminal.

Create your components inside the app folder in the project

ng g c components/<component_name> --module=app

The components to be created include:

register
login
navbar
categories
items
add-category
add-item
page-not-found

Also, create a routing module by running the following command.

ng g m routing app-routing --flat --module=app

this module will be used to configure the routes as shown below.

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { RouterModule, Routes } from ‘@angular/router’;
import { LoginComponent } from ‘./components/login/login.component’;
import { RegisterComponent } from ‘./components/register/register.component’;
import { CategoriesComponent } from ‘./components/categories/categories.component’;
import { ItemsComponent } from ‘./components/items/items.component’;
import { AddCategoryComponent } from ‘./components/add-category/add-category.component’;
import { AddItemComponent } from ‘./components/add-item/add-item.component’;
import { PageNotFoundComponent } from ‘./components/page-not-found/page-not-found.component’;
const appRoutes: Routes = [
{
path: ‘login’,
component: LoginComponent,
},
{
path: ‘register’,
component: RegisterComponent
},
{
path: ‘categories’,
component: CategoriesComponent,
},
{
path: ‘add-category’,
component: AddCategoryComponent,
},
{
path: ‘add-category/:id’,
component: AddCategoryComponent,
},
{
path: ‘categories/:id’,
component: ItemsComponent,
},
{
path: ‘categories/:id/add-item’,
component: AddItemComponent,
},
{
path: ‘’,
redirectTo: ‘/login’,
pathMatch: ‘full’
},
{
path: ‘**’,
component: PageNotFoundComponent
},
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
declarations: []
})
export class AppRoutingModule { }

For more details on how routing works in angular please visit the official Angular documentation.

Creating services:

ng g s services/<service_name> --module=app

The service_name created include:

token
auth
auth-guard
data
http-interceptor
navigate-away-guard
categories-resolver

Now the app-module.ts file should look like.

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { FormsModule } from ‘@angular/forms’;
import { AppComponent } from ‘./app.component’;
import { NavbarComponent } from ‘./components/navbar/navbar.component’;
import { LoginComponent } from ‘./components/login/login.component’;
import { RegisterComponent } from ‘./components/register/register.component’;
import { CategoriesComponent } from ‘./components/categories/categories.component’;
import { ItemsComponent } from ‘./components/items/items.component’;
import { AddCategoryComponent } from ‘./components/add-category/add-category.component’;
import { AddItemComponent } from ‘./components/add-item/add-item.component’;
import { AppRoutingModule } from ‘.//app-routing.module’;
import { RouterModule } from ‘../../node_modules/@angular/router’;
import { AuthService } from ‘./services/auth.service’;
import { HttpClientModule, HTTP_INTERCEPTORS } from ‘@angular/common/http’;
import { TokenService } from ‘./services/token.service’;
import { DataService } from ‘./services/data.service’;
import { HttpInterceptorService } from ‘./services/http-interceptor.service’;
import { NavigateAwayGuardService } from ‘./services/navigate-away-guard.service’;
import { CategoriesResolverService } from ‘./services/categories-resolver.service’;
import { PageNotFoundComponent } from ‘./components/page-not-found/page-not-found.component’;
import { AuthGuardService } from ‘./services/auth-guard.service’;
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
RegisterComponent,
CategoriesComponent,
ItemsComponent,
AddCategoryComponent,
AddItemComponent,
PageNotFoundComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
FormsModule,
HttpClientModule
],
providers: [
AuthService,
TokenService,
DataService,
NavigateAwayGuardService,
CategoriesResolverService,
AuthGuardService,
{ provide: HTTP_INTERCEPTORS, useClass: HttpInterceptorService, multi: true, }
],
bootstrap: [AppComponent]
})
export class AppModule { }

And the app-routing.module.ts file should look like.

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { RouterModule, Routes } from ‘@angular/router’;
import { LoginComponent } from ‘./components/login/login.component’;
import { RegisterComponent } from ‘./components/register/register.component’;
import { CategoriesComponent } from ‘./components/categories/categories.component’;
import { ItemsComponent } from ‘./components/items/items.component’;
import { AddCategoryComponent } from ‘./components/add-category/add-category.component’;
import { AddItemComponent } from ‘./components/add-item/add-item.component’;
import { NavigateAwayGuardService } from ‘./services/navigate-away-guard.service’;
import { CategoriesResolverService } from ‘./services/categories-resolver.service’;
import { PageNotFoundComponent } from ‘./components/page-not-found/page-not-found.component’;
import { AuthGuardService } from ‘./services/auth-guard.service’;
const appRoutes: Routes = [
{
path: ‘login’,
component: LoginComponent,
},
{
path: ‘register’,
component: RegisterComponent
},
{
path: ‘categories’,
component: CategoriesComponent,
resolve: { categories: CategoriesResolverService },
canActivate: [AuthGuardService]
},
{
path: ‘add-category’,
component: AddCategoryComponent,
canDeactivate: [NavigateAwayGuardService],
canActivate: [AuthGuardService]
},
{
path: ‘add-category/:id’,
component: AddCategoryComponent,
canDeactivate: [NavigateAwayGuardService],
canActivate: [AuthGuardService]
},
{
path: ‘categories/:id’,
component: ItemsComponent,
canActivate: [AuthGuardService],
},
{
path: ‘categories/:id/add-item’,
component: AddItemComponent,
canActivate: [AuthGuardService],
},
{
path: ‘’,
redirectTo: ‘/login’,
pathMatch: ‘full’
},
{
path: ‘**’,
component: PageNotFoundComponent
},
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
declarations: []
})
export class AppRoutingModule { }

At this point, the HTML template of the app module should contain the following code to facilitate routing.

<app-navbar></app-navbar>
<div *ngIf=”showLoadingIndicator” class=”spinner”></div>
<div class=”container”>
<router-outlet></router-outlet>
</div>

Note that the showLoadingIndicator allows for controlling whether to display or remove the spinner in times of slow network connections

The code for controlling this behavior is shown below in the file app.component.ts

import { Component } from ‘@angular/core’;
import { Event, Router, NavigationStart, NavigationEnd, RouterEvent, NavigationCancel, NavigationError } from ‘@angular/router’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
showLoadingIndicator = true;
constructor(private _router: Router) {
this._router.events.subscribe((routerEvent: Event) => {
if (routerEvent instanceof NavigationStart) {
this.showLoadingIndicator = true;
}
if (routerEvent instanceof NavigationEnd ||
routerEvent instanceof NavigationCancel ||
routerEvent instanceof NavigationError) {
this.showLoadingIndicator = false;
}
});
}
}

The rest of the code for the components, services, and guards can be found on my Github repo

You can test the application by running the below command in the terminal.

ng serve -o

Once it has finished building, it should open in the browser and point to the URL http://localhost:4200.

Thanks for reading. :)