Signaler

AngularJS et API REST [Résolu]

Posez votre question Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - Dernière réponse le 30 sept. 2017 à 19:50 par Garig
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


Utile
+1
plus moins
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.
Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - 26 sept. 2017 à 00:06
Oui à la base je voulai faire mon client Angular depuis une autre adresse. Donc la il faut implémenter les bons headers pour le allow-cross-origin et les CORS. Mais j'en suis pas encore à ce stade...

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
Répondre
Donnez votre avis
Utile
+0
plus moins
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:
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?
KX 14832Messages postés samedi 31 mai 2008Date d'inscription ModérateurStatut 10 octobre 2017 Dernière intervention - 30 sept. 2017 à 11:52
Bonjour,

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 ?
Répondre
Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - 30 sept. 2017 à 12:10
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 :/
Répondre
Donnez votre avis
Utile
+0
plus moins
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
KX 14832Messages postés samedi 31 mai 2008Date d'inscription ModérateurStatut 10 octobre 2017 Dernière intervention - 30 sept. 2017 à 12:41
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
Répondre
Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - 30 sept. 2017 à 12:44
Ok merci je crois que je vais lire la doc en profondeur et je reposterais ici plus tard ...
Répondre
Donnez votre avis
Utile
+0
plus moins
J'ai fait une factory. Mon code ressemble à ça maintenant:

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...
Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - 30 sept. 2017 à 16:57
Quand j'inspecte avec le Batarang sous Chrome, il me dit que "this scope has no models" je comprends pas pourquoi... Pourtant il y a des données à l'intérieur du scope la...
Répondre
Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - 30 sept. 2017 à 17:18
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
Répondre
Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - 30 sept. 2017 à 17:31
Avec le Batarang, dans mon scope:

posts : []

la variable posts est un tableau vide
Répondre
Donnez votre avis
Utile
+0
plus moins
Ok j'ai réussi à récupérer la liste complète des articles avec ce code:

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...
Garig 64Messages postés vendredi 12 juin 2009Date d'inscription 30 septembre 2017 Dernière intervention - 30 sept. 2017 à 19:50
En effet je rencontre un problême pour passer le paramètre dans mon lien

<h2><a href={{ path("get_place",{ 'id': {% verbatim %}{{p.id}}{% endverbatim %} }) }}>{% verbatim %}{{p.name}}{% endverbatim %}</a></h2>


Est ce que je dois utiliser fosjsrouting ou un bundle dans ce genre pour faire ça?
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !