Today, We want to share with you Laravel 5/6/7 Angular JS CRUD Example With File Upload and Pagination.In this post we will show you laravel angularjs crud example, hear for angularjs laravel crud we will give you demo and example for implement.In this post, we will learn about laravel and angularjs together with an example.
Laravel 5/6/7 Angular JS CRUD Example With File Upload and Pagination
There are the Following The simple About laravel and angular crud operation Full Information With Example and source code.
As I will cover this Post with live Working example to develop how to integrate angularjs with laravel, so the angularjs with laravel is used for this example is following below.
Laravel is a web application framework with expressive, elegant syntax.The PHP Framework for Web Artisans,freeing you to create without sweating the small things. CRUD Operation With Server Side.
Keywords : Laravel and AngularJS CRUD with Search and Pagination Example, laravel angularjs login example, angular laravel pagination, angularjs with laravel, how to integrate angularjs with laravel, laravel and angularjs together, laravel and angular crud operation, angularjs laravel crud, laravel angularjs crud example
Phase 1: Make a tasks table and module
create migration for tasks table using Laravel 5 php artisan command
php artisan make:migration create_tasks_table
database/migrations
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTasksTable extends Migration
{
public function up()
{
Schema::create('tasks', function (Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('description');
$table->timestamps();
});
}
public function down()
{
Schema::drop("tasks");
}
}
app/Task.php
namespace App;
use Illuminate\Database\Eloquent\Model;
use DB;
class Task extends Model
{
public $fillable = ['title','description'];
}
Phase 2: Make a controller
app/Http/Controllers/TaskController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Task;
class TaskController extends Controller
{
public function index(Request $request)
{
$input = $request->all();
if($request->get('search')){
$tasks = Task::where("title", "LIKE", "%{$request->get('search')}%")
->paginate(5);
}else{
$tasks = Task::paginate(5);
}
return response($tasks);
}
public function store(Request $request)
{
$input = $request->all();
$create = Task::create($input);
return response($create);
}
public function edit($id)
{
$task = Task::find($id);
return response($task);
}
public function update(Request $request,$id)
{
$input = $request->all();
Task::where("id",$id)->update($input);
$task = Task::find($id);
return response($task);
}
public function destroy($id)
{
return Task::where('id',$id)->delete();
}
}
Phase 3: Route file
app/Http/routes.php
Route::get('/', function () {
return view('app');
});
Route::group(['middleware' => ['web']], function () {
Route::resource('tasks', 'TaskController');
});
// Templates
Route::group(array('prefix'=>'/templates/'),function(){
Route::get('{template}', array( function($template)
{
$template = str_replace(".html","",$template);
View::addExtension('html','php');
return View::make('templates.'.$template);
}));
});
Phase 4: use AngularJS
public/app/route.js
var app = angular.module('main-App',['ngRoute','angularUtils.directives.dirPagination']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/home.html',
controller: 'AdminController'
}).
when('/tasks', {
templateUrl: 'templates/tasks.html',
controller: 'TaskController'
});
}]);
public/app/controllers/TaskController.js
app.controller('AdminController', function($scope,$http){
$scope.pools = [];
});
app.controller('TaskController', function(dataFactory,$scope,$http){
$scope.data = [];
$scope.taskLibsData = {};
$scope.totalTasksTemp = {};
$scope.totalTasks = 0;
$scope.pageChanged = function(newPage) {
FetchTaskRowsPage(newPage);
};
FetchTaskRowsPage(1);
function FetchTaskRowsPage(pageNumber) {
if(! $.isEmptyObject($scope.taskLibsData)){
dataFactory.httpRequest('/tasks?search='+$scope.searchText+'&page='+pageNumber).then(function(data) {
$scope.data = data.data;
$scope.totalTasks = data.total;
});
}else{
dataFactory.httpRequest('/tasks?page='+pageNumber).then(function(data) {
$scope.data = data.data;
$scope.totalTasks = data.total;
});
}
}
$scope.searchDB = function(){
if($scope.searchText.length >= 3){
if($.isEmptyObject($scope.taskLibsData)){
$scope.taskLibsData = $scope.data;
$scope.totalTasksTemp = $scope.totalTasks;
$scope.data = {};
}
FetchTaskRowsPage(1);
}else{
if(! $.isEmptyObject($scope.taskLibsData)){
$scope.data = $scope.taskLibsData ;
$scope.totalTasks = $scope.totalTasksTemp;
$scope.taskLibsData = {};
}
}
}
$scope.saveAdd = function(){
dataFactory.httpRequest('tasks','POST',{},$scope.form).then(function(data) {
$scope.data.push(data);
$(".modal").modal("hide");
});
}
$scope.edit = function(id){
dataFactory.httpRequest('tasks/'+id+'/edit').then(function(data) {
console.log(data);
$scope.form = data;
});
}
$scope.saveEdit = function(){
dataFactory.httpRequest('tasks/'+$scope.form.id,'PUT',{},$scope.form).then(function(data) {
$(".modal").modal("hide");
$scope.data = apiModifyTable($scope.data,data.id,data);
});
}
$scope.remove = function(task,index){
var result = confirm("Are you sure delete this task?");
if (result) {
dataFactory.httpRequest('tasks/'+task.id,'DELETE').then(function(data) {
$scope.data.splice(index,1);
});
}
}
});
public/app/helper/taskHelper.js
function apiModifyTable(originalData,id,response){
angular.forEach(originalData, function (task,key) {
if(task.id == id){
originalData[key] = response;
}
});
return originalData;
}
create one another folder “packages” and create file dirPagination.js(public/app/packages/dirPagination.js) and put code of following link:dirPagination.js
public/app/services/taskServices.js
app.factory('dataFactory', function($http) {
var myService = {
httpRequest: function(url,method,params,dataPost,upload) {
var passParameters = {};
passParameters.url = url;
if (typeof method == 'undefined'){
passParameters.method = 'GET';
}else{
passParameters.method = method;
}
if (typeof params != 'undefined'){
passParameters.params = params;
}
if (typeof dataPost != 'undefined'){
passParameters.data = dataPost;
}
if (typeof upload != 'undefined'){
passParameters.upload = upload;
}
var promise = $http(passParameters).then(function (response) {
if(typeof response.data == 'string' && response.data != 1){
if(response.data.substr('loginMark')){
location.reload();
return;
}
$.gritter.add({
title: 'Application',
text: response.data
});
return false;
}
if(response.data.jsMessage){
$.gritter.add({
title: response.data.jsTitle,
text: response.data.jsMessage
});
}
return response.data;
},function(){
$.gritter.add({
title: 'Application',
text: 'An error occured while processing your request.'
});
});
return promise;
}
};
return myService;
});
Phase 5: Make a View
resources/views/app.blade.php
<html lang="en">
<head>
<title>Laravel 5/6/7 CRUD</title>
<!-- Fonts -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
<!-- MY App -->
<script src="{{ asset('/app/packages/dirPagination.js') }}"></script>
<script src="{{ asset('/app/routes.js') }}"></script>
<script src="{{ asset('/app/services/taskServices.js') }}"></script>
<script src="{{ asset('/app/helper/taskHelper.js') }}"></script>
<!-- App Controller -->
<script src="{{ asset('/app/controllers/TaskController.js') }}"></script>
</head>
<body ng-app="main-App">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Laravel 5.2</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#/">Home</a></li>
<li><a href="#/tasks">Task</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
1.resources/views/templates/home.html
<h2>Welcome to Home Page</h2>
2.resources/views/templates/tasks.html
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h1>Task Management System</h1>
</div>
<div class="pull-right" style="padding-top:30px">
<div class="box-tools" style="display:inline-table">
<div class="input-group">
<input type="text" class="form-custom-control input-sm ng-valid ng-dirty" placeholder="Search" ng-change="searchDB()" ng-model="searchText" name="table_search" title="" tooltip="" data-original-title="Min character length is 3">
<span class="input-group-addon">Search</span>
</div>
</div>
<button class="btn btn-success" data-toggle="modal" data-target="#create-user">Make a New</button>
</div>
</div>
</div>
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th>No</th>
<th>Task Title</th>
<th>Task Description</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="value in data | tasksPerPage:5" total-tasks="totalTasks">
<td>{{ $index + 1 }}</td>
<td>{{ value.title }}</td>
<td>{{ value.description }}</td>
<td>
<button data-toggle="modal" ng-click="edit(value.id)" data-target="#edit-data" class="btn btn-success">Edit</button>
<button ng-click="remove(value,$index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
<dir-pagination-controls class="pull-right" on-page-change="pageChanged(newPageNumber)" template-url="templates/dirPagination.html" ></dir-pagination-controls>
<!-- Make a Modal -->
<div class="modal fade" id="create-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="addTask" role="form" ng-submit="saveAdd()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Make a Task</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Task Title : </strong>
<div class="form-group">
<input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-custom-control" required />
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Description : </strong>
<div class="form-group" >
<textarea ng-model="form.description" class="form-custom-control" required>
</textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" ng-disabled="addTask.$invalid" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editTask" role="form" ng-submit="saveEdit()">
<input ng-model="form.id" type="hidden" placeholder="Name" name="name" class="form-custom-control" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Task</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-custom-control" required />
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<textarea ng-model="form.description" class="form-custom-control" required>
</textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" ng-disabled="editTask.$invalid" class="btn btn-success create-crud">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
3.resources/views/templates/dirPagination.html
<ul class="pagination pull-right" ng-if="1 < pages.length">
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
<a href="" ng-click="setCurrent(1)">«</a>
</li>
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
<a href="" ng-click="setCurrent(pagination.current - 1)">‹</a>
</li>
<li ng-repeat="pageNumber in pages track by $index" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
<a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
</li>
<li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
<a href="" ng-click="setCurrent(pagination.current + 1)">›</a>
</li>
<li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == pagination.last }">
<a href="" ng-click="setCurrent(pagination.last)">»</a>
</li>
</ul>
Web Programming Tutorials Example with Demo
Read :
Summary
You can also read about AngularJS, ASP.NET, VueJs, PHP.
I hope you get an idea about angular laravel pagination.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.