Laravel 7 and 6 angular js crud tutorial. In this tutorial, we would love to share with you how you can create a crud application in laravel using the angular js. This example tutorial also work with laravel 7.x version.
Angular js
AngularJS is a powerful JavaScript client-side Model-View-Controller (MVC) framework. It is especially popular for building single page applications that behavior like AJAX application.
Laravel Angular JS CRUD Tutorial
Follow the below steps and create laravel angular web crud applications:
- Install Fresh Laravel Setup
- Setup Database Credentials in .env
- Create REST API Controller
- Create a Model
- Define Route
- AngularJS application structure
- AngularJS app.js
- Create Angular js controller
- Create blade view
- Start development server
1). Install Fresh Laravel Setup
First of all, we need to install the laravel fresh application. Use the below command and download fresh new laravel setup :
composer create-project --prefer-dist laravel/laravel lara-angular
2). Setup Database Credentials in .env
In this step, go to your project directory and open .env file and set your database credentials like this:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=databasename
DB_USERNAME=db_username
DB_PASSWORD=db_password
3). Create REST API Controller
In this step, we need to create a new controller name CustomerController. So open your command prompt and go to your project root directory than run the below-given command for creating a new CustomerController.
php artisan make:controller API/CustomerController --api
Now go to app/controller/API/CustomerController.php and update the below methods in your controller file:
<?php namespace App\Http\Controllers\API; use App\Customer; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use Illuminate\Support\Facades\Validator; use Illuminate\Database\Eloquent\ModelNotFoundException; class CustomerController extends Controller { public function index() { return response()->json([ 'error' => false, 'customers' => Customer::all(), ], 200); } public function store(Request $request) { $validation = Validator::make($request->all(),[ 'name' => 'required', 'email' => 'required|email|unique:customers,email', 'contact_number' => 'required', 'position' => 'required', ]); if($validation->fails()){ return response()->json([ 'error' => true, 'messages' => $validation->errors(), ], 200); } else { $customer = new Customer; $customer->name = $request->input('name'); $customer->email = $request->input('email'); $customer->contact_number = $request->input('contact_number'); $customer->save(); return response()->json([ 'error' => false, 'customer' => $customer, ], 200); } } public function show($id) { $customer = Customer::find($id); if(is_null($customer)){ return response()->json([ 'error' => true, 'message' => "Record with id # $id not found", ], 404); } return response()->json([ 'error' => false, 'customer' => $customer, ], 200); } public function update(Request $request, $id) { $validation = Validator::make($request->all(),[ 'name' => 'required', 'email' => 'required|email', 'contact_number' => 'required', ]); if($validation->fails()){ return response()->json([ 'error' => true, 'messages' => $validation->errors(), ], 200); } else { $customer = Customer::find($id); $customer->name = $request->input('name'); $customer->email = $request->input('email'); $customer->contact_number = $request->input('contact_number'); $customer->save(); return response()->json([ 'error' => false, 'customer' => $customer, ], 200); } } public function destroy($id) { $customer = Customer::find($id); if(is_null($customer)){ return response()->json([ 'error' => true, 'message' => "Record with id # $id not found", ], 404); } $customer->delete(); return response()->json([ 'error' => false, 'message' => "Customer record successfully deleted id # $id", ], 200); } }
4). Create a Model
Now we will create one eloquent model. So go to your command prompt and run the below command here:
php artisan make:model Customer
Next, go to app/customer.php and update the below code into your file:
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Customer extends Model { protected $fillable = [ 'id', 'name', 'email', 'contact_number' ]; }
5). Define Route
In this step, we will define the route in routes/api.php file. So go to routes/api.php and update the below route into your file:
Route::group(['prefix' => 'v1','namespace' => 'API'], function(){ Route::apiResource('customers', 'CustomerController'); });
6). AngularJS application structure
Our application will have the following structure

