Laravel PHP Framework and AngularJS Search and Pagination with CRUD Example

Laravel PHP Framework and AngularJS Search and Pagination with CRUD Example

In this post we will give you information about Laravel PHP Framework and AngularJS Search and Pagination with CRUD Example. Hear we will give you detail about Laravel PHP Framework and AngularJS Search and Pagination with CRUD ExampleAnd how to use it also give you demo for it if it is necessary.

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.

Step 1: Create Product Table and Module

In First step, create migration file for product table using Laravel 5 php artisan command.Run following command :

php artisan make:migration create_products_table

After this command, you will see a migration file in following path database/migrations and you have to simply put following code in migration file to create products table.

  1. use IlluminateDatabaseSchemaBlueprint;
  2. use IlluminateDatabaseMigrationsMigration;
  3. class CreateProductsTable extends Migration
  4. {
  5. public functionup()
  6. {
  7. Schema::create('products',function(Blueprint $table){
  8. $table->increments('id');
  9. $table->string('name');
  10. $table->text('details');
  11. $table->timestamps();
  12. });
  13. }
  14. public functiondown()
  15. {
  16. Schema::drop("products");
  17. }
  18. }
use IlluminateDatabaseSchemaBlueprint;use IlluminateDatabaseMigrationsMigration;class CreateProductsTable extends Migration{    public function up()    {        Schema::create('products', function (Blueprint $table) {            $table->increments('id');            $table->string('name');            $table->text('details');            $table->timestamps();        });    }    public function down()    {        Schema::drop("products");    }}

Save this migration file and run following command

php artisan migrate

After create ‘products’ table, yor should create model for product table.Create file in following path app/Product.php and put bellow couple of code in Product.php file:

app/Product.php

  1. namespace App;
  2. use IlluminateDatabaseEloquentModel;
  3. class Product extends Model
  4. {
  5. public $fillable=['name','details'];
  6. }
namespace App;use IlluminateDatabaseEloquentModel;class Product extends Model{    public $fillable = ['name','details'];}

Step2: Create Product Controller

Now we will create ProductController.php in following path app/Http/Controllers, all request(lists, create, edit, delete ,search and pagination) will manage by this ProductCRUDController.php file.

app/Http/Controllers/ProductController.php

  1. namespace AppHttpControllers;
  2. use IlluminateHttpRequest;
  3. use AppHttpRequests;
  4. use AppHttpControllersController;
  5. use AppProduct;
  6. class ProductController extends Controller
  7. {
  8. /**
  9. * Display a listing of the resource.
  10. *
  11. * @return Response
  12. */
  13. public functionindex(Request $request)
  14. {
  15. $input=$request->all();
  16. $products=Product::query();
  17. if($request->get('search')){
  18. $products=$products->where("name","LIKE","%{$request->get('search')}%");
  19. }
  20.          $products=$products->paginate(5);
  21. returnresponse($products);
  22. }
  23. /**
  24. * Store a newly created resource in storage.
  25. *
  26. * @return Response
  27. */
  28. public functionstore(Request $request)
  29. {
  30.     $input=$request->all();
  31. $create= Product::create($input);
  32. returnresponse($create);
  33. }
  34. /**
  35. * Show the form for editing the specified resource.
  36. *
  37. * @param int $id
  38. * @return Response
  39. */
  40. public functionedit($id)
  41. {
  42. $product= Product::find($id);
  43. returnresponse($product);
  44. }
  45. /**
  46. * Update the specified resource in storage.
  47. *
  48. * @param int $id
  49. * @return Response
  50. */
  51. public functionupdate(Request $request,$id)
  52. {
  53.     $input=$request->all();
  54. $product=Product::find($id);
  55. $product->update($input);
  56. $product=Product::find($id);
  57. returnresponse($product);
  58. }
  59. /**
  60. * Remove the specified resource from storage.
  61. *
  62. * @param int $id
  63. * @return Response
  64. */
  65. public functiondestroy($id)
  66. {
  67. return Product::where('id',$id)->delete();
  68. }
  69. }
