Wie greife ich über die RESTful-API auf meiner AngularJS-Seite auf die Services zu?

Ich bin sehr neu in AngularJS. Ich suche nach Zugriff auf Dienste über die RESTful-API, habe aber keine Ahnung. Wie kann ich das machen?

Option 1: $ http-Dienst

AngularJS bietet den $httpDienst , der genau das tut, was Sie möchten: AJAX-Anforderungen an Webdienste senden und Daten von diesen mithilfe von JSON empfangen (ideal für die Kommunikation 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: $ Ressourcenservice

Bitte beachten Sie, dass es auch ein anderen Dienst in AngularJS, der $resourceService , die den Zugang zu REST - Service in einer High-Level - Mode (auch hier beispielsweise aus AngularJS Dokumentation entnommen) sieht vor :

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 . Informationen zur Verwendung finden Sie in der Dokumentation . Im Grunde ist es viel aussagekräftiger und abstrahiert mehr Details von Ihnen.

Der $ http- Dienst kann für AJAX für allgemeine Zwecke verwendet werden. Wenn Sie über eine ordnungsgemäße RESTful-API verfügen, sollten Sie sich ngResource ansehen .

Sie können sich auch Restangular ansehen , eine Bibliothek von Drittanbietern, mit der Sie REST-APIs einfach handhaben können.

Willkommen in der wundervollen Welt von Angular!

Ich bin sehr neu in AngularJS. Ich suche nach Zugriff auf Dienste über die RESTful-API, habe aber keine Ahnung. Bitte helfen Sie mir dabei. Danke dir

Es gibt zwei (sehr große) Hürden beim Schreiben Ihrer ersten Angular-Skripte, 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 von einem Webbrowser aufgerufen werden, aber beim Aufrufen von Angular kläglich fehlschlagen.

Sie müssen Ihrer web.config- Datei also einige Zeilen hinzufü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 Ihrer HTML-Datei ein wenig Code hinzufügen, um Angular zu zwingen, 'GET'-Webdienste 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 vorgenommen 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 !
        //  
    });
}

Eine wirklich klare Anleitung für diese Schritte finden Sie auf dieser Webseite:

Verwenden von Angular mit JSON-Daten

Viel Glück !

Mike

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

// Ausschnitt von 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

Zum Beispiel sieht Ihr JSON folgendermaßen aus: {"id": 1, "content": "Hallo Welt!"}

Sie können über Winkel wie folgt darauf 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 Ihrem 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.