How to work with AngularJS as frontend and PHP MYSQL as backend

Hi Geeks,

In this tutorial you will learn that how to work with AngularJs as web frontend or in any hybrid app and get retrieve data from database using php and mysql. We have created restful webservice for return records to angular app.

Now steps for making a angularjs app with php and mysql –
Step 1) Create a database and table for fetching content from the table
Note: If you want to use existing database then select you db else create a new db with ‘news_db’ or whatever you want to take a db name.
Now Create a table named ‘news’ for getting data by following sql statement

CREATE TABLE IF NOT EXISTS `news` (
  `id` int(12) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `permalink` varchar(255) NOT NULL,
  `details` text NOT NULL,
  `thumbnail` varchar(255) NOT NULL,
  `category_id` int(12) NOT NULL,
  `source_id` int(12) NOT NULL,
  `datetime` int(12) NOT NULL,
  `day` int(2) NOT NULL,
  `month` int(2) NOT NULL,
  `year` int(4) NOT NULL,
  `hits` int(12) NOT NULL,
  `published` int(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1;

Now Dump some dummy records by following insert statement:

--
-- Dumping data for table `news`
--

INSERT INTO `news` (`id`, `title`, `permalink`, `details`, `thumbnail`, `category_id`, `source_id`, `datetime`, `day`, `month`, `year`, `hits`, `published`) VALUES
(1, 'MY NEWS TITLE 1', '', 'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 ', '11621455015936.jpg', 1, 0, 1455015936, 9, 2, 2016, 45, 1),
(2, 'MY NEWS TITLE 2', '', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', '76911455015952.jpg', 2, 0, 1455015952, 9, 2, 2016, 73, 0);

Step 2) Create a file named config.php with following code

<?php
$details=array();
$details['server_host']="localhost";//server host name
$details['mysql_name']="root";//your mysql user name
$details['mysql_password']="";//your mysql user name
$details['mysql_database']="news_db";//your database name
?>

change credential according to your database and server host
Step 3) Now create a file for webservices named wsdl.php
Define Cross origin headers in this file by following code

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
?>

Now code for getting data from database and provide in restful json format by following code

<?php
include 'config.php';//make the cofig file include
global $details;//make the connection vars global

if($_GET['method'] == "load_news")
{
	$conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_password'], $details['mysql_database']);	
	$result = $conn->query("SELECT title,details,hits FROM news");
	$data=array();
	while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
		$row=array();
	   $row['title']=addslashes($rs["title"]);
	   $row['details']=addslashes($rs["details"]);
	   $row['hits']=addslashes($rs["hits"]);
	   
	   $data[]=$row;
		
	}
	$jsonData=array();
	$jsonData['records']=$data;

	$conn->close();
	echo json_encode($jsonData);

}
?>

So complete Code for wsdl.php is following

<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
include 'config.php';//make the cofig file include
global $details;//make the connection vars global

if($_GET['method'] == "load_news")
{
	$conn = new mysqli($details['server_host'], $details['mysql_name'],$details['mysql_password'], $details['mysql_database']);	
	$result = $conn->query("SELECT title,details,hits FROM news");
	$data=array();
	while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
		$row=array();
	   $row['title']=addslashes($rs["title"]);
	   $row['details']=addslashes($rs["details"]);
	   $row['hits']=addslashes($rs["hits"]);
	   
	   $data[]=$row;
		
	}
	$jsonData=array();
	$jsonData['records']=$data;

	$conn->close();
	echo json_encode($jsonData);

}
?>

Step 4) Now Start with frontend
Step for Getting data from database using angularjs as frontend and php & mysql as backed
make a file named index.html
include the script which i have attached with this post

<script src="js/angular.1.4.8.min.js"></script>

Now make a ng-app with following html

<div ng-app="myApp" ng-controller="newsCtrl"> 

</div>

make a html table format inside the div for getting data from datasource(php/mysql restful service) as following

<div ng-app="myApp" ng-controller="newsCtrl"> 
<table border="2">
  <tr ng-repeat="x in names">
    <td>{{ x.title }}</td>
    <td>{{ x.details }}</td>
    <td>{{ x.hits }}</td>
  </tr>
</table>
</div>

Now put the script that call the restful web service and load data to the table

<script>
var app = angular.module('myApp', []);
app.controller('newsCtrl', function($scope, $http) {
    $http.get("http://localhost/angular/wsdl.php?method=load_news")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>

Now complete Code for index.html

<script src="js/angular.1.4.8.min.js"></script>
<div ng-app="myApp" ng-controller="newsCtrl"> 

<table border="2">
  <tr ng-repeat="x in names">
    <td>{{ x.title }}</td>
    <td>{{ x.details }}</td>
    <td>{{ x.hits }}</td>
  </tr>
</table>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('newsCtrl', function($scope, $http) {
    $http.get("http://localhost/angular/wsdl.php?method=load_news")
    .then(function (response) {$scope.names = response.data.records;});
});
</script>

Congratulations you have completed with this tutorial please provide comments for this tutorial. [viraldownloader id=146 text=’DOWNLOAD COMPLETE CODE’]