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

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?

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.

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.

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

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

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.