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
Laravel 5/6/7 CRUD
1.resources/views/templates/home.html
Welcome to Home Page
2.resources/views/templates/tasks.html
Task Management System
Search
| No | Task Title | Task Description | Action |
|---|---|---|---|
| {{ $index + 1 }} | {{ value.title }} | {{ value.description }} |