namespace AppHttpControllers;use IlluminateHttpRequest;use AppHttpRequests;use AppHttpControllersController;use AppProduct;class ProductController extends Controller{    /**     * Display a listing of the resource.     *     * @return Response     */    public function index(Request $request)    {              $input = $request->all();        $products=Product::query();        if($request->get('search')){            $products = $products->where("name", "LIKE", "%{$request->get('search')}%");        }		  $products = $products->paginate(5);                return response($products);    }    /**     * Store a newly created resource in storage.     *     * @return Response     */    public function store(Request $request)    {    	$input = $request->all();        $create = Product::create($input);        return response($create);    }    /**     * Show the form for editing the specified resource.     *     * @param  int  $id     * @return Response     */    public function edit($id)    {        $product = Product::find($id);        return response($product);    }    /**     * Update the specified resource in storage.     *     * @param  int  $id     * @return Response     */    public function update(Request $request,$id)    {    	$input = $request->all();        $product=Product::find($id);        $product->update($input);        $product=Product::find($id);        return response($product);    }    /**     * Remove the specified resource from storage.     *     * @param  int  $id     * @return Response     */    public function destroy($id)    {        return Product::where('id',$id)->delete();    }}

Step3: Route File

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 :

app/Http/routes.php

  1. <?php
  2. /*
  3. |--------------------------------------------------------------------------
  4. | Routes File
  5. |--------------------------------------------------------------------------
  6. |
  7. | Here is where you will register all of the routes in an application.
  8. | It's a breeze. Simply tell Laravel the URIs it should respond to
  9. | and give it the controller to call when that URI is requested.
  10. |
  11. */
  12. Route::get('/',function(){
  13. returnview('app');
  14. });
  15. /*
  16. |--------------------------------------------------------------------------
  17. | Application Routes
  18. |--------------------------------------------------------------------------
  19. |
  20. | This route group applies the "web" middleware group to every route
  21. | it contains. The "web" middleware group is defined in your HTTP
  22. | kernel and includes session state, CSRF protection, and more.
  23. |
  24. */
  25. Route::group(['middleware'=>['web']],function(){
  26. Route::resource('products','ProductController');
  27. });
  28. // Angular HTML Templates
  29. Route::group(array('prefix'=>'/htmltemplates/'),function(){
  30. Route::get('{htmltemplates}',array(function($htmltemplates)
  31. {
  32. $htmltemplates=str_replace(".html","",$htmltemplates);
  33. View::addExtension('html','php');
  34. return View::make('htmltemplates.'.$htmltemplates);
  35. }));
  36. });
<?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

Create route.js file in following path public/app/route.js

route.js

  1. var app = angular.module('main-App',['ngRoute','angularUtils.directives.dirPagination']);
  2. app.config(['$routeProvider',
  3. function($routeProvider){
  4. $routeProvider.
  5. when('/',{
  6. templateUrl:'htmltemplates/home.html',
  7. controller:'AdminController'
  8. }).
  9. when('/products',{
  10. templateUrl:'htmltemplates/products.html',
  11. controller:'ProductController'
  12. });
  13. }]);
  14. app.value('apiUrl','public path url');
var app =  angular.module('main-App',['ngRoute','angularUtils.directives.dirPagination']);app.config(['$routeProvider',    function($routeProvider) {        $routeProvider.            when('/', {                templateUrl: 'templates/home.html',                controller: 'AdminController'            }).            when('/products', {                templateUrl: 'templates/products.html',                controller: 'ProductController'            });}]);app.value('apiUrl', 'public path url');

app.value define global variable which will be injected in controller where we use this variable

Now we will create a controller directory in app directory with name ‘controllers’ and create ProductController.js file in following path public/app/controllers/ProductController.js

