Hii All, I am telling about basics of Angular js.I hope you like it...
Angular js is Javascript framework. angular js is perfect fot Single Page Application. when i say single page application it means all actions of multiple web pages points to one window screen.
All code of angular js exist in <script> </script> in html page or external .js file.
basic parts of Angular Js are model view controller directives , services , scope, filter etc.
i give on demo on Angular js that how we submit the form without reload the page.
form.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src= "/angularjs/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="candApp" ng-controller="candController">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div class="page-header" align="center"><h1>Register me</h1></div>
<!-- FORM -->
<form name="userForm" ng-submit="submitForm()" >
<div class="form-group">
<label>First Name</label>
<input type="text" name="f_name" class="form-control" ng-model="user.f_name">
<span ng-show="errorFname">{{errorFname}}</span>
</div>
<div class="form-group">
<label>Description</label>
<input type="textarea" name="description" class="form-control" ng-model="user.description">
<span ng-show="errorDescription">{{errorDescription}}</span>
</div>
<div class="form-group">
<label>name_id</label>
<input type="number" name="name_id" class="form-control" ng-model="user.name_id">
<span ng-show="errorNameid}}">{{errorNameid}}</span>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<span ng-show="message">{{message}}</span>
</form>
</div>
</div>
<script>
var candApp = angular.module('candApp', []);
candApp.controller('candController', function($scope, $http) {
$scope.user = {};
$scope.submitForm = function() {
$http({
method : 'POST',
url : 'form.php',
data : $scope.user,
headers : {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
if (data.errors) {
$scope.errorFname = data.errors.f_name;
$scope.errorDescription = data.errors.description;
$scope.errorNameid = data.errors.name_id;
} else {
$scope.message = data.message;
}
});
};
});
</script>
</body>
</html>
form.php:
<?php
$mysqli = new mysqli("localhost", "root", "", "dbname");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$errors = array();
$data = array();
$data = json_decode(file_get_contents('php://input'), true);
if (empty($data['f_name']))
$errors['f_name'] = 'name is required.';
if (empty($data['description']))
$errors['description'] = 'Description is required.';
if (empty($data['description']))
$errors['name_id'] = 'nAME ID is required.';
if (!empty($errors)) {
$data['errors'] = $errors;
} else {
$data['message'] = 'Candidate has been succesfully registered';
$f_name = $data['f_name'];
$description = $data['description'];
$name_id = $data['name_id'];
$query ="INSERT INTO tables SET f_name='$f_name',description='$description',name_id='$name_id'";
$mysqli->query($query);
}
// response back.
echo json_encode($data);
mysqli_close($mysqli);
?>
now we make database and table, named as you wish:
Create datebase dbname;
create table tbl_name(
id int auto_increment primary key,
f_name varchar(255),
description varchar(255),
name_id int);
This three files shows submit the form with angular js and give error msgs from server side if we dont fill up the form.
if you like this post or have any query about this post then comment me please....
Thank you...
No comments:
Post a Comment