Jestem bardzo nowy w angularJS. Szukam dostępu do usług z RESTful API, ale nie mam pojęcia. Jak mogę to zrobić?
źródło
Jestem bardzo nowy w angularJS. Szukam dostępu do usług z RESTful API, ale nie mam pojęcia. Jak mogę to zrobić?
AngularJS zapewnia $http
usługę, która robi dokładnie to, co chcesz: wysyłanie żądań AJAX do usług internetowych i odbieranie z nich danych za pomocą JSON (co jest idealne do komunikacji z usługami REST).
Aby podać przykład (zaczerpnięty z dokumentacji AngularJS i lekko dostosowany):
$http({ method: 'GET', url: '/foo' }).
success(function (data, status, headers, config) {
// ...
}).
error(function (data, status, headers, config) {
// ...
});
Proszę pamiętać, że istnieje także inna usługa w angularjs The $resource
usługa , która zapewnia dostęp do usług REST w sposób bardziej wysokiego szczebla (przykład wzięty z dokumentacji ponownie angularjs):
var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
user.abc = true;
user.$save();
});
Ponadto istnieją również rozwiązania innych firm, takie jak Restangular . Zobacz jego dokumentację, aby dowiedzieć się, jak go używać. Zasadniczo jest to o wiele bardziej deklaratywne i odciąga więcej szczegółów od Ciebie.
Usługa $ http może być używana do ogólnego przeznaczenia AJAX. Jeśli masz odpowiednie API RESTful, powinieneś przyjrzeć się ngResource .
Możesz również rzucić okiem na Restangular , który jest biblioteką innej firmy do łatwej obsługi interfejsów API REST.
źródło
Witamy w cudownym świecie Angular !!
Istnieją dwie (bardzo duże) przeszkody w pisaniu pierwszych skryptów Angular, jeśli obecnie korzystasz z usług „GET”.
Po pierwsze, Twoje usługi muszą zaimplementować właściwość „Access-Control-Allow-Origin”, w przeciwnym razie usługi będą działać niezawodnie, gdy będą wywoływane, powiedzmy, z przeglądarki internetowej, ale zawiodą, gdy zostaną wywołane z Angulara.
Musisz więc dodać kilka wierszy do swojego pliku 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>
Następnie musisz dodać trochę kodu do pliku HTML, aby zmusić Angular do wywołania usług internetowych „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']; }]);
Po wprowadzeniu tych poprawek wywołanie interfejsu API RESTful jest naprawdę proste.
function YourAngularController($scope, $http) { $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers') .success(function (data) { // // Do something with the data ! // }); }
Naprawdę przejrzysty opis tych czynności można znaleźć na tej stronie internetowej:
Korzystanie z Angular z danymi JSON
Powodzenia !
Mikrofon
źródło
Access-Control-Allow-Origin
nigdy nie powinno być dziką kartą, chyba że jesteś publicznym API ...Aby rozwinąć
$http
(metody skrótowe) tutaj: http://docs.angularjs.org/api/ng.$http// Fragment ze strony
$http.get('/someUrl').success(successCallback); $http.post('/someUrl', data).success(successCallback);
// dostępne metody skrótów
$http.get $http.head $http.post $http.put $http.delete $http.jsonp
źródło
Na przykład Twój json wygląda tak: {"id": 1, "content": "Hello, World!"}
Możesz uzyskać dostęp do tego przez angularjs w następujący sposób:
angular.module('app', []) .controller('myApp', function($scope, $http) { $http.get('http://yourapp/api'). then(function(response) { $scope.datafromapi = response.data; }); });
Następnie w swoim html zrobiłbyś to tak:
<!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>
To wywołuje CDN dla angularjs na wypadek, gdybyś nie chciał ich pobierać.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> <script src="hello.js"></script>
Mam nadzieję że to pomoże.
źródło