web-dev-qa-db-fra.com

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

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

restangularjsrestful-urlangularjs-service
88
anilCSE

Option 1: service $ http

AngularJS fournit le service $http 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 adapté aux services REST).

Pour donner un exemple (tiré de la documentation d’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 service $resource qui permet d’accéder aux services REST de manière plus évoluée (exemple repris 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 . Voir sa documentation sur son utilisation. Fondamentalement, il est beaucoup plus déclaratif et résume plus de détails loin de vous.

145
Golo Roden

Le service $ http peut être utilisé pour AJAX à des fins générales. Si vous avez une API RESTful appropriée, vous devriez jeter un oeil à ngResource . 

Vous pouvez également consulter Restangular , une bibliothèque tierce permettant de gérer facilement les API REST.

13
Aleksander Blomskøld

Bienvenue dans le monde merveilleux de Angular !!

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

Si vous utilisez actuellement les services "GET", la rédaction de votre premier script Angular présente deux obstacles (très importants).

Tout d'abord, vos services doivent implémenter la propriété "Access-Control-Allow-Origin", sinon ils fonctionneront comme un régal lorsqu'ils sont appelés depuis 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 un aperçu clair de ces étapes sur cette page Web:

Utilisation de Angular avec des données JSON

Bonne chance !

Mike

10
Mike Gledhill

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

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

Vous pouvez accéder à cela à travers angularjs comme ceci:

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

Ensuite, sur votre code 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.

0
PinoyDev