AngularJS is an MVC JavaScript framework which elegantly separates controller, business and model logic in your application.
HTML page
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="AddUser">
<form ng-controller="AppCtrl" name="add_user">
<div class="modal-header">
<h3 class="modal-title">Add User Form</h3>
</div>
<div class="modal-body">
<input type="text" class="form-control" name="user_email" ng-model="user_name" placeholder="Enter Name">
<br />
<input type="text" class="form-control" name="user_name" ng-model="user_email" placeholder="Enter Email">
</div>
<div class="modal-footer">
<input type="button" class="btn btn-success" name="add_user" value="Invite" ng-click="save_user()">
</div>
</form>
</body>
<script src="app.js"></script>
</html>
External JS file app.js
var app = angular.module('AddUser', []);
app.controller('AppCtrl', function($scope, $http){
$scope.save_user = function() {
$http.post('db.php',
{
'user_name' : $scope.user_name,
'user_email' : $scope.user_email
}
)
.success(function (data) {
console.log("The user has been added successfully");
})
.error(function(data) {
console.log("Failed to add the user to DB ");
});
}
});
db.php file for handling database connection
$data = json_decode(file_get_contents("php://input"));
$servername = "localhost";
$username = "root";
$password = "";
$db = "sidpractice";
$conn = mysql_connect($servername, $username, $password) or die(mysql_error()." Error1 ");
mysql_select_db($db,$conn);
$data = json_decode(file_get_contents("php://input"));
$user_name = $data->user_name;
$user_email = $data->user_email;
$qry = 'INSERT INTO filler(user_name, user_email) VALUES ("'.$user_name.'","'.$user_email.'")';
$qry_res = mysql_query($qry,$conn) or die(mysql_error()." Error2 ");
if ($qry_res) {
$arr = array('msg' => "Success");
$jsn = json_encode($arr);
}
else {
$arr = array('msg' => "Error");
$jsn = json_encode($arr);
}
Notes:
- The ng-app property defines an AngularJS application.
- The ng-model property binds the value of HTML controls (input, select, textarea) to application data.
- We define the scope of our controller using the ng-controller directive.It will be in charge of processing the contents of this piece of HTML.
- The ng-click event call the save_user function inside app.js controller.
If you want submit form like serialize you have to change little in code
Change ng-model name as
<input type="text" class="form-control" name="user_email" ng-model="formData.user_name" placeholder="Enter Name">
<br />
<input type="text" class="form-control" name="user_name" ng-model="formData.user_email" placeholder="Enter Email">
Change in controller by
$scope.formData = {};
$scope.save_user = function() {
console.log(this.formData);
$http.post('db.php?action=add_user',
{
'data' : this.formData/* ,
'user_email' : $scope.user_email */
}
)}
Comments
Post a Comment