AngularJS et API REST

Résolu/Fermé

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 - Modifié le 25 sept. 2017 à 23:54
Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 - 30 sept. 2017 à 19:50

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

A voir également:

AngularJS et API REST
Naz api - Guide
Supported api 3 en français - Forum Mobile
The native api dll was not found ✓ - Forum VirtualBox
Api darkibox - Guide
Steam api dll - Forum Jeux vidéo

5 réponses

Réponse 1 / 5

KX Messages postés 16733 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 31 janvier 2024 3 015
25 sept. 2017 à 23:56

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 Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
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éponse 2 / 5

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
Modifié le 30 sept. 2017 à 11:54

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 Messages postés 16733 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 31 janvier 2024 3 015
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 ?

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6 > KX Messages postés 16733 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 31 janvier 2024
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éponse 3 / 5

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
Modifié le 30 sept. 2017 à 12:36

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 Messages postés 16733 Date d'inscription samedi 31 mai 2008 Statut Modérateur Dernière intervention 31 janvier 2024 3 015
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

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
30 sept. 2017 à 12:44

Ok merci je crois que je vais lire la doc en profondeur et je reposterais ici plus tard ...

Réponse 4 / 5

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
Modifié le 30 sept. 2017 à 15:12

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 Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
Modifié le 30 sept. 2017 à 16:58

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...

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
Modifié le 30 sept. 2017 à 17:29

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

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
30 sept. 2017 à 17:31

Avec le Batarang, dans mon scope:

posts : []

la variable posts est un tableau vide

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Garig Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
Modifié le 30 sept. 2017 à 17:55

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 Messages postés 63 Date d'inscription vendredi 12 juin 2009 Statut Membre Dernière intervention 30 septembre 2017 6
Modifié le 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?

Discussions similaires

steam_api.dll introuvable

API plaques d'immatriculations

problemes connus avec le pilote graphique

Récupérer cours de bourse pour un projet

Qu'est-ce que le processus "dolbyDAX2API"?

Discussions similaires

Newsletters