AngularJS et API REST
Résolu
Garig
Messages postés
72
Date d'inscription
Statut
Membre
Dernière intervention
-
Garig Messages postés 72 Date d'inscription Statut Membre Dernière intervention -
Garig Messages postés 72 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je voudrai faire un blog avec une architecture REST. Avec Symfony qui gérera la base de donnée et l'API, et avec Angular qui servira de client.
Est-ce que c’est possible de requeter une resource sur une url /articles coté serveur avec une API REST Symfony et d’afficher autre chose sur cette même url /articles coté client avec Angular ? Je veux pouvoir faire une requete ajax(promise) avec Angular et parser la resource (objet JSON) et l'afficher avec du CSS sur la même url /articles.
D'après ce que j'ai compris, je pense que oui car je requete sur /articles coté serveur et j'affiche une réponse différente coté client sur /articles.
Pouvez-vous me confirmer que c'est possible de requeter une API REST et d'afficher une réponse avec AngularJS sur la même url?
Merci
Je voudrai faire un blog avec une architecture REST. Avec Symfony qui gérera la base de donnée et l'API, et avec Angular qui servira de client.
Est-ce que c’est possible de requeter une resource sur une url /articles coté serveur avec une API REST Symfony et d’afficher autre chose sur cette même url /articles coté client avec Angular ? Je veux pouvoir faire une requete ajax(promise) avec Angular et parser la resource (objet JSON) et l'afficher avec du CSS sur la même url /articles.
D'après ce que j'ai compris, je pense que oui car je requete sur /articles coté serveur et j'affiche une réponse différente coté client sur /articles.
Pouvez-vous me confirmer que c'est possible de requeter une API REST et d'afficher une réponse avec AngularJS sur la même url?
Merci
A voir également:
- AngularJS et API REST
- Naz api - Accueil - Piratage
- Api injoignable cyberghost ✓ - Forum Réseaux sociaux
- Supported api 3 en français - Forum Mobile
- Steam api dll - Forum Windows
- Ma tv sharp reste en veille et ne s'allume plus - Forum Téléviseurs
5 réponses
Bonjour,
En théorie c'est possible, dans ce cas ton client Angular et ton serveur Symphony deviennent tous les deux consommateurs de /articles
En pratique, tu peux avoir des problèmes de sécurité (CORS) quand le navigateur appelle un autre serveur que celui qui héberge la page web.
À moins que /articles ne soit exposé par ton serveur ? Mais dans ce cas il n'y a pas d'intérêt à consommer en REST le serveur qui produit le service.
Remarque : ça n'a rien d'obligatoire, mais en terme d'architecture logicielle, c'est mieux que ton client n'appelle qu'un seul serveur : le tien.
Toute la responsabilité à appeler les autres serveurs (et donc /articles) est délégué à ton serveur qui fournit à ton client uniquement ce qu'il a besoin.
Intérêt : si /articles évolue, seul le serveur a besoin de se mettre à jour, le client reste compatible avec les services de ton serveur.
En théorie c'est possible, dans ce cas ton client Angular et ton serveur Symphony deviennent tous les deux consommateurs de /articles
En pratique, tu peux avoir des problèmes de sécurité (CORS) quand le navigateur appelle un autre serveur que celui qui héberge la page web.
À moins que /articles ne soit exposé par ton serveur ? Mais dans ce cas il n'y a pas d'intérêt à consommer en REST le serveur qui produit le service.
Remarque : ça n'a rien d'obligatoire, mais en terme d'architecture logicielle, c'est mieux que ton client n'appelle qu'un seul serveur : le tien.
Toute la responsabilité à appeler les autres serveurs (et donc /articles) est délégué à ton serveur qui fournit à ton client uniquement ce qu'il a besoin.
Intérêt : si /articles évolue, seul le serveur a besoin de se mettre à jour, le client reste compatible avec les services de ton serveur.
J'essaie toujours de consommer mon API REST Symfony avec un client AngularJS mais je rencontre des difficultés.
Mon API REST fonctionne bien. Elle envoie bien la liste de tous les articles au format JSON quand j'utilise la méthode http GET sur l'url /articles. Et la méthode http GET fonctionne bien aussi pour récupérer un article avec /articles/1
Mais mon problême c'est maintenant pour la consommer avec AngularJS
Pour cela j'utilise l'objet $resource avec le code suivant mais cela ne marche pas.
Je sais pas si je recupere bien le json dans ma variable Post. Qu'est ce que je dois faire? Comment debugger ça? Merci
dans mon app.js:
et dans ma vue Twig:
rien ne s'affiche. Pouvez-vous m'aider?
Mon API REST fonctionne bien. Elle envoie bien la liste de tous les articles au format JSON quand j'utilise la méthode http GET sur l'url /articles. Et la méthode http GET fonctionne bien aussi pour récupérer un article avec /articles/1
Mais mon problême c'est maintenant pour la consommer avec AngularJS
Pour cela j'utilise l'objet $resource avec le code suivant mais cela ne marche pas.
Je sais pas si je recupere bien le json dans ma variable Post. Qu'est ce que je dois faire? Comment debugger ça? Merci
dans mon app.js:
var app=angular.module("MonApplication", ['ngResource']);
app.controller("PostsController", function($scope,$resource){
var Post = $resource('http://localhost/Symfony6/web/app_dev.php/api/articles/:id.json');
$scope.posts=Post.query();
});
et dans ma vue Twig:
<h2>Consommation de l'API REST avec AngularJS</h2>
<div ng-controller="PostsController">
<article ng-repeat="p in posts">
<h2>{% verbatim %}{{p.title}}{% endverbatim %}</h2>
<p>{% verbatim %}{{p.content}}{% endverbatim %}</p>
</article>
</div>
rien ne s'affiche. Pouvez-vous m'aider?
Bonjour,
Je ne vais pas pouvoir t'aider en AngularJS (et encore moins en PHP) mais :
Je ne vais pas pouvoir t'aider en AngularJS (et encore moins en PHP) mais :
- Pourquoi utiliser AngularJS (obsolète) et pas les dernières versions Angular 4 ?
- Est-ce que tu es sûr de ton
/:id.json
? à quel moment tu indiques l'id ? - Est-ce que tu vois passer l'appel côté serveur ? Est-ce que tu as une log qui indique que tu as bien été appelé par le client ? Ou c'est une erreur 404 ?
Je ne sais pas utiliser Angular4. Mais avec AngularJS ça devrait fonctionner aussi normalement.
Sinon /:id.json devrait marcher ça revient à dire /:id. Mais je ne le précise nul part en effet
Je sais pas comment faire ça... si je dois créer un service ou autre avec des routeparams j'en sais rien du tout...
Et en console dans la partie Réseau, il ne m'indique pas que j'appelle http://localhost/Symfony6/web/app_dev.php/api/articles/:id.json
Bref c'est compliqué pour moi la :/
Sinon /:id.json devrait marcher ça revient à dire /:id. Mais je ne le précise nul part en effet
Je sais pas comment faire ça... si je dois créer un service ou autre avec des routeparams j'en sais rien du tout...
Et en console dans la partie Réseau, il ne m'indique pas que j'appelle http://localhost/Symfony6/web/app_dev.php/api/articles/:id.json
Bref c'est compliqué pour moi la :/
J'ai trouvé aucun tutoriel sur le net pour consommer une API REST Symfony avec Angular ou même consommer une API REST Symf avec Symfony lui-même.
Avez-vous des cours ou des tutoriels sur le sujet svp?
Merci
Avez-vous des cours ou des tutoriels sur le sujet svp?
Merci
Pour AngularJS que l'API REST soit développé sur Symfony ou une autre technologie ça ne change rien, c'est juste une URL à appeler...
https://docs.angularjs.org/tutorial/step_13
https://docs.angularjs.org/tutorial/step_13
J'ai fait une factory. Mon code ressemble à ça maintenant:
dans mon app.js :
et dans ma vue Twig:
Je sais pas s'il faut faire une promise ajax en plus pour que ça marche. Si c'est obligatoire de faire une promise pour que ça fonctionne? Parce que la actuellement ça marche pas...
dans mon app.js :
var app=angular.module("MonApplication", ['ngResource']);
app.controller("PostsController", function($scope,$resource,postFactory) {
$scope.posts = postFactory.query();
});
app.factory('postFactory', ['$resource',
function($resource) {
return $resource('http://localhost/Symfony6/web/app_dev.php/api/articles/:id.json', {}, {
query: {
method: 'GET',
params: {id: 'articles'},
isArray: true
}
});
}
]);
et dans ma vue Twig:
<h2>Parsage de l'API REST avec AngularJS</h2>
<div ng-controller="PostsController">
<article ng-repeat="p in posts">
<h2>{% verbatim %}{{p.title}}{% endverbatim %}</h2>
<p>{% verbatim %}{{p.content}}{% endverbatim %}</p>
</article>
</div>
Je sais pas s'il faut faire une promise ajax en plus pour que ça marche. Si c'est obligatoire de faire une promise pour que ça fonctionne? Parce que la actuellement ça marche pas...
Ok donc ça évolue la...
C'est parce que j'utilisai pas la bonne version des CDN. J'ai mis la même version 1.6.6 pour chaque CDN
j ai mis:
<script type="text/javascript" src="{{ asset ('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js') }}"></script>
<script type="text/javascript" src="{{ asset ('https://code.angularjs.org/1.6.6/angular-resource.js') }}"></script>
Maintenant il reconnait bien mon scope.
Maintenant il y a bien une requête Ajax qui se fait dans Symfony puisque Symfony me dit qu'il y a une erreur 404 sur la requete Ajax et qu'il n'a pas réussi à trouver l'url articles/articles.json
C'est parce que j'utilisai pas la bonne version des CDN. J'ai mis la même version 1.6.6 pour chaque CDN
j ai mis:
<script type="text/javascript" src="{{ asset ('https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js') }}"></script>
<script type="text/javascript" src="{{ asset ('https://code.angularjs.org/1.6.6/angular-resource.js') }}"></script>
Maintenant il reconnait bien mon scope.
Maintenant il y a bien une requête Ajax qui se fait dans Symfony puisque Symfony me dit qu'il y a une erreur 404 sur la requete Ajax et qu'il n'a pas réussi à trouver l'url articles/articles.json
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ok j'ai réussi à récupérer la liste complète des articles avec ce code:
dans app.js
et dans ma vue Twig:
Maintenant j'essaie de récupérer un article en particulier donc il faut que je rajoute un paramètre je sais pas comment faire...
dans app.js
var app=angular.module("monApplication", ['ngResource']);
app.factory('postFactory', ['$resource',
function($resource) {
return $resource('api/articles', {}, {
query: {method: 'GET', isArray: true}
});
}
]);
app.controller("PostsController", function($scope,postFactory) {
$scope.posts = postFactory.query();
});
et dans ma vue Twig:
<h2>Parsage de l'API REST avec AngularJS</h2>
<div ng-controller="PostsController">
<article ng-repeat="p in posts">
<h2>{% verbatim %}{{p.title}}{% endverbatim %}</h2>
<p>{% verbatim %}{{p.content}}{% endverbatim %}</p>
</article>
</div>
Maintenant j'essaie de récupérer un article en particulier donc il faut que je rajoute un paramètre je sais pas comment faire...
La dans mon cas, je voulai le faire depuis le même serveur pour tester un blog avec une archi REST et un client Angular sur la meme adresse et donc sur la même url (donc pas de headers à rajouter)
Je voulai juste savoir si cela était possible. Mais c'est vrai que ça ne représente pas un grand intéret de requeter sur le même serveur. C'est pour moi apprendre le fonctionnement de REST et Angular sans avoir à implémenter les bons headers et sans les CORS...
En tout cas merci de ta réponse