Here :
- app – contains all AngularJS related JavaScript files
- app/controllers – contains all AngularJS controllers
css
– contains all CSS filesjs
– contains all regular JavaScript files for our UI.
AngularJS app.js
In this step, we will create a new file name app.js. So go to /public/app, create a new file name app.js and update the below code into your app.js file:
This file will be used to define our application
var app = angular.module('customerRecords', []) .constant('API_URL', 'http://localhost:8000/api/v1/');
Here,
var app = angular.module('customerRecords', [])
creates an AngularJS module and assigns the object to the variableapp
. All AngularJS files will be reference the variable app.constant('API_URL', 'http://localhost:8000/api/v1/');
defines a constant variable with the API URL.
Create AngularJS controllers
Now /public/app/controllers and create a controller name customers.js controller. And update the below code into your customers.js file:
app.controller('customersController', function ($scope, $http, API_URL) { //fetch customers listing from $http({ method: 'GET', url: API_URL + "customers" }).then(function (response) { $scope.customers = response.data.customers; console.log(response); }, function (error) { console.log(error); alert('This is embarassing. An error has occurred. Please check the log for details'); }); //show modal form $scope.toggle = function (modalstate, id) { $scope.modalstate = modalstate; $scope.customer = null; switch (modalstate) { case 'add': $scope.form_title = "Add New Customer"; break; case 'edit': $scope.form_title = "Customer Detail"; $scope.id = id; $http.get(API_URL + 'customers/' + id) .then(function (response) { console.log(response); $scope.customer = response.data.customer; }); break; default: break; } console.log(id); $('#myModal').modal('show'); } //save new record and update existing record $scope.save = function (modalstate, id) { var url = API_URL + "customers"; var method = "POST"; //append customer id to the URL if the form is in edit mode if (modalstate === 'edit') { url += "/" + id; method = "PUT"; } $http({ method: method, url: url, data: $.param($scope.customer), headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(function (response) { console.log(response); location.reload(); }), (function (error) { console.log(error); alert('This is embarassing. An error has occurred. Please check the log for details'); }); } //delete record $scope.confirmDelete = function (id) { var isConfirmDelete = confirm('Are you sure you want this record?'); if (isConfirmDelete) { $http({ method: 'DELETE', url: API_URL + 'customers/' + id }).then(function (response) { console.log(response); location.reload(); }, function (error) { console.log(error); alert('Unable to delete'); }); } else { return false; } } });
HERE,
app.controller('customersController', function($scope, $http, API_URL) {...}
defines a controlleremployeesController
in theapp
variable that we created in/app/app.js
. We have injected$scope
,$http
, and a constantAPI_URL
as dependencies- assigns
response.employees
to$scope.customers
variable. The$scope.customers
variable will be available in our view. $scope.toggle = function(modalstate, id) {...}
displays the modal form$scope.save = function(modalstate, id){...}
saves a new record or updates an existing record depending on whether the variableid
has a value or not.$scope.confirmDelete = function(id){...}
deletes an existing record
7). Create a blade view
Now go to /resources/views and create a new file name index.blade.php and update the below code into your file:
<!doctype html> <html lang="en" ng-app="customerRecords"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Laravel 6 Crud application Angular JS Tutorial</title> </head> <body> <div class="container" ng-controller="customersController"> <header> <h2>customers Database</h2> </header> <div> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Contact No</th> <th><button id="btn-add" class="btn btn-primary btn-xs" ng-click="toggle('add', 0)">Add New customer</button></th> </tr> </thead> <tbody> <tr ng-repeat="customer in customers"> <td>{{ customer.id }}</td> <td>{{ customer.name }}</td> <td>{{ customer.email }}</td> <td>{{ customer.contact_number }}</td> <td> <button class="btn btn-default btn-xs btn-detail" ng-click="toggle('edit', customer.id)">Edit</button> <button class="btn btn-danger btn-xs btn-delete" ng-click="confirmDelete(customer.id)">Delete</button> </td> </tr> </tbody> </table> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">{{form_title}}</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form name="frmcustomers" class="form-horizontal" novalidate=""> <div class="form-group error"> <label for="inputEmail3" class="col-sm-12 control-label">Name</label> <div class="col-sm-12"> <input type="text" class="form-control has-error" id="name" name="name" placeholder="Fullname" value="{{name}}" ng-model="customer.name" ng-required="true"> <span class="help-inline" ng-show="frmcustomers.name.$invalid && frmcustomers.name.$touched">Name field is required</span> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-12 control-label">Email</label> <div class="col-sm-12"> <input type="email" class="form-control" id="email" name="email" placeholder="Email Address" value="{{email}}" ng-model="customer.email" ng-required="true"> <span class="help-inline" ng-show="frmcustomers.email.$invalid && frmcustomers.email.$touched">Valid Email field is required</span> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-12 control-label">Contact No</label> <div class="col-sm-12"> <input type="text" class="form-control" id="contact_number" name="contact_number" placeholder="Contact Number" value="{{contact_number}}" ng-model="customer.contact_number" ng-required="true"> <span class="help-inline" ng-show="frmcustomers.contact_number.$invalid && frmcustomers.contact_number.$touched">Contact number field is required</span> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="btn-save" ng-click="save(modalstate, id)" ng-disabled="frmcustomers.$invalid">Save changes</button> </div> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script> <!-- AngularJS Application Scripts --> <script src="<?= asset('app/app.js') ?>"></script> <script src="<?= asset('app/controllers/customers.js') ?>"></script> </body> </html>
Next, go to routes/web.php file and change welcome to index, like this:
Route::get('/', function () { return view('index'); });
7). Start Development Server
We need to start the development server. Use the PHP artisan serve command and start your server :
php artisan serve
Load the following URL in your web browser
http://localhost:8000/