Call Web Service in Angular 2?

Refer the following Link : http://www.c-sharpcorner.com/article/consuming-asp-net-web-service-in-angularjs-using-http/

You should put your $http.get inside your controller.

Also, the web service returns an object not an array. So your ng-repeat should be something like this: book in data.books

Here is a working example:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">script>
<article ng-app="booksInventoryApp">
<section ng-controller="booksCtrl">
<h2 ng-repeat="book in data.books">{{book.name}}h2>
section>
article>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Puneet Kankar9y ago
https://hassantariqblog.wordpress.com/2016/12/03/restful-webservice-for-angular2-using-observable/
Balamurali Krishnan R9y ago
thanks your interest . here you consume in angular 1 .I need to consume web services in Angular 2.
Manikandan Murugesan9y ago
Refer the following Link : http://www.c-sharpcorner.com/article/consuming-asp-net-web-service-in-angularjs-using-http/

You should put your $http.get inside your controller.
Also, the web service returns an object not an array. So your ng-repeat should be something like this: book in data.books

Here is a working example:
var app = angular.module('booksInventoryApp', []);

app.controller('booksCtrl', function($scope, $http) {

  $http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
    .then(function(response) {
      $scope.data = response.data;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">script>
<article ng-app="booksInventoryApp">
  <section ng-controller="booksCtrl">
    <h2 ng-repeat="book in data.books">{{book.name}}h2>
  section>
article>