home

Insert Data Into Database in AngularJS

AngularJs can communicate to server to fetch data or insert data but in this post we have brief intro about how angularJs communicate with servers, we have covered how to insert data into data base with using angularJs, to demonstrate and to explain we have been used some php code along with mysql database, if you are new to this even no need to warry because this also we have enough introduction just go through and try this example as your own.

Only we required wamp server to work with php (its you wish you can use any servers),This is simple and understandable to all, created by one our expert team member.

Creating database and Tables with columns

wamp phpmyadmin we have database with name of Books-Library along with Table name called Books along with columns. Like name, author, price, language.

Please refer the below screenshot for reference of the above wamp phpmyadmin structure.

Creating database and Table with columns

Initially we have div with angularJs application declaration (ng-app=”myApp”) and containing with controller (ng-controller=”bookController”) after that we have simple basic form with couple of form inputs with angularJS models(<input type="text" ng-model="bname" />). Check the below div code.

<form>
Book Name:-<input type="text" ng-model="bname" />
Book Author:-<input type="text" ng-model="bauthor" />
Book Price:-<input type="text" ng-model="bprice" />
Book Language:-<input type="text" ng-model="blanguage" />
<input type="button" value="Submit" ng-click="insertData()" />
</form>

Let have look into angularJs below code overview, we have module object (myApp) Angularjs will invoke bookController with a $scope and $http object. We defined a function called insertData()and that will react when you clicks on button. $http.post() sends form data in JSON format to insertData.php file. In the next line Controller creates four properties(properties is nothing but variables) like name, author, price, language and finally if data inserted successfully then success message will display in console(Data Inserted Successfully), see the below angularJs code.

 var app = angular.module('myApp',[]);
    app.controller('bookController',function($scope,$http){	
    $scope.insertData=function(){		
    $http.post("insert.php", {
		'bname':$scope.bname,
		'bauthor':$scope.bauthor,
		'bprice':$scope.bprice,
		'blanguage':$scope.blanguage})
    
    .success(function(data,status,headers,config){
    console.log("Data Inserted Successfully");
    });
        }
         });

AngularJs with Php Code

To insert data into mysql also required php code, create a php files save as insert.php.

file_get_contents() read the contents of a file into a string .Since the string is json encoded so we need to decode it with help json_decode. mysql_real_escape_string escapes special characters in a string for use in an SQL statement and it writes the name of variables containing form data into mysql_real_escape_string function as shown.

<?php 
$data = json_decode(file_get_contents("php://input"));
$bname = mysql_real_escape_string($data->bname);
$bauthor = mysql_real_escape_string($data->bauthor);
$bprice = mysql_real_escape_string($data->bprice);
$blanguage = mysql_real_escape_string($data->blanguage);
mysql_connect("localhost", "root", "");
mysql_select_db("books-library");
mysql_query("INSERT INTO books('book-name', 'book-author', 'book-price', 'book-longuage') VALUES('".$bname."','".$bauthor."','".$bprice."','".$blanguage."')");
?>

Check the below screen for data into mysql database added by using angularJs

.angularjs insert data into database

And the next important thing is mysql connection with using this mysql_connect("localhost", "root", "") its opens connection with server And the next step is database connection thing mysql_select_db("books-library") will connect to books-library database, and the last one mysql_query insert Books details into mysql_query(details like book name bookt author, price, longuage).