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?
Réponses:
AngularJS fournit le $http
service 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) {
// ...
});
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 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();
});
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
Access-Control-Allow-Origin
ne devrait jamais être un joker sauf si vous êtes une API publique ...
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.