Full Stack Angular and Laravel CRUD Application Step by Step

January 15, 2023February 11, 2023 admin@blogshub.co.in 0 Comments

Hey Guys, in this post we will learn how to create CRUD (CREATE, READ, UPDATE and DELETE) application using Angular and Laravel API

for this application we will use laravel for backend and Angular for frontend

For installing Laravel and Creating CRUD API in Laravel you can follow below mention links

https://blogshub.co.in/how-to-install-laravel/
https://blogshub.co.in/create-laravel-crud-rest-api/

For creating restfull API you can follow above mention link , we will call these api in frontend .

So let install Angular first :

Install Angular : First we have to install angular using below mention npm command we can install angular , open command prompt and run below command then press enter.

npm install -g @angular/cli

Create Project : Now we have to create new application or workspace, for that we have to run ng command as mention below.

ng new frontcrudapp

Now get in your application

cd frontcrudapp

Create Component: For CRUD steps and pages we have to create components , lets create component using below ng generate command

ng g c components/employee

Above command will create a one folder “components” and inside components folder it will create component files ,it will create five files .ts,.html and CSS files

Routes: routes are use for navigate the pages. For creating routes go inside app.module.ts and import routemodule, and then create route array and define routes path.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeComponent } from './components/employee/employee.component';
import { NavbarComponent } from './components/navbar/navbar.component';

import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { EmployeeEditComponent } from './components/employee-edit/employee-edit.component';

const appRoutes : Routes = [
  {path: '', component:EmployeeComponent},
  {path: 'edit/:id', component:EmployeeEditComponent}

];

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent,
    NavbarComponent,
    EmployeeEditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Services : For communicating components and API we have to create services inside services we will create some functions and using functions we will call API.

For creating services we will run the ng command in command prompt.

ng g s service/data

Open data service ts file for creating and accessing api

src\app\service\data.service.ts

import HttpClient

import { HttpClient } from '@angular/common/http';

create httpclient object inside construct function and create getData function for accessing API for fetching records.

 constructor(private httpclient: HttpClient) { }

  getData(){
    return this.httpclient.get('http://localhost:8000/api/users/');
  }

Create getData Function : For fetching the data to database we will create a function in service file.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private httpclient: HttpClient) { }

  getData(){
    return this.httpclient.get('http://localhost:8000/api/users/');
  }
}

EmployeeComponent: open Employeecomponent ts file for defining array and function

(src\app\components\employee\employee.component.ts)

import { Component, OnInit  } from '@angular/core';
import { DataService } from 'src/app/service/data.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})

export class EmployeeComponent implements OnInit {

// export class EmployeeComponent {
  employees:any;

  constructor(private dataService:DataService) { }

  ngOnInit(){
    this.getEmployeesdata();
  }

  getEmployeesdata() {
    this.dataService.getData().subscribe(res =>{
      this.employees = res;
    });
  }

}

Add bootstrap CSS in index.html

src\index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Frontcrudapp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Navbar Component : Create a navbar component for creating a navbar in our application.

ng g c components/navbar

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">CRUD</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          
        </ul>
      </div>
    </div>
  </nav>

Fetch Data : Fetch data in employeecomponent html file

src\app\components\employee\employee.component.html

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of employees">
            <td>{{ emp.id }}</td>
            <td>{{ emp.name }}</td>
            <td>{{ emp.email }}</td>
        </tr>
    </tbody>
</table>

Insert Data :

For submit the data using angular we have to create a html form

So inside employee.component.html we will create a form

<form (ngSubmit)="insertData()">
    <div class="form-group">
        <label for="name">Enter Name</label>
        <input type="text" name="name" class="form-control" [(ngModel)]="employee.name">
    </div>

    <div class="form-group">
        <label for="name">Enter Email</label>
        <input type="text" name="email" class="form-control" [(ngModel)]="employee.email">
    </div>

    <div class="form-group">
        <label for="name">Enter Password</label>
        <input type="password" name="password" class="form-control" [(ngModel)]="employee.password">
    </div>

    <button class="btn btn-primary btn-sm mt-4">Submit</button>

</form>

Now we have to import the FormModule inside app.module.ts

