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

Question

I am very new to angularJS  I am searching for accessing services from RESTful API  but I didn t get any idea  How can I do that

User · Answer

Welcome to the wonderful world of Angular !!

I am very new to angularJS. I am searching for accessing services from RESTful API but I didn't get any idea. please help me to do that. Thank you

There are two (very big) hurdles to writing your first Angular scripts, if you're currently using 'GET' services.

First, your 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, you'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 !
        //  
    });
}

You can find a really clear walkthrough of these steps on this webpage:

Using Angular, with JSON data

Good luck !

Mike

User · Answer

Just to expand on  http  shortcut methods  here  http   docs angularjs org api ng  http    Snippet from the page   http get   someUrl   success successCallback    http post   someUrl   data  success successCallback       available shortcut methods   http get  http head  http post  http put  http delete  http jsonp

User · Answer

For instance your json looks like this     id  1  content   Hello  World     You can access this thru angularjs like so   angular module  app            controller  myApp   function  scope   http             http get  http   yourapp api                then function response                     scope datafromapi   response data                            Then on your html you would do it like this    lt  doctype html gt   lt html ng-app  myApp  gt       lt head gt           lt title gt Hello AngularJS lt  title gt           lt script src  https   ajax googleapis com ajax libs angularjs 1 4 3 angular min js  gt  lt  script gt           lt script src  hello js  gt  lt  script gt       lt  head gt        lt body gt           lt div ng-controller  myApp  gt               lt p gt The ID is   datafromapi id   lt  p gt               lt p gt The content is   datafromapi content   lt  p gt           lt  div gt       lt  body gt   lt  html gt    This calls the CDN for angularjs in case you don t want to download them    lt script src  https   ajax googleapis com ajax libs angularjs 1 4 3 angular min js  gt  lt  script gt   lt script src  hello js  gt  lt  script gt    Hope this helps

User · Answer

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 more of the details away from you

User · Answer

The  http service can be used for general purpose AJAX  If you have a proper 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

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

Examples related to rest

Examples related to angularjs

Examples related to restful-url

Examples related to angularjs-service