How to access the services from RESTful API in my angularjs page?

How to access the services from RESTful API in my angularjs page?

Asked on October 23, 2018 in AngularJs.
Add Comment


  • 5 Answer(s)

    Option 1: $http service
        AngularJS provides the $http service that does exactly what you want: Sending AJAX requests to web services and receiving data from them, using JSON (which is perfectly for talking to REST services).

        To give an example (taken from the AngularJS documentation and slightly adapted):]

    $http({ method: 'GET', url: '/foo' }).
      success(function (data, status, headers, config)
    {
        // ...
      }).
      error(function (data, status, headers, config)
    {
        // ...
      });
    

    Option 2: $resource service
       Please note that there is also another service in AngularJS, the $resource service which provides access to REST services in a more high-level fashion (example again taken from AngularJS documentation):

    var Users = $resource('/user/:userId', { userId: '@id' });
    var user = Users.get({ userId: 123 }, function ()
    {
      user.abc = true;
      user.$save();
    });
    

    Option 3: Restangular
       Moreover, there are also third-party solutions, such as Restangular. See its documentation on how to use it. Basically, it’s way more declarative and abstracts

    Answered on October 23, 2018.
    Add Comment

       The $http service can be used for application AJAX. If you have a format RESTful API, you should take a look at ngResource.

        You might also take a look at Restangular, which is a third party library to handle REST APIs easy.

    Answered on October 23, 2018.
    Add Comment

       First, our services must implement the “Access-Control-Allow-Origin” property, otherwise the services will work a treat when called from, say, a web browser, but fail miserably when called from Angular.

        So, we’ll need to add a few lines to your web.config file:

    <configuration>
      ...
      <system.webServer>
        <httpErrors errorMode="Detailed"/>
        <validation validateIntegratedModeConfiguration="false"/>
        <!-- We need the following 6 lines, to let AngularJS call our REST web services -->
        <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*"/>
            <add name="Access-Control-Allow-Headers" value="Content-Type"/>
          </customHeaders>
        </httpProtocol>
      </system.webServer>
    ...
    </configuration>
    

    Next, you need to add a little bit of code to your HTML file, to force Angular to call ‘GET’ web services:

    // Make sure AngularJS calls our WCF Service as a "GET", rather than as an "OPTION"
    var myApp = angular.module('myApp', []);
    myApp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }]);
    

    Once you have these fixes in place, actually calling a RESTful API is really straightforward.

    function YourAngularController($scope, $http) 
    {
      $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
        .success(function (data) {
        //
        // Do something with the data !
        //
      });
    }
    
    Answered on October 23, 2018.
    Add Comment

    Very simple way to do this is given in the code below To use the $resource service, register the ngResource module by appending it to your existing code in consume-rest.js:

    var app = angular.module('consumeRestApp', ['ngResource']);
    

     

    Answered on December 17, 2018.
    Add Comment

    Here is an example code for the method to access the services from RESTful API in my angularjs page:

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
      <div ng-app="myapps">
        <div ng-controller="productController">
          <table>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Price</th>
            </tr>
    <tr ng-repeat="pr in listProducts">
              <td>{{pr.id}}</td>
              <td>{{pr.name}}</td>
              <td>{{pr.price}}</td>
            </tr>
          </table>
        </div>
    </div>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script type="text/javascript">
        var myapp = angular.module('myapps', []);
        myapp.controller('productController', function($scope, $http) {
            $http.get('http://localhost:8080/Restful/rest/product/findAll')
              .success(function(response) {
                $scope.listProducts = response.product;
              });
           });
    </script>
    </body>
    </html>
    
    Answered on December 17, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.