src\app\app.module.ts

import { FormsModule } from '@angular/forms';

imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],

Then we have to call insertData function inside employee.component.ts, which we are using with HTML form.

src\app\components\employee\employee.component.ts

insertData(){
    this.dataService.insertData(this.employee).subscribe(res =>{
      this.getEmployeesdata();
    });

Now create a model using below ng command in this model (employee.ts) we will define all input variable which we are getting through form like : name, email, password, its helpful for two way data binding, using [(ngModel)] we can pass these model data type in html form.

ng g class Employee

export class Employee {
    name:any;
    email:any;
    password:any;
}

We have to call Employee model inside employee.component.ts for creating object

import { Employee } from 'src/app/employee';

employee = new Employee();

Now create insertData function in data.service.ts file for communicating with backend API

src\app\service\data.service.ts

  insertData(data){
    return this.httpclient.post('http://localhost:8000/api/users/',data);
  }

Update Records :

For update records we have create a new component ,we can create a component in angular using ng command as below

ng g c components/employee-edit

Create edit button inside employee.component.html

<td> <button class="btn btn-warning btn-sm mx-2" routerLink="edit/{{ emp.id }}">Edit</button></td>

Now we have to create a edit route inside app.module.ts file

src\app\app.module.ts

const appRoutes : Routes = [
  {path: '', component:EmployeeComponent},
  {path: 'edit/:id', component:EmployeeEditComponent}

];

Create a functions in service file for fetching particular record by id and update records

src\app\service\data.service.ts

getEmployeeByID(id:any){
    return this.httpclient.get('http://localhost:8000/api/users/'+id);
  }

updateData(id:any,data:any){
    return this.httpclient.put('http://localhost:8000/api/users/'+id,data);
  }

Create function and array in edit component to interact with services and api

src\app\components\employee-edit\employee-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService } from 'src/app/service/data.service';
import { Employee } from 'src/app/employee';

@Component({
  selector: 'app-employee-edit',
  templateUrl: './employee-edit.component.html',
  styleUrls: ['./employee-edit.component.css']
})
export class EmployeeEditComponent implements OnInit {
  id:any;
  data:any;
  employee = new Employee();
  
  constructor(private route:ActivatedRoute, private dataService: DataService){}

  ngOnInit(){
    console.log(this.route.snapshot.params.id);
    this.id = this.route.snapshot.params.id;
    this.getData();
  }

  getData(){
    this.dataService.getEmployeeByID(this.id).subscribe(res => {
      this.data = res;
      this.employee  = this.data;
    });
  }
}

Import the activated route inside employee-edit.component.ts

src\app\components\employee-edit\employee-edit.component.ts

Create html form for update records

src\app\components\employee-edit\employee-edit.component.html

<form >
    <div class="form-group">
        <label for="name">Enter Name</label>
        <input type="text" name="name" class="form-control" [(ngModel)]="employee.name">
    </div>

    <div class="form-group">
        <label for="name">Enter Email</label>
        <input type="text" name="email" class="form-control" [(ngModel)]="employee.email">
    </div>

    <button class="btn btn-primary btn-sm mt-4">Update</button>

</form>

Delete Records :

Create a delete button in employee component html page

src\app\components\employee\employee.component.html

 <button class="btn btn-danger btn-sm mz-2" (click)="deleteData(emp.id)">Delete</button>

Create Delete function in employee component ts file

src\app\components\employee\employee.component.ts

deleteData(id:any){
    this.dataService.deleteData(id).subscribe(res => {
      this.getEmployeesdata();
    })
  }

Call delete API inside data service ts file

src\app\service\data.service.ts

deleteData(id:any) {
    return this.httpclient.delete('http://localhost:8000/api/users/'+id);
  }

Complete Code :

src\app\app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeComponent } from './components/employee/employee.component';
import { NavbarComponent } from './components/navbar/navbar.component';

import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { EmployeeEditComponent } from './components/employee-edit/employee-edit.component';

const appRoutes : Routes = [
  {path: '', component:EmployeeComponent},
  {path: 'edit/:id', component:EmployeeEditComponent}

];