ProductController.js

  1. app.controller('AdminController',function($scope,$http){
  2. $scope.pools =[];
  3. });
  4. app.controller('ProductController',function(dataFactory,$scope,$http,apiUrl){
  5. $scope.data =[];
  6. $scope.libraryTemp ={};
  7. $scope.totalProductsTemp ={};
  8. $scope.totalProducts =;
  9. $scope.pageChanged =function(newPage){
  10. getResultsPage(newPage);
  11. };
  12. getResultsPage(1);
  13. functiongetResultsPage(pageNumber){
  14. if(! $.isEmptyObject($scope.libraryTemp)){
  15. dataFactory.httpRequest(apiUrl+'/products?search='+$scope.searchInputText+'&page='+pageNumber).then(function(data){
  16. $scope.data = data.data;
  17. $scope.totalProducts = data.total;
  18. });
  19. }else{
  20. dataFactory.httpRequest(apiUrl+'/products?page='+pageNumber).then(function(data){
  21. console.log(data);
  22. $scope.data = data.data;
  23. $scope.totalProducts = data.total;
  24. });
  25. }
  26. }
  27. $scope.dbSearch =function(){
  28. if($scope.searchInputText.length >=3){
  29. if($.isEmptyObject($scope.libraryTemp)){
  30. $scope.libraryTemp = $scope.data;
  31. $scope.totalProductsTemp = $scope.totalProducts;
  32. $scope.data ={};
  33. }
  34. getResultsPage(1);
  35. }else{
  36. if(! $.isEmptyObject($scope.libraryTemp)){
  37. $scope.data = $scope.libraryTemp ;
  38. $scope.totalProducts = $scope.totalProductsTemp;
  39. $scope.libraryTemp ={};
  40. }
  41. }
  42. }
  43. $scope.saveAdd =function(){
  44. dataFactory.httpRequest('products','POST',{},$scope.form).then(function(data){
  45. $scope.data.push(data);
  46. $(".modal").modal("hide");
  47. });
  48. }
  49. $scope.edit =function(id){
  50. dataFactory.httpRequest(apiUrl+'/products/'+id+'/edit').then(function(data){
  51.     console.log(data);
  52.     $scope.form = data;
  53. });
  54. }
  55. $scope.updateProduct =function(){
  56. dataFactory.httpRequest(apiUrl+'/products/'+$scope.form.id,'PUT',{},$scope.form).then(function(data){
  57.     $(".modal").modal("hide");
  58. $scope.data =apiModifyTable($scope.data,data.id,data);
  59. });
  60. }
  61. $scope.remove =function(product,index){
  62. var result =confirm("Are you sure delete this product?");
  63.     if(result){
  64. dataFactory.httpRequest(apiUrl+'/products/'+product.id,'DELETE').then(function(data){
  65. $scope.data.splice(index,1);
  66. });
  67. }
  68. }
  69. });
app.controller('AdminController', function($scope,$http){   $scope.pools = [];   });app.controller('ProductController', function(dataFactory,$scope,$http,apiUrl){   $scope.data = [];  $scope.libraryTemp = {};  $scope.totalProductsTemp = {};  $scope.totalProducts = 0;  $scope.pageChanged = function(newPage) {    getResultsPage(newPage);  };  getResultsPage(1);  function getResultsPage(pageNumber) {      if(! $.isEmptyObject($scope.libraryTemp)){          dataFactory.httpRequest(apiUrl+'/products?search='+$scope.searchText+'&page='+pageNumber).then(function(data) {            $scope.data = data.data;            $scope.totalProducts = data.total;          });      }else{        dataFactory.httpRequest(apiUrl+'/products?page='+pageNumber).then(function(data) {          console.log(data);          $scope.data = data.data;          $scope.totalProducts = data.total;        });      }  }  $scope.searchDB = function(){      if($scope.searchText.length >= 3){          if($.isEmptyObject($scope.libraryTemp)){              $scope.libraryTemp = $scope.data;              $scope.totalProductsTemp = $scope.totalProducts;              $scope.data = {};          }          getResultsPage(1);      }else{          if(! $.isEmptyObject($scope.libraryTemp)){              $scope.data = $scope.libraryTemp ;              $scope.totalProducts = $scope.totalProductsTemp;              $scope.libraryTemp = {};          }      }  }  $scope.saveAdd = function(){    dataFactory.httpRequest('products','POST',{},$scope.form).then(function(data) {      $scope.data.push(data);      $(".modal").modal("hide");    });  }  $scope.edit = function(id){    dataFactory.httpRequest(apiUrl+'/products/'+id+'/edit').then(function(data) {    	console.log(data);      	$scope.form = data;    });  }  $scope.saveEdit = function(){    dataFactory.httpRequest(apiUrl+'/products/'+$scope.form.id,'PUT',{},$scope.form).then(function(data) {      	$(".modal").modal("hide");        $scope.data = apiModifyTable($scope.data,data.id,data);    });  }  $scope.remove = function(product,index){    var result = confirm("Are you sure delete this product?");   	if (result) {      dataFactory.httpRequest(apiUrl+'/products/'+product.id,'DELETE').then(function(data) {          $scope.data.splice(index,1);      });    }  }   });

Now we will create a folder with name ‘myhelper’ in app directory for helper.js file, which will help to define helper functions.

helper.js

  1. functionapiModifyTable(mainData,id,response){
  2. angular.forEach(mainData,function(product,key){
  3. if(product.id == id){
  4. mainData[key]= response;
  5. }
  6. });
  7. returnmainData;
  8. }
