AngularJS RESTful Web Service GET and POST API

Angularjs with restful web services example

we show to use simple Angular $http protocol service to invoke easy way to RESTful APIs Like as a(HTTP GET method, PUT method, POST method, DELETE method) operations.

Angular $http can be easy used to invoke simple HTTP GET webservice in below manner.

RESTful web services Like as use HTTP protocol simple methods for the other operations they perform.Methods are:
RESTful Web Service with AngularJS
GET
POST
PUT
DELETE

simple CRUD RESTful Example with php service used with AngularJS and MySQL

include Script

<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js</a>
<a href="http://index.js">http://index.js</a>
<a href="http://angular-resource.js">http://angular-resource.js</a>
<!-- ... more javascript ... -->
var myApp = angular.module('myApp', ['ngResource']);

AngularJS $http – RESTful API Examples

RESTful GET operation

$http({
    method : 'GET',
    url : 'websitelist'
}).then(function successCallback(result) {
    $scope.websitelist = result.data.websitelist;
}, function errorCallback(result) {
    console.log(result.statusText);
});

RESTful POST operation

$http({
    method : "POST",
    url : "websitelist",
    data : angular.toJson($scope.form),
    headers : {
        'Content-Type' : 'application/json'
    }
}).then( _success, _error );

RESTful PUT operation

$http({
    method : "PUT",
    url : "websitelist/" + $scope.form.id,
    data : angular.toJson($scope.form),
    headers : {
        'Content-Type' : 'application/json'
    }
}).then( _success, _error );

RESTful DELETE operation

$http({
    method : "DELETE",
    url : "websitelist/" + employee.id
}).then( _success, _error );

RESTful Web Service with AngularJS Example 1

in this Example to show you all the data display json using AngularJS and PHP webservice

index.html

		<section class="live24u_content">
			<div class="live24u_content_inner gray_bg mt-20">
				<div class="left_icon">
					<a>
						<img src="images/user_1.png" alt="" />
					</a>
				</div>
				<div class="right_content">
					<a>{{study_result[0].study_name}}</a>
					<p>{{study_result[0].study_desc}}</p>
				</div>
			</div>
			
			<div class="live24u_content_inner gray_bg mt-25">
				<div class="left_icon">
					<a>
						<img src="images/user_2.png" alt="" />
					</a>
				</div>
				<div class="right_content">
					<a>{{study_result[1].study_name}}</a>
				</div>
			</div>
			
			<div class="live24u_content_inner gray_bg mt-25">
				<div class="left_icon">
					<a>
						<img src="images/user_3.png" alt="" />
					</a>
				</div>
				<div class="right_content">
					<a>{{study_result[2].study_name}}</a>
					<p>{{study_result[2].study_desc}}</p>
				</div>
			</div>
		</section>

index.js

var myapp = angular.module('myapp', ['ngRoute','ngTouch']);

myapp.controller('homeCtrl', function ($scope, $http ,$routeParams) {
	$http.get('api/index.php/get_study').success (function(data){
		$scope.study_result=data.data;
	}); 
});

api/index.php

$app->get('/get_study', 'get_study_master');

-----------------------
function get_study_master()
{
	$data=array();
	$data['response']="success";
	$data['data']=array();
	try
	{
		$partySS="select * from study_mst ORDER BY seq";
		$db=getConnection();
		$partyQQ=$db->query($partySS);
		$partyQQ->setFetchMode(PDO::FETCH_ASSOC);
		$i=0;
		
		while($partyRR=$partyQQ->fetch(PDO::FETCH_ASSOC))
		{
			
			$data['data'][$i]['study_id']=$partyRR['study_id'];
			$data['data'][$i]['study_name']=utf8_encode($partyRR['study_name']);
			$data['data'][$i]['study_desc']=utf8_encode($partyRR['study_desc']);
			$i++;
		}

		echo json_encode($data);
	}
	catch(PDOException $e)
	{
		echo '{"Response":"0","ERROR":"Please Enter Correct Data"}';
		echo $d1 = '{"error":{"text":' . $e->getMessage() . '}}';
	}
	
}

RESTful Web Service with AngularJS Example 2

in this Example to show you all the data display json using AngularJS and PHP webservice

https://infinityknow.com/weblist
{"id":1,"comment":"Live24u is very useful website.."}

Create an AngularJS Controller

public/index.js

angular.module('liveapp', [])
.controller('liveCtrl', function($scope, $http) {
    $http.get('https://infinityknow.com/weblist').
        then(function(response) {
            $scope.weblist = response.data;
        });
});

Create the Application Page

public/index.html


	
		<title>Web Service with AngularJS Example</title>
		<a href="http://angular.min.js">http://angular.min.js</a>
    	<a href="http://index.js">http://index.js</a>
	

	
		<div>
			<p>The ID is {{weblist.id}}</p>
			<p>The comment is {{weblist.comment}}</p>
		</div>
	

Download

Example

READ :  PHP Remove Item From Comma Separated string