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

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

--

--

--

I’m a Software Engineer in love with everything tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Neovim for Beginners— Note Taking, Writing, Diagramming, and Presentation

Deep dive into React context API / Separate state from state Dispatcher functions

How to patch packages in node_modules

7 Websites That I Enjoy Using as a Web Developer

Female smiling

Blog 306

JavaScript Double Equals and Coercion

Why Deno is important!

Example Deno

The Beginner’s Guide to Beginning Three.js

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

More from Medium

Angular app in Github pages

Baking pagination with Angular and Bootstrap 5

Azure AD with Angular and Express.js

Dockerizing an Angular Application with Nginx and hosting in AWS - ec2