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.

image

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

image

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.

clip_image001

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?

image

So for your reference code from above discussion is given below. Module and Controller is created 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 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,

image

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.

Advertisements

8 thoughts on “Learn AngularJS Hour 4: service in AngularJS and making HTTP call using $http

  1. 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.

  2. $http({
    method: “post”,
    url: “”,
    params: {
    id: empID
    }
    });

    Or you can also POST an object like

    $http({
    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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s