function apiModifyTable(originalData,id,response){    angular.forEach(originalData, function (product,key) {        if(product.id == id){            originalData[key] = response;        }    });    return originalData;}

Now we will create another directory ‘packages’ and create dirPagination.js file in following path public/app/packages/dirPagination.jsand put code of following link :

dirPagination.js

Now We will create another directory ‘services’ and create services.js file in following path public/app/myservices/services.js and put code of following link :

services.js

Step5: Create View

This is final step, where you have to create view files. So first start to create angularapp.blade.php in following path resources/views/angularapp.blade.php and put following code :

angularapp.blade.php

  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4.     <metacharset="utf-8">
  5.     <metahttp-equiv="X-UA-Compatible"content="IE=edge">
  6.     <metaname="viewport"content="width=device-width, initial-scale=1">
  7.     <title>Laravel 5.2</title>
  8.     <!-- Fonts -->
  9.     <linkhref='//fonts.googleapis.com/css?family=Roboto:400,300'rel='stylesheet'type='text/css'>
  10.     
  11.     <linkrel="stylesheet"href="http://www.onlinecode.org/css/bootstrap.css">
  12.     <scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  13.     <scriptsrc="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
  14.     
  15.     <!-- Angular JS -->
  16.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  17.     <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
  18.     <!-- MY App -->
  19.     <scriptsrc="{{ asset('app/packages/dirPagination.js') }}"></script>
  20.     <scriptsrc="{{ asset('app/routes.js') }}"></script>
  21.     <scriptsrc="{{ asset('app/myservices/services.js') }}"></script>
  22.     <scriptsrc="{{ asset('app/myhelper/helper.js') }}"></script>
  23.     <!-- App Controller -->
  24.     <scriptsrc="{{ asset('/app/controllers/ProductController.js') }}"></script>
  25.     
  26. </head>
  27. <bodyng-app="main-App">
  28.     <navclass="navbar navbar-default">
  29.         <divclass="container-fluid">
  30.             <divclass="navbar-header">
  31.                 <buttontype="button"class="navbar-toggle collapsed"data-toggle="collapse"data-target="#collapse-1-example">
  32.                     <spanclass="sr-only">Toggle Navigation</span>
  33.                     <spanclass="icon-bar"></span>
  34.                     <spanclass="icon-bar"></span>
  35.                     <spanclass="icon-bar"></span>
  36.                 </button>
  37.                 <aclass="navbar-brand"href="#">Laravel 5.2</a>
  38.             </div>
  39.             <divclass="collapse navbar-collapse"id="collapse-1-example">
  40.                 <ulclass="nav navbar-nav">
  41.                     <li><ahref="#/">Home</a></li>
  42.                     <li><ahref="#/products">Product</a></li>
  43.                 </ul>
  44.             </div>
  45.         </div>
  46.     </nav>
  47.     <div id="container_area"class="container">
  48.         <ng-view></ng-view>
  49.     </div>
  50.     <!-- Scripts -->
  51. </body>
  52. </html>
<!DOCTYPE html><html lang="en"><head>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="IE=edge">	<meta name="viewport" content="width=device-width, initial-scale=1">	<title>Laravel 5.2</title>	<!-- Fonts -->	<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>		<link rel="stylesheet" href="http://www.onlinecode.org/css/bootstrap.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/myServices.js') }}"></script>	<script src="{{ asset('app/helper/myHelper.js') }}"></script>	<!-- App Controller -->	<script src="{{ asset('/app/controllers/ProductController.js') }}"></script>	</head><body ng-app="main-App">	<nav >		<div >			<div >				<button type="button"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">					<span >Toggle Navigation</span>					<span ></span>					<span ></span>					<span ></span>				</button>				<a  href="#">Laravel 5.2</a>			</div>			<div  id="bs-example-navbar-collapse-1">				<ul >					<li><a href="#/">Home</a></li>					<li><a href="#/products">Product</a></li>				</ul>			</div>		</div>	</nav>	<div >		<ng-view></ng-view>	</div>	<!-- Scripts --></body></html>

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

  1. <h2>Welcome to Landing Page</h2>
<h2>Welcome to Landing Page</h2>

