Search and Pagination with CRUD Example in Laravel PHP Framework and AngularJS

In my previous post, you learn how you can create a simple CRUD(Create Read Update Delete) application with Laravel 5.2 , i hope after following steps you will create your first admin panel.

Now I will tell you that how to create application with search , pagination and CRUD in Laravel 5.2 and AngularJS, kindly follow each step to create your first web application having modules with create, edit, delete, list, search and pagination functionality. Using AngularJS it is much more easier to work with events and workin with Laravel AngularJs then it make your application awesome. You must have knowledge about basic AngularJS before goint to create CRUD Application in Laravel AngularJS.

Now we will add some route in routes.php. First add resource route for products module and another route for template route. using template route we will get html template for our app. So let's add below content in route file :

<?php/*|--------------------------------------------------------------------------| Routes File|--------------------------------------------------------------------------|| Here is where you will register all of the routes in an application.| It's a breeze. Simply tell Laravel the URIs it should respond to| and give it the controller to call when that URI is requested.|*/Route::get('/', function () { return view('app');});/*|--------------------------------------------------------------------------| Application Routes|--------------------------------------------------------------------------|| This route group applies the "web" middleware group to every route| it contains. The "web" middleware group is defined in your HTTP| kernel and includes session state, CSRF protection, and more.|*/Route::group(['middleware' => ['web']], function () { Route::resource('products', 'ProductController');});// TemplatesRoute::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); }));});

Step4: Manage AngularJS route and controller

First we will create a separate directory with name `app` in public directory public/app where we will put all angularjs files so that it will be easier to manage files

Now we will create htmltemplates folder in following path resources/views/ and then create home.html file in htmltemplates folder.

resources/views/htmltemplates/home.html

<h2>Welcome to Landing Page</h2>

<h2>Welcome to Landing Page</h2>

resources/views/htmltemplates/products.html

<divclass="row">

<divclass="col-lg-12 margin-tb">

<divclass="pull-left">

<h1>Product Management</h1>

</div>

<divclass="pull-right"style="padding-top:30px">

<divclass="box-tools"style="display:inline-table">

<divclass="input-group">

<inputtype="text"class="form-control input-sm ng-valid ng-dirty"placeholder="Search"ng-change="dbSearch()"ng-model="searchInputText"name="table_search"title=""tooltip=""data-original-title="Minimum length of character is 3">