AngularJS Sample Code for get MySql data using PHP

Introduction:

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. You are now ready to build the AngularJS simple app with MVC design pattern.

Create a table and insert some values.

MYSQL Query:

CREATE TABLE IF NOT EXISTS `tbl_projects` (

`pid` int(11) NOT NULL AUTO_INCREMENT,

`title` varchar(255) NOT NULL,

`pcode` varchar(15) NOT NULL,

`type` varchar(255) NOT NULL,

`proj_type` varchar(100) NOT NULL,

PRIMARY KEY (`pid`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;

INSERT INTO `tbl_projects` (`pid`, `title`, `pcode`, `type`, `proj_type`, `created_dt`, `created_by`, `updated_dt`, `updated_bt`) VALUES

(1, ‘Product’, ‘RR_PD’, ‘Web Apps’, ‘External’, ‘2014-07-16 20:09:47’, 1, ‘2014-07-18 19:05:36’, NULL),

(2, ‘WorkE’, ‘RT_WTNE’, ‘Mobile Apps’, ‘Internal’, ‘2014-07-16 20:10:46’, 1, ‘2014-07-18 19:05:43’, NULL),

(6, ‘SolutionBee’, ‘RJ_RTSB’, ‘Web Apps’, ‘Internal’, ‘2014-07-21 06:52:55’, 1, NULL, NULL);

Index.html : Initial Step

In this step, you will become familiar with the most important source code files, learn how to start the development.

<!DOCTYPE html>

The ng-app attribute represents an Angular directive named ngApp

The ngController directive, located on the <body> tag, references the name of our controller, projectsController (located in the JavaScript file controllers.js). The projectsController controller attaches the project data to the $scope that was injected into our controller function. This scope is a prototypical descendant of the root scope that was created when the application was defined. This controller scope is available to all bindings located within the <body ng-controller=” projectsController “> tag.

<!DOCTYPE html>

</html>

Import Files:

Include angular js file:

Include controller file app.js:

App.js: The controller file app.js contains:

//Define an angular module for our app

var app = angular.module(‘rjtApp‘, []);

app.controller(‘projectsController‘, function($scope, $http)

{

getProject();

function getProject(){

$http.post(“folder/getProject.php”).success(function(data){

$scope.projects = data; //the data are stored in projects

});

};

rjtApp – declared already at the <html> tag
Get all data from mysql table using getProject.php
getProject(); – Load all available tasks
$scope.projects = data; – the data are stored in projects

getProject.php

Then the getProject.php file contains the below simple PHP code to fetch all the MySQL table data.

<?php

require_once ‘../includes/config.php’;

// The mysql database connection script

$query=”select * from tbl_projects”;

$result = $mysqli->query($query) or die($mysqli->error.__LINE__);

$arr = array(); if($result->num_rows > 0)

{

while($row = $result->fetch_assoc()) { $arr[] = $row; }

}

//JSON-encode the response

echo $json_response = json_encode($arr);

We are going to include the output view file in a div tag as mentioned below, project.html contains only the HTML and angularjs tags which is going to display the mysql data <div ng-include src=”‘views/project.html'”></div> Below is the final code for index.html

<!DOCTYPE html>

</body> </html>

Project.html : The View part

The project.html file contains the below source code which act as a presentation layer.

<thead><tr><th>Title</th><th>App Type</th><th>Code</th><th>Type</th>< tr></thead>

<tbody>

<td>{{project.title}}</td>

<td>{{project.type}}</td>

<td>{{project.pcode}}</td>

<td> <div ng-if=”project.proj_type == ‘Internal'”> <span class=’label label-primary’>{{project.proj_type}}</span> </div> <div ng-if=”project.proj_type == ‘External'”> <span class=’label label-info’>{{project.proj_type}}</span> </div> </td>

</tr>

</tbody> </table>

The tr tag contain the project in projects which describes that the controller app.js contains the MySQL data inside $scope.projects. It is like foreach loop function used at PHP. Use bootstrap css for better visibility. So we are complete a simple app using AngularJs. Thank You.