@NgModule({
  declarations: [
    AppComponent,
    EmployeeComponent,
    NavbarComponent,
    EmployeeEditComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src\app\components\employee\employee.component.ts

import { Component, OnInit  } from '@angular/core';
import { Employee } from 'src/app/employee';
import { DataService } from 'src/app/service/data.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})

export class EmployeeComponent implements OnInit {

// export class EmployeeComponent {
  employees:any;
  employee = new Employee();

  constructor(private dataService:DataService) { }

  ngOnInit(){
    this.getEmployeesdata();
  }

  getEmployeesdata() {
    this.dataService.getData().subscribe(res =>{
      this.employees = res;
    });
  }

  deleteData(id:any){
    this.dataService.deleteData(id).subscribe(res => {
      this.getEmployeesdata();
    })
  }

  insertData(){
    this.dataService.insertData(this.employee).subscribe(res =>{
      this.getEmployeesdata();
    });
  }

}

src\app\components\employee\employee.component.html

<form (ngSubmit)="insertData()">
    <div class="form-group">
        <label for="name">Enter Name</label>
        <input type="text" name="name" class="form-control" [(ngModel)]="employee.name">
    </div>

    <div class="form-group">
        <label for="name">Enter Email</label>
        <input type="text" name="email" class="form-control" [(ngModel)]="employee.email">
    </div>

    <div class="form-group">
        <label for="name">Enter Password</label>
        <input type="password" name="password" class="form-control" [(ngModel)]="employee.password">
    </div>

    <button class="btn btn-primary btn-sm mt-4">Submit</button>

</form>


<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of employees">
            <td>{{ emp.id }}</td>
            <td>{{ emp.name }}</td>
            <td>{{ emp.email }}</td>
            <td> 
                <button class="btn btn-warning btn-sm mx-2" routerLink="edit/{{ emp.id }}">Edit</button>
                <button class="btn btn-danger btn-sm mz-2" (click)="deleteData(emp.id)">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

src\app\components\navbar\navbar.component.html

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">CRUD</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          
        </ul>
      </div>
    </div>
  </nav>

src\app\service\data.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private httpclient: HttpClient) { }

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    }),
  };

  getData(){
    return this.httpclient.get('http://localhost:8000/api/users/');
  }

  insertData(data:any){
    return this.httpclient.post('http://localhost:8000/api/users/',data);
  }

  deleteData(id:any) {
    return this.httpclient.delete('http://localhost:8000/api/users/'+id);
  }

  getEmployeeByID(id:any){
    return this.httpclient.get('http://localhost:8000/api/users/'+id);
  }

  updateData(id:any,data:any){
    return this.httpclient.put('http://localhost:8000/api/users/'+id, JSON.stringify(data),this.httpOptions);
  }
}

src\app\employee.ts

export class Employee {
    name:any;
    email:any;
    password:any;
}

src\app\components\employee-edit\employee-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService } from 'src/app/service/data.service';
import { Employee } from 'src/app/employee';


@Component({
  selector: 'app-employee-edit',
  templateUrl: './employee-edit.component.html',
  styleUrls: ['./employee-edit.component.css']
})
export class EmployeeEditComponent implements OnInit {
  id:any;
  data:any;
  employee = new Employee();
  
  constructor(private route:ActivatedRoute, private dataService: DataService){}

  ngOnInit(){
    console.log(this.route.snapshot.params.id);
    this.id = this.route.snapshot.params.id;
    this.getData();
  }

  getData(){
    this.dataService.getEmployeeByID(this.id).subscribe(res => {
      this.data = res;
      this.employee  = this.data;
    });
  }

  updateEmployee(){
    this.dataService.updateData(this.id,this.employee).subscribe(res => {
      
    })
  }
}

src\app\components\employee-edit\employee-edit.component.html

<form (ngSubmit)="updateEmployee()">
    <div class="form-group">
        <label for="name">Enter Name</label>
        <input type="text" name="name" class="form-control" [(ngModel)]="employee.name">
    </div>

    <div class="form-group">
        <label for="name">Enter Email</label>
        <input type="text" name="email" class="form-control" [(ngModel)]="employee.email">
    </div>

    <button class="btn btn-primary btn-sm mt-4">Update</button>

</form>

Run Application :