Introduction To AngularJS – Day Eighteen

Jeetendra Gund
Apr 27, 2016

9.3k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

In the 18th day of AngularJS article series, we are going to be learning the next key players/concept of AngularJS, and understanding the concept of Built in Services of AngularJS. Before moving on to key players/concepts of AngularJS, please read my previous articles:

AngularJS provides many built in services. For example:

$http Service

The $http service is used to make Ajax call to get the server data.

$http service provides Ajax functionality.
Uses the browser's XmlHttpRequest object.
Makes asynchronous requests.
Supports multiple HTTP verbs:

• $http.get
• $http.post
• $http.put
• $http.delete
• $http.jsonp
• $http.head

Using this $http service you can access data from any .json file, you can call PHP, Web Api etc.

Syntax:

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);
//Creating controller & injecteing $http service in controller
app.controller("myController", function ($scope, $http) {
In the above we inject the ‘$http’ service and how to use it see following code:
$scope.init = function () {
$http({
method: "GET",
url: "http://localhost:62039/api/Employees",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).
success(function (data, status, headers, config) {
$scope.employees = data;
}).
error(function (data, status, headers, config) {
});
};

Accessing $http Response Data:

$http makes asynchronous calls:

Relies on $q service's deferred/promise APIs
Access data by calling then() or success()/error()

The above screen shot you can see colored, to access data using success/then.

Example:

In the below demo example we are going to see how we can you ‘$http’ service for CRUD operations. Here we use Web Api to access or save data to database.

app.js

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);
//Creating controller & injecteing $http service in controller
app.controller("myController", function ($scope, $http) {
$scope.update = false;
//Initialize data
$scope.init = function () {
$http({
method: "GET",
url: "http://localhost:62039/api/Employees",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).
success(function (data, status, headers, config) {
$scope.employees = data;
}).
error(function (data, status, headers, config) {
});
};
//Add Employee
$scope.addEmployee = function () {
$scope.para = {
Id: $scope.temp.id,
Name: $scope.temp.name,
Designation: $scope.temp.desg,
City: $scope.temp.city
};
$http.post('http://localhost:62039/api/Employees/PostEmployee', $scope.para).
success(function (data, status, headers, config) {
if (data) {
$scope.temp = {
id: '',
name: '',
desg: '',
city: ''
};
if (!$scope.update) {
$scope.employees.push(data);
}
}
}).
error(function (data, status, headers, config) {
});
};
//Update Employee
$scope.editEmployee = function (emp) {
$scope.temp = {
id: emp.Id,
name: emp.Name,
desg: emp.Designation,
city: emp.City
};
$scope.index = $scope.employees.indexOf(emp);
};
//Delete Employee
$scope.delEmployee = function (emp) {
var r = confirm("Are you sure want to delete this employee!");
if (r == true) {
$http({
method: "DELETE",
url: "http://localhost:62039/api/Employees/" + emp.Id,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).
success(function (data, status, headers, config) {
if (data.success) {
var index = $scope.employees.indexOf(emp);
$scope.employees.splice(index, 1);
}
}).
error(function (data, status, headers, config) {
});
}
};
//Update Employee
$scope.updateEmployee = function () {
$scope.update = true;
$scope.addEmployee();
};
});

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Welcome to C# Corner</title>
<meta charset="utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="myController" ng-init="init()">
<div class="container">
<h3 class="text-center">AngularJS CRUD Operations using $http Services</h3>
<div class="row mt80">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 animated fadeInDown">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" data-ng-model='temp.name'>
</div>
<div class="form-group">
<label>Designation</label>
<input type="text" class="form-control" placeholder="Designation" data-ng-model='temp.desg'>
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control"placeholder="City" data-ng-model='temp.city'>
</div>
<div class="text-center">
<input ng-hide="temp.id" type="button" class="btn btn-save" ng-click="addEmployee()" value="Add"/>
<input ng-hide="!temp.id" type="button" class="btn btn-save" ng-click="updateEmployee()" value="Update"/>
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 animated fadeInUp">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th width="5%">ID</th>
<th width="20%">Name</th>
<th width="20%">Designation</th>
<th width="20%">City</th>
<th width="20%">Action</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="emp in employees | orderBy : '-id'">
<th scope="row">{{emp.Id}}</th>
<td> {{emp.Name}} </td>
<td> {{emp.Designation}} </td>
<td> {{emp.City}} </td>
<td> <span data-ng-click="editEmployee(emp)"> Edit</span> | <span data-ng-click="delEmployee(emp)">Delete</span> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

Output:

Before running the html file run your Web Api application and then open the html file. After opening html file you can see output as follows in browser:

Output

Next, I am going to add employee record in that see below screen shot:

Output

Click on ‘Add’ button, record is added. See side table the added record:

Output

Now, next click on side table last column on ‘Edit’:

Edit

After click on ‘Edit’, it will populate data in left side for see. I am going to change the ‘Designation’:

Next, click on ‘Update’ button.

Update

See above screen shot the ‘Designation’ field is updated. Now, click on ‘Delete’ action of ‘ID’ is 9, it will prompt message ‘Are you sure want to delete the employee!’ as follows:

message

Here, I click on ‘OK’ button and record ‘ID-9’ is deleted see below screen shot:

Great, $http service in AngularJS with example created successfully!

Summary

I hope that beginners as well as students can understand the concept of $http service in AngularJS with exampls. If you have any suggestions regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!