AngularJS Auto Load more results using PHP MySQLi

AngularJS Auto Load more results using PHP MySQLi

In this Post We Will Explain About is AngularJS Auto Load more results using PHP MySQLi With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Load More Data using AngularJS in PHP/MySQLi Example

In this post we will show you Best way to implement Angular JS Load more data in PHP MySQLi, hear for load data dynamically on page scroll using AngularJS and PHP MySQLi with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :   Angularjs Datatables Server Side Processing in PHP and MySQLi




Creating simple Database

CREATE TABLE `articles` (
  `postid` int(11) NOT NULL AUTO_INCREMENT,
  `postname` varchar(30) NOT NULL,
PRIMARY KEY(`postid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Dump Data in MySQL Table

INSERT INTO `articles` (`postid`, `postname`) VALUES
(1, 'Angularjs'),
(2, 'VueJS'),
(3, 'Laravel'),
(4, 'PHP'),
(5, 'Magento'),
(7, 'C#'),
(8, 'ASP.NET'),
(9, 'HTML'),
(10, 'JavaScript'),
(11, 'CSS'),
(12, 'REACT'),
(13, 'MEANJS'),
(14, 'Yii'),
(15, 'CI'),
(16, 'Google Adsense'),
(17, 'Wordpress'),
(18, 'Blogspots'),
(19, 'Freelancer'),
(20, 'Upwork');

index.html

This is simple index where we display simple data.

<!DOCTYPE html>
<html lang="en" ng-app="liveApp">
<head>
    <meta charset="utf-8">
    <title>Simple Angular JS Load more data with PHP MySQLi</title>
	<!-- bootstrap.min.css -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet">
	<!-- angular-1.5.7.min.js -->
    <script src="js/angular-1.5.7.min.js"></script>
</head>
<body ng-controller="liveloadCtrl" ng-init="fetch()">
<div class="container">
    <h1 class="page-header text-center">Simple Angular JS Load more data using PHP and MySQLi</h1>
	<div class="col-md-4 col-md-offset-4">
	    <div class="panel panel-primary" ng-repeat="post in articles">
	    	<div class="panel-body text-center">
	    		<span style="font-size:21px">{{ post.postname }}</span>
	    	</div>
		</div>
		<button class="btn btn-success btn-lg btn-block" ng-click="loadmore()">{{ liveLoadName }}</button>
		<br><br>
	</div>
</div>
<script src="main.js"></script>
</body>
</html>

angular.js

It Data contains simple main.js scripts.

Also Read :   Radio buttons using AngularJS Example

var liveApp = angular.module('liveApp', []);
liveApp.controller('liveloadCtrl', function($scope, $http){
	$scope.liveLoadName = 'Load More..';
	$scope.fetch = function(){
    	$http.get('do_retrive.php')
    	.success(function(data){ 
    	    $scope.articles = data;
    	    console.log($scope.articles); 
	    });
    }
 
    $scope.loadmore = function(){
    	var lastid = $scope.articles.length - 1;
    	var lastobj = $scope.articles[lastid];
    	$http.post('post_load_more.php', lastobj)
    	.success(function(data){ 
    		if(data == ''){
    			$scope.liveLoadName = 'No more Data to Load';
    		}
    		else{
    			angular.forEach(data, function(newpost){
					$scope.articles.push(newpost); 
				});
    		}
    	    console.log($scope.articles);
	    });
    }
});

do_retrive.php

It is simple PHP api/code in Retriving simple initial data.

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
 
	$lstoutpt = array();
	$tsql = "SELECT * FROM articles ORDER BY postid ASC LIMIT 4";
	$lquery=$db_con->query($tsql);
	while($row=$lquery->fetch_array()){
		$lstoutpt[] = $row;
	}
 
	echo json_encode($lstoutpt);
?>

post_load_more.php

Last step, It is simple PHP scripts code/api to Retriving simple some more addition data.

Also Read :   AngularJS Modal Popup open and close from controller

<?php
	$db_con = new mysqli('localhost', 'YOUR_USER_NAME', 'YOUR_PASSWORD', 'live24u');
	$data = json_decode(file_get_contents('php://input'));
	$lstoutpt = array();
	$id = $data->postid;
 
	$tsql = "SELECT * FROM articles WHERE postid > '$id' ORDER BY postid ASC LIMIT 4";
	$lquery=$db_con->query($tsql);
	while($row=$lquery->fetch_array()){
		$lstoutpt[] = $row;
	}
 
	echo json_encode($lstoutpt);
?>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is Angular JS Load more data in PHP MySQLi And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.