Learn AngularJS Hour 4: service in AngularJS and making HTTP call using $http

In hour 1 of this series we learnt to get started with AngularJS.

In hour 2 of this series we learnt about AngularJS Template.

In hour 3 of this series we learnt about two way bindings and filter.

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 are going to 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 controller we need to modify to make a call to the service. In below example service is returning JSON.


Let us see what is happening in above code,

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

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


Dependency Injector of Angular provided services to controller. It works in three steps,

  1. Injector identifies $http as dependency of controller
  2. Injector checks whether instance of $http exist or not? if not creates new instance of $http
  3. Injector pass singleton instance to controller of service. In this case Angular dependency injector will check whether $http service singleton instance is passed to AuthorController or not?


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

var AuthorApp = angular.module('AuthorApp', []);

                      function ($scope, $http)
        .success(function (data)
                 $scope.authors = data;

And View is as below,

<!DOCTYPE html>
<html ng-app="AuthorApp">
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Author.js"></script>
<body ng-controller="AuthorController">

    Search: <input ng-model="searchtext">

    <select ng-model="sortorder">
        <option value="AuthorName">Name</option>
        <option value="age">Age</option>

        <li ng-repeat="author in authors |
            filter:searchtext |


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


We learnt how easy it is using Angular service to make a HTTP request. We also learnt about using Angular service like $http in application. Happy coding.

8 responses to “Learn AngularJS Hour 4: service in AngularJS and making HTTP call using $http”

  1. […] Learn AngularJS Hour 4: service in AngularJS and making HTTP call using $http (Dhananjay Kumar) […]

  2. […] hour 4 , we learnt about $http service and making HTTP […]

  3. […] Learn AngularJS Hour 4: service in AngularJS and making HTTP call using $http and Learn AngularJS Hour 5: All about $scope object (Dhananjay Kumar) […]

  4. I might have missed a step here, but where did you get the HTTP feed / service? If it’s hosted on LocalHost, would you mind sharing the code that created the service, or a pointer to one on the web.

  5. Can you also update on how parameters can be passed on to a POST call ?

  6. $http({
    method: “post”,
    url: “”,
    params: {
    id: empID

    Or you can also POST an object like

    method: “post”,
    url: “<Your Service URL",
    data: JSON.stringify("Object'),
    dataType: "json"


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com