<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap@4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script data-require="angularjs@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body class="container" ng-app="myApp" ng-controller="studentController" ng-cloak>
<h1>AngularJS $http GET,POST,PUT,DELETE functions.......</h1>
<!--Form-->
<form ng-submit="createUser()">
<h4>Create User</h4>
<div class="form-group" ng-show="userid">
<label class="control-label col-md-2">ID</label>
<div class="col-md-4">
<input type="number" class="form-control" ng-model="user.id" placeholder="1,2,3.." />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">Name:</label>
<div class="col-md-4">
<input type="text" class="form-control" ng-model="user.name" placeholder="john.." />
</div>
</div>
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="submit" class="btn btn-success btn-sm" ng-show="submit" />
<input type="button" value="update" ng-click="updateUser()" class="btn btn-success btn-sm" ng-show="update" />
<input type="button" value="cancel" ng-click="cancelUpdate()" class="btn btn-danger btn-sm" ng-show="cancel" />
</div>
</form>
<!--End Form-->
<!--Users List-->
<br />
<h4>Users List</h4>
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Action Commands</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>
{{user.id}}
</td>
<td>
{{user.name}}
</td>
<td>
<button class="btn btn-success btn-sm" ng-click="editUser(user)">Edit</button>
<button class="btn btn-danger btn-sm" ng-click="deleteUser(user)">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('studentController', ['$scope', '$http', function($scope, $http) {
//Buttons Settings
$scope.submit = true;
$scope.update = false;
$scope.cancel = false;
$scope.userid = true;
//Getting Users List
//$http GET function
$http({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/users'
}).then(function successCallback(response) {
$scope.users = response.data;
}, function errorCallback(response) {
alert("Error. Try Again!");
});
//Create New User
$scope.createUser = function() {
//$http POST function
$http({
method: 'POST',
url: 'https://jsonplaceholder.typicode.com/users',
data: $scope.user
}).then(function successCallback(response) {
$scope.users.push(response.data);
alert("User has created Successfully")
}, function errorCallback(response) {
alert("Error. while created user Try Again!");
});
};
//Update User
$scope.updateUser = function() {
//$http PUT function
$http({
method: 'PUT',
url: 'https://jsonplaceholder.typicode.com/users/' + $scope.user.id,
data: $scope.user
}).then(function successCallback(response) {
alert("User has updated Successfully")
}, function errorCallback(response) {
alert("Error. while updating user Try Again!");
});
};
//Delete User
$scope.deleteUser = function(user) {
//$http DELETE function
$http({
method: 'DELETE',
url: 'https://jsonplaceholder.typicode.com/users/' + user.id
}).then(function successCallback(response) {
alert("User has deleted Successfully");
var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1);
}, function errorCallback(response) {
alert("Error. while deleting user Try Again!");
});
};
//Set $scope on Edit button click
$scope.editUser = function(user) {
$scope.user = user;
$scope.submit = false;
$scope.update = true;
$scope.cancel = true;
$scope.userid = false;
};
//cancel Uodate
$scope.cancelUpdate = function() {
$scope.user = null;
$scope.submit = true;
$scope.update = false;
$scope.cancel = false;
$scope.userid = true;
};
//////////////////Shortcut methods for $http//////
//$http GET
//$http.get('https://jsonplaceholder.typicode.com/users', function successCallback(response) {
//
// alert("User has updated Successfully")
//
//}, function errorCallback(response) {
//
// alert("Error. while updating user Try Again!");
//
//});
//$http POST
//$http.post('https://jsonplaceholder.typicode.com/users', $scope.user, function successCallback(response) {
//
// $scope.users.push(response.data);
//alert("User has created Successfully")
//
//}, function errorCallback(response) {
//
// alert("Error. while created user Try Again!");
//
//});
//$http PUT
//$htp.put('https://jsonplaceholder.typicode.com/users/' + $scope.user.id, $scope.user, function successCallback(response) {
//
// alert("User has updated Successfully")
//
//}, function errorCallback(response) {
//
// alert("Error. while updating user Try Again!");
//
//});
//$http DELETE
//$http.delete('https://jsonplaceholder.typicode.com/users/' + user.id, function successCallback(response) {
//
// alert("User has deleted Successfully");
//var index = $scope.users.indexOf(user);
//$scope.users.splice(index, 1);
//
// }, function errorCallback(response) {
//
// alert("Error. while deleting user Try Again!");
//
// });
}]);
/* Styles go here */