Angular
Let's jump into the app. Here is front end HTML code for our app. We are using twitter bootstrap to for awesome look of our app:
Javascript Code (script.js):
Php Code (sum.php):
As we know that the default header
Javascript Code (script.js):
Php Code (sum.php):
Javascript Code (script.js):
And then we use
One more important thing I would like to say that I am sorry for my bad English.
$http service is used to send asynchronous http request to the server. To learn how to use $http service with php, we will create a simple app using form directive. This app will take two numbers and send the these number to php server for their sum. Here we will use php code to process the data and return the sum.Let's jump into the app. Here is front end HTML code for our app. We are using twitter bootstrap to for awesome look of our app:
Way 1:
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Find Sum</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="myAppCtrl">
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<h1 class="text-center text-primary">FIND SUM</h1>
<form name="sumForm">
<div class="form-group">
<label for="a">A:</label>
<input ng-model="value.a" type="number" id="a" name="a" class="form-control" placeholder="A" required>
</div>
<div class="form-group">
<label for="b">B:</label>
<input ng-model="value.b" type="number" class="form-control" id="b" name="b" placeholder="B" required>
</div>
<input type="submit" ng-click="sum()" ng-disabled="sumForm.$invalid" class="btn btn-primary" value="SUM"></input>
<h4>Sum = {{result}}</h4>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
form directive and define two input boxes which will get value of A and B. On clicking the submit button sum() function will trigger which is define on $scope into the myAppCtrl controller. Here is code for the javascript:Javascript Code (script.js):
var app = angular.module('myApp',[]);
app.controller('myAppCtrl', ['$scope', '$http', function($scope, $http){
$scope.result = 0;
$scope.sum = function(){
$http({
method : 'POST',
url : 'php/sum.php',
data : $scope.value
})
.then(
function(response){
$scope.result = response.data.sum;
});
};
}]);
$http POST method and request parameter are sent using 'data' parameter of the configuration object of $http. The responded sum value is assigned to $scope.result model. Now see how to process the POST data at server using php code.Php Code (sum.php):
<?php
$post = json_decode(file_get_contents(('php://input')));
$data = array();
$data['sum'] = $post->a + $post->b;
echo json_encode($data);
?>
As we know that the default header
'Content-Type' of the POST request in angular $http service is 'application/json', so in php code we used file_get_contents method to read the json data sent by the user and used json_decode method to convert it into object . After conversion we can easily access the value of a and b and process it to sent the sum of them.Way 2:
If you still wanted to use the $_POST array into your php code, here is a way in way 2. You will be able to use the $_POST array into your code. There is some changes in JavaScropt and PHP code and HTML code will remain same as in way 1. Here is javascript code for way 2.Javascript Code (script.js):
var app = angular.module('myApp',[]);
app.config(function($httpProvider){
$httpProvider.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};
});
app.controller('myAppCtrl', ['$scope', '$http', '$httpParamSerializerJQLike',
function($scope, $http, $httpParamSerializerJQLike){
$scope.result = 0;
$scope.sum = function(){
$http({
method : 'POST',
data : $httpParamSerializerJQLike($scope.value), //when not using jquery
url : 'php/temp.php'
})
.then(
function(response){
$scope.result = response.data.sum;
}
);
};
}]);
'Content-Type' of default header for POST methed provided by $httpProvider within the config function of the angular app. We have set the 'Content-Type' to 'application/x-www-form-urlencoded', so that POST request will send the data into urlencode form so that sent data can be accessed using $_POST array.Php Code (sum.php):
<?php
$data = array();
if(isset($_POST)){
$data['sum'] = $_POST['a'] + $_POST['b'];
echo json_encode($data);
}
?>
Way 3:
If you are defining many functions which send $http request, it is bulky to configure $http configuration object each time. The code will look dirty as each time you send a $http request you have to repeat the configuration object and parameter to the controller function. Here is way 3 to remedy to this situation. We will define our own service using factory method of angular which is built upon a $http service and we don't have to configure our app using config function each time when we define an app. The way 3 code for HTML and PHP will remain same and their is change in javascript code where define our own service. Here is code for javascript;Javascript Code (script.js):
var app = angular.module('myApp',[]);
app.factory('$xhr',function($http, $httpParamSerializerJQLike){
return{
post : function(url,data){
return $http({
method : 'POST',
url : url,
data : $httpParamSerializerJQLike(data),
headers : {'Content-Type':'application/x-www-form-urlencoded'}
});
},
get: function(url){
return $http({
method : 'GET',
url : url
});
}
};
});
app.controller('myAppCtrl', function($scope, $xhr){
$scope.sum = function(){
$xhr.post('php/temp.php', $scope.value)
.then(function(res){
$scope.result = res.data.sum;
});
};
});
$xhr using factory method of angular. It takes $http and $httpParamSerializerJQLike as parameter. We defined post and get method on $xhr service. Header and sent parameter are set in configuration object of $http service.And then we use
$xhr service into our myAppCtrl and use it to send the $http request using arguments url and data as $xhr(url,data).One more important thing I would like to say that I am sorry for my bad English.
Comments
Post a Comment