Learn AngularJS Hour 4: Service in AngularJS and Making HTTP Call Using $http

Dhananjay Kumar
Aug 12, 2014
15.8k
0
0
Article

In hour 1 of this series we learned how to get started with AngularJS.
In hour 2 of this series we learned about the AngularJS Template.
In hour 3 of this series we learned two ways to do bindings and filterings.

In this hour we will learn about:

Using Services in Angular
Calling remote service to load data

If you are following this hour series on AngularJS, you might have noticed that we are using local data for authors. Using Services in AngularJS, you can call a remote service. Here we will call a HTTP based (REST Service) service. You can use $http of AngularJS to call a remote service or to make a HTTP request.

So in the controller we need to modify to make a call to the service. In the following example the service is returning JSON.

Let us see what is happening in the code above:

The $http service is making HTTP GET operation
The Service is returning JSON data
The $http service returns the promised object having the success method. In this method service the response will be handled asynchronously.
In the success method of the promise object of the $http service, Angular is assigning returned data to the current scope and creating a model named author
The Parsing of returned data is done by angular.

As you might have noticed that to use a service we need to pass the service as a dependency in the constructor of the Controller.

constructor of Controller

The Dependency Injector of Angular provided services to the controller. It works in the following three steps:

The Injector identifies $http as a dependency of the controller
The Injector checks whether an instance of $http exists or not; if not then it creates a new instance of $http
The Injector passes a singleton instance to the controller of the service. In this case the Angular dependency injector will check whether or not the $http service singleton instance is passed to the AuthorController.

So for your reference, the code from the above discussion is given below. Module and Controller is created as given below:

var AuthorApp = angular.module('AuthorApp', []);
AuthorApp.controller('AuthorController',
function ($scope, $http)
{
$http.get('http://localhost:21800/Service1.svc/GetAuthors')
.success(function (data)
{
$scope.authors = data;
});
});

And the View is as below:

<!DOCTYPE html>
<html ng-app="AuthorApp">
<head>
<title>Angular Demo</title>
<script src="Scripts/angular.min.js"></script>
<script src="Author.js"></script>
</head>
<body ng-controller="AuthorController">
Search: <input ng-model="searchtext">
Sort:
<select ng-model="sortorder">
<option value="AuthorName">Name</option>
<option value="age">Age</option>
</select>
<ul>
<li ng-repeat="author in authors |
filter:searchtext |
orderBy:sortorder">
{{author.AuthorName}}
</li>
</ul>
</body>
</html>

On the web page all the authors will be rendered as below:

We learned how easy it is using the Angular service to make a HTTP request. We also learned about using an Angular service like $http in applications. Happy coding.