Laravel Lumen CRUD REST API with Angular Application -part 2

  • 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
cd shoppers
npm install bootstrap jquery popper.js —-save
@import ‘~bootstrap/dist/css/bootstrap.css’;
$code . 
ng g c components/<component_name> --module=app
registerloginnavbarcategoriesitemsadd-categoryadd-itempage-not-found
ng g m routing app-routing --flat --module=app
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 { }
ng g s services/<service_name> --module=app
tokenauthauth-guarddatahttp-interceptornavigate-away-guardcategories-resolver
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 { }
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 { }
<app-navbar></app-navbar><div *ngIf=”showLoadingIndicator” class=”spinner”></div><div class=”container”><router-outlet></router-outlet></div>
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;}});}}
ng serve -o

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adrian Sebuliba

Adrian Sebuliba

I’m a Software Engineer in love with everything tech