resources/views/htmltemplates/products.html

  1. <divclass="row">
  2. <divclass="col-lg-12 margin-tb">
  3. <divclass="pull-left">
  4. <h1>Product Management</h1>
  5. </div>
  6. <divclass="pull-right"style="padding-top:30px">
  7. <divclass="box-tools"style="display:inline-table">
  8. <divclass="input-group">
  9. <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">
  10. <spanclass="input-group-addon">Search</span>
  11. </div>
  12. </div>
  13. <buttonclass="btn btn-success"data-toggle="modal"data-target="#add-new-product">Create New Product</button>
  14. </div>
  15. </div>
  16. </div>
  17. <tableclass="table table-bordered pagin-table">
  18. <thead>
  19. <tr>
  20. <th>No</th>
  21. <th>Name</th>
  22. <th>Details</th>
  23. <thwidth="220px">Action</th>
  24. </tr>
  25. </thead>
  26. <tbody>
  27. <trdir-paginate="value in data | productsPerPage:5"total-products="totalProducts">
  28. <td>{{ $index + 1 }}</td>
  29. <td>{{ value.name }}</td>
  30. <td>{{ value.details }}</td>
  31. <td>
  32. <buttondata-toggle="modal"ng-click="edit(value.id)"data-target="#edit-data"class="btn btn-primary">Edit</button>
  33. <buttonng-click="remove(value,$index)"class="btn btn-danger">Delete</button>
  34. </td>
  35. </tr>
  36. </tbody>
  37. </table>
  38. <dir-pagination-controlsclass="pull-right"on-page-change="pageChanged(newPageNumber)"template-url="htmltemplates/dirPagination.html"></dir-pagination-controls>
  39. <!-- Create Modal -->
  40. <divclass="modal"id="add-new-product"tabindex="-1"role="dialog"aria-labelledby="myModalForLabel">
  41. <divclass="modal-dialog"role="document">
  42. <divclass="modal-content">
  43. <formmethod="POST"name="addProduct"role="form"ng-submit="saveAdd()">
  44. <inputtype="hidden"name="_token"value="{!! csrf_token() !!}">
  45. <divclass="modal-header">
  46. <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button>
  47. <h4class="modal-title"id="myModalForLabel">Create Product</h4>
  48. </div>
  49. <divclass="modal-body">
  50. <divclass="row">
  51. <divclass="col-xs-12 col-sm-12 col-md-12">
  52. <strong>Name : </strong>
  53. <divclass="form-group">
  54. <inputng-model="form.name"type="text"placeholder="Product Name"name="name"class="form-control"required/>
  55. </div>
  56. </div>
  57. <divclass="col-xs-12 col-sm-12 col-md-12">
  58. <strong>Details : </strong>
  59. <divclass="form-group">
  60. <textareang-model="form.details"class="form-control"required>
  61. </textarea>
  62. </div>
  63. </div>
  64. </div>
  65. <buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button>
  66. <buttontype="submit"ng-disabled="addProduct.$invalid"class="btn btn-primary">Submit</button>
  67. </div>
  68. </form>
  69. </div>
  70. </div>
  71. </div>
  72. </div>
  73. <!-- Edit Modal -->
  74. <divclass="modal fade"id="edit-data"tabindex="-1"role="dialog"aria-labelledby="myModalForLabel">
  75. <divclass="modal-dialog"role="document">
  76. <divclass="modal-content">
  77. <formmethod="POST"name="editProduct"role="form"ng-submit="updateProduct()">
  78. <inputng-model="form.id"type="hidden"placeholder="Name"name="name"class="form-control"/>
  79. <divclass="modal-header">
  80. <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button>
  81. <h4class="modal-title"id="myModalForLabel">Edit Product</h4>
  82. </div>
  83. <div id="modal_body_container"class="modal-body">
  84. <divclass="row">
  85. <divclass="col-xs-12 col-sm-12 col-md-12">
  86. <divclass="form-group">
  87. <inputng-model="form.name"type="text"placeholder="Name"name="name"class="form-control"required/>
  88. </div>
  89. </div>
  90. <divclass="col-xs-12 col-sm-12 col-md-12">
  91. <divclass="form-group">
  92. <textareang-model="form.details"class="form-control"required>
  93. </textarea>
  94. </div>
  95. </div>
  96. </div>
  97. <buttontype="button"class="btn btn-default"data-dismiss="modal">Close</button>
  98. <buttontype="submit"ng-disabled="editProduct.$invalid"class="btn btn-primary create-crud">Submit</button>
  99. </div>
  100. </form>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
