Jak uzyskać dostęp do usług z RESTful API na mojej stronie angularjs?

Jestem bardzo nowy w angularJS. Szukam dostępu do usług z RESTful API, ale nie mam pojęcia. Jak mogę to zrobić?

Opcja 1: usługa $ http

AngularJS zapewnia $httpusł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) {
    // ...
  });

Opcja 2: usługa $ zasobów

Proszę pamiętać, że istnieje także inna usługa w angularjs The $resourceusł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();
});

Opcja 3: Restangular

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.

Witamy w cudownym świecie Angular !!

Jestem bardzo nowy w angularJS. Szukam dostępu do usług z RESTful API, ale nie mam pojęcia. pomóż mi to zrobić. Dziękuję Ci

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

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

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.