Comment accéder aux services de l'API RESTful dans ma page angularjs?

88

Je suis très nouveau sur angularJS. Je cherche à accéder aux services de l'API RESTful, mais je n'ai aucune idée. Comment puis je faire ça?

anilCSE
la source

Réponses:

145

Option 1: service $ http

AngularJS fournit le $httpservice qui fait exactement ce que vous voulez: envoyer des requêtes AJAX à des services Web et en recevoir des données, en utilisant JSON (ce qui est parfaitement pour parler aux services REST).

Pour donner un exemple (tiré de la documentation AngularJS et légèrement adapté):

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

Option 2: service de ressources $

Veuillez noter qu'il existe également un autre service dans AngularJS, le $resourceservice qui permet d'accéder aux services REST de manière plus avancée (exemple encore tiré de la documentation AngularJS):

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

Option 3: Restangulaire

De plus, il existe également des solutions tierces, telles que Restangular . Consultez sa documentation pour savoir comment l'utiliser. Fondamentalement, c'est beaucoup plus déclaratif et fait abstraction de plus de détails.

Golo Roden
la source
1
Pouvez-vous s'il vous plaît m'aider ici. Je n'ai aucune idée. stackoverflow.com/questions/16463456/… . Je ne parviens pas à charger le service à partir de l'API REST. obtenir un tableau vide. Merci
anilCSE
@GoloRoden j'ai vu quelqu'un utiliser $ http.defaults.useXDomain = true en angular lorsqu'il s'agit de CORS. Est-ce vraiment nécessaire de faire ça? parce que je viens de mettre en place laravel et angular dans un domaine différent. J'ai frappé le contrôleur laravel avec la demande http d'angular. Cela fonctionne très bien, que j'utilise le $ http.defaults.useXDomain ou non. Y a-t-il une explication logique à cela?
under5hell
13

Le service $ http peut être utilisé pour AJAX à usage général. Si vous avez une API RESTful appropriée, vous devriez jeter un œil à ngResource .

Vous pouvez également jeter un œil à Restangular , qui est une bibliothèque tierce pour gérer facilement les API REST.

Aleksander Blomskøld
la source
10

Bienvenue dans le monde merveilleux d'Angular !!

Je suis très nouveau sur angularJS. Je cherche à accéder aux services de l'API RESTful mais je n'ai aucune idée. s'il vous plaît, aidez-moi à faire cela. Je vous remercie

Il y a deux (très gros) obstacles à l'écriture de vos premiers scripts Angular, si vous utilisez actuellement les services 'GET'.

Premièrement, vos services doivent implémenter la propriété "Access-Control-Allow-Origin", sinon les services fonctionneront très bien lorsqu'ils sont appelés à partir, par exemple, d'un navigateur Web, mais échouent lamentablement lorsqu'ils sont appelés depuis Angular.

Vous devrez donc ajouter quelques lignes à votre fichier 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>

Ensuite, vous devez ajouter un peu de code à votre fichier HTML, pour forcer Angular à appeler les services 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'];
}]);

Une fois ces correctifs en place, appeler une API RESTful est vraiment simple.

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

Vous pouvez trouver une procédure pas à pas très claire de ces étapes sur cette page Web:

Utiliser Angular, avec des données JSON

Bonne chance !

Mike

Mike Gledhill
la source
10
Pourquoi encourageriez-vous quelqu'un à ouvrir totalement ses services Web à Internet? Le Access-Control-Allow-Originne devrait jamais être un joker sauf si vous êtes une API publique ...
Dave Mackintosh
7

Juste pour développer $http(méthodes de raccourci) ici: http://docs.angularjs.org/api/ng.$http

// Extrait de la page

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

// méthodes de raccourci disponibles

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
CKuharski
la source
1
.success () et .error () sont obsolètes. vous devriez utiliser .then () et .catch () à la place
Derber Alter
0

Par exemple, votre json ressemble à ceci: {"id": 1, "content": "Hello, World!"}

Vous pouvez accéder à cela via angularjs comme suit:

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

Ensuite, sur votre html, vous le feriez comme ceci:

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

Cela appelle le CDN pour angularjs au cas où vous ne voudriez pas les télécharger.

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

J'espère que cela t'aides.

PinoyDev
la source