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 */
}
)}
nice article
ReplyDeleteThe example gives a straightforward introduction to handling form interactions in AngularJS, particularly through ng-controller, ng-model, and ng-click. Binding form fields to model values makes it easier to capture user input and trigger a save operation without relying on a traditional page refresh. A Angular Online Course can help learners build on these core concepts and understand how Angular-based applications structure their frontend logic.
ReplyDeleteThe separation of controller and model responsibilities mentioned in the article is also important when building maintainable applications. The example demonstrates how user data can be connected to the controller through AngularJS bindings, providing a practical starting point for more complete AJAX-based workflows. Developers progressing from JavaScript frameworks can also benefit from TypeScript Online Course when moving toward strongly typed modern frontend development.
ReplyDelete