web-dev-qa-db-de.com

Wie kann ich über die RESTful-API in meiner anglejs-Seite auf die Dienste zugreifen?

Ich bin sehr neu bei angleJS. Ich suche nach Zugriff auf Dienste von RESTful API, habe aber keine Ahnung davon. Wie kann ich das machen?

88
anilCSE

Option 1: $ http-Dienst

AngularJS bietet den $http-Dienst , der genau das macht, was Sie möchten: Senden von AJAX -Anfragen an Webdienste und Empfangen von Daten von diesen mithilfe von JSON (ideal für Gespräche mit REST - Diensten).

Um ein Beispiel zu geben (aus der AngularJS-Dokumentation entnommen und leicht angepasst):

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

Option 2: $ Ressourcendienst

Bitte beachten Sie, dass es in AngularJS auch einen weiteren Dienst gibt, den $resource-Dienst , der den Zugriff auf REST -Dienste auf eine höhere Ebene ermöglicht (Beispiel erneut aus der AngularJS-Dokumentation):

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

Option 3: Restangular

Darüber hinaus gibt es auch Lösungen von Drittanbietern wie Restangular . Siehe documentation zur Verwendung. Im Grunde ist es viel deklarativer und abstrahiert mehr Details von Ihnen.

145
Golo Roden

Der $ http - Dienst kann für allgemeine AJAX-Zwecke verwendet werden. Wenn Sie über eine geeignete RESTful-API verfügen, sollten Sie einen Blick auf ngResource werfen. 

Sie können auch einen Blick auf Restangular werfen, eine Bibliothek von Drittanbietern, mit der REST - APIs einfach gehandhabt werden können.

13

Willkommen in der wundervollen Welt von Angular !!

Ich bin sehr neu bei angleJS. Ich suche nach Zugriff auf Dienste von RESTful API, habe aber keine Ahnung davon. bitte hilf mir das zu tun. Vielen Dank

Es gibt zwei (sehr große) Hürden, wenn Sie Ihre ersten Angular-Skripts schreiben, wenn Sie derzeit "GET" -Dienste verwenden.

Erstens müssen Ihre Dienste die Eigenschaft "Access-Control-Allow-Origin" implementieren. Andernfalls funktionieren die Dienste, wenn sie beispielsweise über einen Webbrowser aufgerufen werden, aber sie schlagen fehl, wenn sie von Angular aufgerufen werden. 

Sie müssen also einige Zeilen in Ihre Datei web.config einfügen:

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

Als Nächstes müssen Sie ein wenig Code in Ihre HTML-Datei einfügen, um Angular zu zwingen, 'GET'-Webservices aufzurufen:

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

Sobald Sie diese Korrekturen installiert haben, ist das Aufrufen einer RESTful-API wirklich unkompliziert.

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

Auf dieser Website finden Sie eine wirklich klare Anleitung zu diesen Schritten:

Verwenden von Angular mit JSON-Daten

Viel Glück !

Mike

10
Mike Gledhill

Um nur $http (Verknüpfungsmethoden) hier zu erweitern: http://docs.angularjs.org/api/ng.$http

// Ausschnitt aus der Seite

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

// verfügbare Verknüpfungsmethoden

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

Zum Beispiel sieht Ihr Json so aus: {"Id": 1, "content": "Hello, World!"}

Sie können auf dieses durch eckigejs zugreifen:

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

Dann würden Sie es auf Ihrer HTML so machen:

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

Dies ruft das CDN für anglejs auf, falls Sie sie nicht herunterladen möchten.

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

Hoffe das hilft.

0
PinoyDev