Tuesday, October 25, 2016

Calling Web Service using Angular JS


Step 1:- Create a web dynamic Project and convert the same to AngulrJS using belwo option
Right Click Project --> Configure --> Convert to AngularJS Project
Step 2:- Create a simple html file
WebContent folder ->New ->HTML
and add following code
<!–script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js”>&lt;!–/script> –>
<!–script src=”lib/angular.min.js”><!–/script>
<!–script src=”js/angularwebservicedemo.js”><!–/script>
<!–article ng-app=”booksInventoryApp”>
<!–section ng-controller=”booksCtrl”>
<!–h2 ng-repeat=”book in data.books”>{{book.name}}<!–/h2> 
<!–/section>
<!–/article>
Step 2:- Create a js folder inside webcontent folder and create a js file inside it with below code\
/**
*
*/
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;
});
});
image7
Note: You can also get the same code from below
http://stackoverflow.com/questions/30625002/getting-data-from-a-web-service-with-angular-js

No comments: