Comment accéder à ces services à partir d'API RESTful dans mon angularjs page?

Je suis très nouveau à angularJS. Je suis à la recherche pour accéder à des services d'API RESTful, mais je n'ai pas la moindre idée. Comment puis-je le faire?

InformationsquelleAutor anilCSE | 2013-05-06
  1. 145

    Option 1: $service http

    AngularJS fournit la $http service qui fait exactement ce que vous voulez: l'Envoi de requêtes AJAX à des services web et de recevoir des données à partir d'eux, l'utilisation de JSON (ce qui est parfaitement pour parler à des services REST).

    Pour donner un exemple (pris à partir de la AngularJS documentation 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 des ressources

    Veuillez noter qu'il existe aussi un autre service AngularJS, la $ressource service qui fournit un accès à des services RESTE à un plus haut niveau de la mode (exemple repris à partir AngularJS documentation):

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

    Option 3: Restangular

    En outre, il existe également des solutions tierces, telles que Restangular. Voir son la documentation sur la façon de l'utiliser. En gros, c'est plus de façon déclarative et des résumés plus de détails loin de vous.

    • Pouvez-vous svp m'aider ici. Je suis pas d'idée. stackoverflow.com/questions/16463456/.... Je suis incapable de charger le service de l'API REST. obtenir un tableau vide. Merci
    • j'ai vu quelqu'un à l'aide de $http.les valeurs par défaut.useXDomain = true angulaire lorsque vous traitez avec de la SCRO. Est-il vraiment nécessaire de le faire? parce que je viens de mettre en place laravel et angulaire dans différents domaine. j'ai frappé à la laravel contrôleur de la requête http à partir angulaire. Il vient de bien fonctionner, Si j'utilise le $http.les valeurs par défaut.useXDomain ou pas. Est-il une explication logique à cela?
    • Option 4: singer (stackoverflow.com/a/34821684/878055)
    InformationsquelleAutor Golo Roden
  2. 13

    La $http service peut être utilisé pour les fins générales de l'AJAX. Si vous avez une bonne API RESTful, vous devriez jeter un oeil à ngResource.

    Vous pouvez également jeter un oeil à Restangular, qui est une bibliothèque tierce pour gérer les Api REST facile.

    InformationsquelleAutor Aleksander Blomskøld
  3. 10

    Bienvenue dans le merveilleux monde de la Angulaires !!

    Je suis très nouveau à angularJS. Je suis à la recherche pour accéder à des services d'API RESTful, mais je n'ai pas la moindre idée. merci de m'aider à le faire. Merci

    Il y a deux (très gros) obstacles à l'écriture de votre premier Angulaire des scripts, si vous êtes actuellement à l'aide de 'GET' services.

    D'abord, vos services doivent mettre en œuvre le "Access-Control-Allow-Origin" de la propriété, sinon les services travailler un régal lorsqu'il est appelé à partir, par exemple, un navigateur web, mais échoue lamentablement lorsqu'il est appelé à partir Angulaire.

    Ainsi, vous aurez besoin d'ajouter quelques lignes à votre 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>

    Suivante, vous devez ajouter un peu de code dans votre fichier HTML, à force Angulaire de l'appel de 'OBTENIR des services offerts sur le web:

    //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 ces correctifs en place, fait appel d'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 très clair procédure pas à pas de ces étapes sur cette page:

    À l'aide de Anguleux, avec des données JSON

    Bonne chance !

    Mike

    • Pourquoi voulez-vous encourager à quelqu'un de totalement ouvert leurs services web pour l'internet? Le Access-Control-Allow-Origin ne devrait jamais être une wild-card, sauf si vous êtes une API publique...
    InformationsquelleAutor Mike Gledhill
  4. 7

    Juste pour élargir sur $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);

    //raccourci méthodes

    $http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
    • .success() et .erreur() est deprected. vous devez utiliser .alors() et .catch() à la place
    InformationsquelleAutor CKuharski
  5. 0

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

    Vous pouvez accéder à ce thru angularjs comme suit:

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

    Puis sur le html, il serait de faire 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 demande de la CAN pour angularjs dans le cas où vous ne voulez 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>

    Espère que cette aide.

    InformationsquelleAutor PinoyDev