Hoe krijg ik toegang tot de services van RESTful API op mijn angularjs-pagina?

Ik ben erg nieuw in angularJS. Ik ben op zoek naar toegang tot services van RESTful API, maar ik heb geen idee gekregen. Hoe kan ik dat doen?

Antwoord 1, autoriteit 100%

Optie 1: $http-service

AngularJS biedt de $http-servicedie dat wel doet precies wat u wilt: AJAX-verzoeken naar webservices verzenden en gegevens van hen ontvangen, met behulp van JSON (wat perfect is om met REST-services te praten).

Om een ​​voorbeeld te geven (uit de AngularJS-documentatie en enigszins aangepast):

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

Optie 2: $resource-service

Houd er rekening mee dat er ook een andere service is in AngularJS, de $resourceservicedie toegang biedt tot REST-services op een meer hoog niveau (voorbeeld opnieuw overgenomen uit AngularJS-documentatie):

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

Optie 3: Resthoekig

Bovendien zijn er ook oplossingen van derden, zoals Retangular. Bekijk de documentatieover het gebruik ervan. Kortom, het is veel meer declaratief en abstraheert meer details van je af.

Antwoord 2, autoriteit 9%

De $http-service kan worden gebruikt voor algemene AJAX-doeleinden. Als je een goede RESTful API hebt, moet je eens kijken op ngResource.

Je zou ook eens kunnen kijken naar Restangular, een bibliotheek van derden om eenvoudig REST API’s te verwerken.

Antwoord 3, autoriteit 7%

Welkom in de wondere wereld van Angular !!

Ik ben erg nieuw in angularJS. Ik ben op zoek naar toegang tot services van RESTful API, maar ik heb geen idee gekregen. help me alsjeblieft om dat te doen. Bedankt

Er zijn twee (zeer grote) hindernissen bij het schrijven van uw eerste Angular-scripts, als u momenteel ‘GET’-services gebruikt.

Ten eerste moeten uw services de eigenschap “Access-Control-Allow-Origin” implementeren, anders werken de services als ze worden aangeroepen vanuit bijvoorbeeld een webbrowser, maar mislukken ze jammerlijk wanneer ze worden aangeroepen vanuit Angular.

Je moet dus een paar regels toevoegen aan je web.config-bestand:

<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>

Vervolgens moet je een klein beetje code aan je HTML-bestand toevoegen om Angular te dwingen ‘GET’-webservices aan te roepen:

// 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'];
}]);

Als je deze oplossingen eenmaal hebt geïnstalleerd, is het aanroepen van een RESTful API heel eenvoudig.

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

Je kunt een heel duidelijk overzicht van deze stappen vinden op deze webpagina:

Angular gebruiken, met JSON-gegevens

Veel succes!

Mike

Antwoord 4, autoriteit 5%

Gewoon om $http(snelkoppelingsmethoden) hier uit te breiden: http://docs .angularjs.org/api/ng.$http

//Snippet van de pagina

$http.get('/someUrl').success(successCallback);
$http.post('/someUrl', data).success(successCallback);

//beschikbare snelkoppelingsmethoden

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp

Antwoord 5

Uw json ziet er bijvoorbeeld als volgt uit:
{“id”:1,”content”:”Hallo wereld!”}

Je hebt toegang tot dit via angularjs als volgt:

angular.module('app', [])
    .controller('myApp', function($scope, $http) {
        $http.get('http://yourapp/api').
            then(function(response) {
                $scope.datafromapi = response.data;
            });
    });

Dan zou je het op je html als volgt doen:

<!doctype html>
<html ng-app="myApp">
    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
        <script src="hello.js"></script>
    </head>
    <body>
        <div ng-controller="myApp">
            <p>The ID is {{datafromapi.id}}</p>
            <p>The content is {{datafromapi.content}}</p>
        </div>
    </body>
</html>

Dit roept het CDN voor angularjs aan voor het geval je ze niet wilt downloaden.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>

Hopelijk helpt dit.