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">×
</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.