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

Question

Je suis très novice en matière d'angularJS. Je cherche à accéder à des services à partir d'une API RESTful, mais je n'ai pas trouvé d'idée. Comment faire ?

Answer 1

Option 1 : service $http

AngularJS fournit le $http service qui fait exactement ce que vous voulez : Envoyer des requêtes AJAX à des services web et recevoir des données de leur part, en utilisant JSON (qui est parfaitement adapté pour parler 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 $resource

Veuillez noter qu'il existe également un autre service dans AngularJS, le $resource service qui permet d'accéder aux services REST de manière plus poussée (exemple 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

Par ailleurs, il existe également des solutions tierces, telles que Restangulaire . Voir son documentation sur la façon de l'utiliser. Fondamentalement, il est beaucoup plus déclaratif et abstrait plus de détails de vous.

Answer 2

Le site $http peut être utilisé pour un usage général d'AJAX. Si vous disposez d'une API RESTful appropriée, vous devriez jeter un coup d'oeil à ngResource .

Vous pouvez également jeter un coup d'œil à Restangulaire qui est une bibliothèque tierce permettant de gérer facilement les API REST.

Answer 3

Bienvenue dans le monde merveilleux d'Angular !

Je suis très novice en matière d'angularJS. Je cherche à accéder à des services à partir d'une API RESTful, mais je n'ai pas trouvé d'idée. Veuillez m'aider à le faire. Je vous remercie.

Si vous utilisez actuellement des services "GET", deux obstacles (très importants) vous empêchent d'écrire vos premiers scripts Angular.

Tout d'abord, vos services doivent mettre en œuvre la propriété "Access-Control-Allow-Origin", sinon les services fonctionneront parfaitement lorsqu'ils seront appelés à partir, par exemple, d'un navigateur web, mais échoueront lamentablement lorsqu'ils seront appelés à partir d'Angular.

Ainsi, vous devrez ajouter quelques lignes à votre fichier web.config fichier :

<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 petit bout 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 que vous avez mis en place ces correctifs, l'appel d'une API RESTful est très simple.

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

Vous trouverez une présentation très claire de ces étapes sur cette page web :

Utilisation d'Angular, avec des données JSON

Bonne chance !

Mike

Answer 4

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

//Snippet de la page

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

//méthodes de raccourcis disponibles

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp