Come accedere ai servizi dall'API RESTful nella mia pagina angularjs?

Sono molto nuovo su angularJS. Sto cercando di accedere ai servizi dall'API RESTful, ma non ho avuto alcuna idea. Come lo posso fare?

Opzione 1: servizio $ http

AngularJS fornisce il $httpservizio che fa esattamente quello che vuoi: inviare richieste AJAX ai servizi web e ricevere dati da loro, usando JSON (che è perfettamente per parlare con i servizi REST).

Per fare un esempio (tratto dalla documentazione di AngularJS e leggermente adattato):

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

Opzione 2: $ resource service

Si prega di notare che c'è anche un altro servizio in AngularJS, il $resourceservizio che fornisce l'accesso ai servizi REST in un modo più alto (esempio ripreso dalla documentazione di AngularJS):

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

Opzione 3: Restangular

Inoltre, esistono anche soluzioni di terze parti, come Restangular . Vedi la sua documentazione su come usarlo. Fondamentalmente, è molto più dichiarativo e astrae più dettagli da te.

Il servizio $ http può essere utilizzato per scopi generali AJAX. Se disponi di un'API RESTful appropriata, dovresti dare un'occhiata a ngResource .

Potresti anche dare un'occhiata a Restangular , che è una libreria di terze parti per gestire facilmente le API REST.

Benvenuti nel meraviglioso mondo di Angular !!

Sono molto nuovo su angularJS. Sto cercando di accedere ai servizi dall'API RESTful ma non ho avuto alcuna idea. per favore aiutami a farlo. Grazie

Ci sono due (molto grandi) ostacoli alla scrittura dei tuoi primi script Angular, se stai attualmente utilizzando i servizi "GET".

In primo luogo, i tuoi servizi devono implementare la proprietà "Access-Control-Allow-Origin", altrimenti i servizi funzioneranno a meraviglia quando vengono chiamati, ad esempio, da un browser web, ma falliscono miseramente quando vengono chiamati da Angular.

Quindi, dovrai aggiungere alcune righe al tuo file web.config :

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

Successivamente, è necessario aggiungere un po 'di codice al file HTML, per forzare Angular a chiamare i servizi web "GET":

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

Una volta implementate queste correzioni, chiamare effettivamente un'API RESTful è davvero semplice.

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

Puoi trovare una guida molto chiara di questi passaggi in questa pagina web:

Utilizzo di Angular, con dati JSON

In bocca al lupo !

Mike

Solo per espandere $http(metodi di scelta rapida) qui: http://docs.angularjs.org/api/ng.$http

// Snippet dalla pagina

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

// metodi di scelta rapida disponibili

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

Ad esempio, il tuo json ha questo aspetto: {"id": 1, "content": "Hello, World!"}

Puoi accedere a questo tramite angularjs in questo modo:

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

Quindi sul tuo html lo faresti in questo modo:

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

Questo chiama il CDN per angularjs nel caso in cui non desideri scaricarli.

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

Spero che questo ti aiuti.