Tuesday, December 23, 2014

Calling a json rest api from angularJS || using AngularJS XMLHttpRequest to call service

hi lets see how to call a http rest api from angularjs

1. create the rest api which returns JSON data

2. Host the Http rest api ( in my case im hosting it on localhost )

3. Now we will see how to call this http api from angularjs

Code:

<!DOCTYPE html>

<html>
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

<body>
    <div ng-app="" ng-controller="EmpData">

        <div ng-repeat="x in Emp">
            <h1> {{ 'Employee ID:' + x.EID  }} </h1>
            <p>{{ 'Name: ' + x.EName}}</p>
            <p>{{ 'Salary: ' + x.ESalary}}</p>
        </div>

    </div>

    <script>

        function EmpData($scope, $http) {
            $http.get("http://localhost/api/Home").
                success(function (data) {
                    $scope.Emp = data;

                });
        }
    </script>

</body>
</html>

4. Output





1 comment:

  1. Thanks chandan sir.This article helped a lot.Very simple way of explanation with example.

    ReplyDelete