<div >    <div >        <div >            <h1>Product Management</h1>        </div>        <div  style="padding-top:30px">            <div  style="display:inline-table">              <div >                  <input type="text"  placeholder="Search" ng-change="searchDB()" ng-model="searchText" name="table_search" title="" tooltip="" data-original-title="Min character length is 3">                  <span >Search</span>              </div>            </div>            <button  data-toggle="modal" data-target="#create-user">Create New Product</button>        </div>    </div></div><table >    <thead>        <tr>            <th>No</th>            <th>Name</th>            <th>Details</th>            <th width="220px">Action</th>        </tr>    </thead>    <tbody>        <tr dir-paginate="value in data | productsPerPage:5" total-products="totalProducts">            <td>{{ $index + 1 }}</td>            <td>{{ value.name }}</td>            <td>{{ value.details }}</td>            <td>            <button data-toggle="modal" ng-click="edit(value.id)" data-target="#edit-data" >Edit</button>            <button ng-click="remove(value,$index)" >Delete</button>            </td>        </tr>    </tbody></table><dir-pagination-controls  on-page-change="pageChanged(newPageNumber)" template-url="templates/dirPagination.html" ></dir-pagination-controls><!-- Create Modal --><div  id="create-user" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">    <div  role="document">        <div >            <form method="POST" name="addProduct" role="form" ng-submit="saveAdd()">            <input type="hidden" name="_token" value="{!! csrf_token() !!}">            <div >                <button type="button"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                <h4  id="myModalLabel">Create Product</h4>            </div>            <div >                                    <div >                        <div >                            <strong>Name : </strong>                            <div >                                <input ng-model="form.name" type="text" placeholder="Name" name="name"  required />                            </div>                        </div>                        <div >                            <strong>Details : </strong>                            <div  >                                <textarea ng-model="form.details"  required>                                </textarea>                            </div>                        </div>                    </div>                    <button type="button"  data-dismiss="modal">Close</button>                    <button type="submit" ng-disabled="addProduct.$invalid" >Submit</button>                            </div>            </form>        </div>    </div></div></div><!-- Edit Modal --><div  id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">    <div  role="document">        <div >            <form method="POST" name="editProduct" role="form" ng-submit="saveEdit()">                <input ng-model="form.id" type="hidden" placeholder="Name" name="name"  />            <div >                <button type="button"  data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>                <h4  id="myModalLabel">Edit Product</h4>            </div>            <div >                                  <div >                        <div >                            <div >                               <input ng-model="form.name" type="text" placeholder="Name" name="name"  required />                            </div>                        </div>                        <div >                            <div >                               <textarea ng-model="form.details"  required>                                </textarea>                            </div>                        </div>                    </div>                    <button type="button"  data-dismiss="modal">Close</button>                    <button type="submit" ng-disabled="editProduct.$invalid" >Submit</button>                            </div>            </form>        </div>    </div></div></div>

resources/views/htmltemplates/dirPagination.html

  1. <ulclass="pagination pull-right"ng-if="1 < pages.length">
  2. <ling-if="boundaryLinks"ng-class="{ disabled : pagination.current == 1 }">
  3. <ahref=""ng-click="setCurrent(1)">&laquo;</a>
  4. </li>
  5. <ling-if="directionLinks"ng-class="{ disabled : pagination.current == 1 }">
  6. <ahref=""ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>
  7. </li>
  8. <ling-repeat="pageNumber in pages track by $index"ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
  9. <ahref=""ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
  10. </li>
  11. <ling-if="directionLinks"ng-class="{ disabled : pagination.current == pagination.last }">
  12. <ahref=""ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>
  13. </li>
  14. <ling-if="boundaryLinks"ng-class="{ disabled : pagination.current == pagination.last }">
  15. <ahref=""ng-click="setCurrent(pagination.last)">&raquo;</a>
  16. </li>
  17. </ul>
<ul  ng-if="1 < pages.length">    <li ng-if="boundaryLinks" ng->        <a href="" ng-click="setCurrent(1)">&laquo;</a>    </li>    <li ng-if="directionLinks" ng->        <a href="" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>    </li>    <li ng-repeat="pageNumber in pages track by $index" ng->        <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>    </li>    <li ng-if="directionLinks" ng->        <a href="" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>    </li>    <li ng-if="boundaryLinks"  ng->        <a href="" ng-click="setCurrent(pagination.last)">&raquo;</a>    </li></ul>

Now you can create your first crud application with laravel angularjs.
Click here to download this project from github: GitHub

Label :

PHP

OOP

Object Oriented Programming

Laravel PHP Framework

Angular JS

Web Development

Hope this code and post will helped you for implement Laravel PHP Framework and AngularJS Search and Pagination with CRUD Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

41  +    =  47

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US