AngularJS Insert using PHP MySQLi

AngularJS Insert using PHP MySQLi

In this Post We Will Explain About is AngularJS Insert using PHP MySQLi With Example and Demo.Welcome on – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to AngularJS Insert data into database using PHP MySQLi Example

In this post we will show you Best way to implement AngularJS CRUD Operations with PHP and MySQLi, hear for how to insert data in database using angularjs with PHP MySQLi in mvc with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.


The velow source code is just a add normal index HTML page with angular Directives extra attributes such as Like angular module ng-app=”liveApp” and HTML ng-view, It are called AngularJS Directives.

Read Also:  Top 10 Ways to Increase Google Adsense Earnings

  <title>simple Angular & PHP and MySQLi Tutorial</title>

  <!--Live Google angular js cdn-->

  <!--Include  Bootstrap CSS -->
  <!--our simple custom source code-->

	<div class="live container">
		<h2 style="font-style: italic;color: darkblue">Angular & PHP -</h2>
		<div class="main"></div>
	<br />


And then, let’s Display mai angular custom files the app.js source code, so We can Learn the above angular Directives ng-app=”liveApp”:

var liveApp = angular.module('liveApp',[

liveApp.config(['$routeProvider', function($routeProvider){
	when('/', {
		templateUrl: 'view/list.html',
		controller: 'memCtrlList'
	when('/add', {
		templateUrl: 'view/add.html',
		controller: 'memAddCtrl'
		redirectTo: '/'


<h3 style="font-weight: bold">Members List</h3>
<table class="live table table-bordered">
		<th>Member ID</th><th>Member Name</th><th>Member Email</th>

<a href="#!add" class="btn btn-warning">Add Member</button>


<h3 style="font-weight: bold">Add a Member</h3>
<form name="form">
	<div class="alert alert-success">
		<strong>Success!</strong> Member Added!.
	<div class="form-group">
		<label for="member_name">Member Name</label>
	<div class="form-group">
		<label for="member_name">Member Email</label>
<br />
<button type="submit" class="btn btn-success">Submit</button>
<a href="#" class="live btn btn-warning">Go Back</button>


Let’s Display the angularjs controller.js:

var membersModule = angular.module('membersModule', []);

membersModule.controller('memCtrlList', ['$scope', '$http', function($scope, $http){
	//use $http.get() to get the list of members 
		//send back the member data to the list.html view
		$scope.memberList =;

membersModule.controller('memAddCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout){
	//create a function add_member with varibles name and email
	$scope.add_member = function (name, email){
		//All data here set the data array
		var data = {
			name: name,
			email: email
		//use simple angular $ to send above data to php
		$'php/add_member.php', JSON.stringify(data)).then(function(response){
			//clear All the HTML form fields
			$scope.member_name = "";
			$scope.member_email = "";
			//show success message
			$scope.message = true;
			//hide the message after some 2 secs
			$timeout(function(){$scope.message = false;}, 1000);

And finally Some reacted Database the PHP files


Here, All the Get All the Fetch Using mysqli Database.

Read Also:  How to Auto Post on Twitter using PHP API


$lstquery = mysqli_query($db_con, 'select * from members');

$member_list = array();
while($rows = mysqli_fetch_assoc($lstquery)){
	$member_list[] = $rows;

print json_encode($member_list);


Now, Simple to get all the members Data.

$email = mysqli_real_escape_string($db_con, $getdata->email);

$query = mysqli_query($db_con, "insert into members (member_name, member_email) values ('$name', '$email')") or die ('Unable to execute query. '. mysqli_error($db_con));


Let’s start simple PHP to mysqli database connection.


$db = mysqli_select_db($db_con, 'YOUR_DATABASE_NAME');

-- Table structure for table `members`

CREATE TABLE `members` (
  `mem_id` int(10) UNSIGNED primary key auto_increment NOT NULL,
  `member_name` varchar(50) DEFAULT NULL,
  `member_email` varchar(100) DEFAULT NULL

-- Dumping data for table `members`

INSERT INTO `members` (`mem_id`, `member_name`, `member_email`) VALUES
(1, 'agurchand', '[email protected]');

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

Read Also:  Angularjs ng-keypress Event Handling Directive


I hope you have Got What is Insert the data to MySQLi database on PHP page using AngularJS And how it works.I would Like to have FeedBack From My Blog( readers.Your Valuable FeedBack,Any Question,or any Comments about This Article( Are Most Always Welcome.

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  SQL left outer join Examples
  2. Read Also:  Laravel jQuery Ajax Upload Multiple Images
  3. Read Also:  angular 6 crud example - crud operation in angular 6
  4. Read Also:  How To Create Social Media icons footer using bootstrap?
  5. Read Also:  Dynamically Add delete rows with JQuery Multiple datepicker
  6. Read Also:  PHP Domain Availability Checker (Check Domain Instantly)
  7. Read Also:  How to insert data into database with CodeIgniter?
  8. Read Also:  Insert,Update, Delete using Angular js in ASP.NET MVC
  9. Read Also:  Top 10 Ways to Increase Google Adsense Earnings
  10. Read Also:  Laravel jQuery Ajax Upload Multiple Images