Laravel 6 AngularJs CRUD tutorial

AngularJs is Google-owned frontend framework. It's really powerful. In this tutorial, we'll learn from start to end how to make a CRUD app using Laravel 6 and AngularJs. Before start, make sure you have basic knowledge about AngularJs. Let's start.

Our table is a simple contact list table with 3 fields id, name, phone

1st Step: Define routes in web.php file.

Route::get('contacts','ContactController@getIndex');
Route::post('contacts','ContactController@postStore');
Route::get('contacts/data','ContactController@getData');
Route::post('contact/update','ContactController@postUpdate');
Route::post('contact/delete','ContactController@postDelete');

2nd Step: Make a Contact model.

<?php namespace App;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    public $timestamps = false;
    protected $table = 'contacts';
    protected $fillable = ['name','phone'];
}

In this model, I have used public $timestamps = false; because we are not using two required fields that are needed for Laravel eloquent model, fields called created_at and updated_at. So that Laravel won't throw an exception on table record creation and update.

Step 3: Make ContactController.php file.

<?php namespace App\Http\Controllers;

use App\Http\Requests;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Contact;


class ContactController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    public function getIndex()
    {
        return view('admin.contacts');
    }

    public function getData()
    {
        return Contact::all();
    }

    public function postStore(Request $request)
    {
        return Contact::create($request->all());
    }

    public function postUpdate(Request $request)
    {
        if($request->has('id')){
          $record = Contact::find($request->input('id'))
          $record->update($request->all());
        }
    }

    public function postDelete(Request $request)
    {
        if($request->has('id')){
          $record = Contact::where('id',$request->input('id'))
          $record->delete();
        }

    }
}

Step 4: Now create a contacts.blade.php view in resources/views/admin folder.

@extends('admin.template')
@section('content')
    <div ng-controller="ContactCtrl">

        <div class="col-md-12">
            <div class="clearfix">
                <span>Laravel - Angularjs CRUD</span>
                <a class="btn btn-success btn-sm pull-right" ng-click="create()">Add New</a>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Contact List</h3>
                </div>
                <table class="table table-bordered table-striped table-condensed">
                    <tr>
                        <td>ID</td>
                        <td>NAME</td>
                        <td>PHONE</td>
                        <td>ACTION</td>
                    </tr>

                    <tr ng-repeat="row in data">
                        <td>@</td>
                        <td>@</td>
                        <td>@</td>
                        <td>
                            <button ng-click="edit(row)"
                                    type="button"
                                    class="btn btn-xs btn-warning"
                                    title="Edit Record"><i class="fa fa-edit"></i></button>
                            <button ng-click="deleteRecord(row)"
                                    type="button"
                                    class="btn btn-xs btn-danger"
                                    title="Delete Record"><i class="fa fa-trash"></i></button>
                        </td>
                    </tr>

                </table>
            </div>

        </div>


        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close"
                                data-dismiss="modal" aria-hidden="true">&times;
                        </button>
                        <h4 class="modal-title">@Edit Contact</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Name</label>
                            <input class="form-control input-sm" type="text" ng-model="Contact.name">
                        </div>
                        <div class="form-group">
                            <label>Phone</label>
                            <input class="form-control input-sm" type="text" ng-model="Contact.phone">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                        <button ng-if="isInsert" type="button" class="btn btn-primary"
                                ng-click="store(Contact)">Save
                        </button>
                        <button ng-if="!isInsert" type="button" class="btn btn-primary"
                                ng-click="update(Contact)">Update
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div>
    <!--app instance end-->

    <script>
        var myApp = angular.module('myApp', []);
        myApp.controller('ContactCtrl', function ($scope, $http) {
            $scope.Contact = {name: null, phone: null};
            $scope.isInsert = true;

            $scope.init = function () {
                $http.get(adminUrl + '/contacts/data')
                    .success(function (data) {
                        $scope.data = data;
                    })
            };
            $scope.init();

            $scope.create = function () {
                $scope.isInsert = true;
                $scope.Contact = {};
                $('#modal').modal()
            };

            $scope.store = function (data) {
                if (!confirm('Are you sure?')) return;
                $http.post(adminUrl + '/contacts', data)
                    .success(function (res) {
                        $scope.init();
                        $('#modal').modal('hide');
                        $scope.Contact = {}
                    })
            }

            $scope.edit = function (row) {
                $scope.isInsert = false;
                $scope.Contact = angular.copy(row);
                $('#modal').modal();
            }

            $scope.update = function (data) {
                if (!confirm('Are you sure?')) return;

                $http.post(adminUrl + '/contacts/update', data)
                    .success(function (data) {
                        $scope.init();
                        $('#modal').modal('hide');
                        $scope.Contact = {}

                    })
            }
            $scope.deleteRecord = function (row) {
                if (!confirm('Are you sure?')) return;

                $http.post(adminUrl + '/contacts/delete', row)
                    .success(function (data) {
                        $scope.init()
                    })
            }
        });

    </script>
@endsection

Here we have used @ for print AngularJs value.