CRUD (Spring + Angular) : Connexion avec le backend

alors je viens d'ouvrir le projet avec

visual studio code qui est un très beau

ni deux que je conseille pas ce qu'il ya

de tout un système de plugins de package

est très très bien fait tout est intégré

même plus et gérer votre ripaud guide à

l'intérieur enfin bref je vous conseille

cet éditeur donc là voilà j'ai

l'arborescence de mon projet avec avec

les routes le style et cetera lattes

module là où on met toutes les

dépendances les imports du projet les

providers et c'est ce qu'on va d'abord

faire c'est créer un service donc c'est

la même notion de service que pour

sprint spring pardon le service cela

servira nos récupérer les données les

données métiers les données sur les

voitures

donc pour créer un service vous avez le

site donc la doc dans bullard qui vous

indique comment faire donc cng espace

generates service espace le nom du

service

donc on évite de mettre héros service

parce que anguilard va le faire pour

vous il valeur ajoutée après vous allez

voir donc si on a bien compris donc cng

générait service garage donc là voilà

c'est très rapide pour le coup et quand

on revient d'un projet envers donc

angulaire nous donnera nous a rajouté

mon garage point service poin ts comme

ça on sait très bien faire on n'a pas

besoin de rajouter garage service

ongulaire le fait déjà pour vous et

maintenant avec ce service convient de

créer on va directement à les attaquer

notre api rest

côté anglais enfin côté spring pardon

pour ça on va déclarer d'url de notre

api donc mots-clés read only happy ya eu

et rennes voilà donc c'est en http de

points hh localhost or 80 80 notre

endpoint

cars qui nous permet de récupérer la

liste des voitures donc c'est slash cars

voilà donc maintenant il faut que

j'apporte le module http clients' pour

faire des requêtes http vers notre api

from anguilard recula c'est common slash

acheter des pays voilà ok j'injecte ça

j'ai un gect http kayhan dans le

constructeur jeudi que ces deux types

http clients'

voilà maintenant quatre cars ont créé

une méthode qui va retourner

donc 10 http clients' on voyait là on a

toutes les requêtes on a utilisé la

roquette guette et on va donc faire on

va dire tu me fais de roquettes vers mon

appétit url qui est déclarée juste au

dessus plus endpoint car voilà on va

concat année les deux streams et on va

faire un appel guette vers cette url et

maintenant je vais appeler donc ces

méthodes qui sont déclarés dans le

service dans mon compagnon

donc pour ça il faut d'abord que

j'apporte les services logiquement

hockey garage service from là je lui

mets le chemin donc service up ici donc

je rajoute providers pour rider ce qui

est un tableau donc on va rajouter on va

dire que il va utiliser la dépendance de

garage service voilà

on va donc déclaré le constructeur

on va le dire que private on va lui

injecter la dépendance garage services

puissent l'utiliser

voilà on va faire quelque chose de

pratique aussi on va importer le limit

line qui nous permet en fait d'avoir des

méthodes de kolda pour savoir quand la

la vue est initialisée quand la vue

quand le compo nantes est initialisé en

fin de compte

donc c'est à dire que vous allez voir

que je j'apporte van in it from me

semble que c'est anguilard corps en goût

des records ça suffit je lui dis que ma

classe ap component implement home in it

voilà et l'a donc imam est une erreur il

me dit une colline claimcenter face aux

knicks et parce que je dois rajouter la

méthode ngn unite

voilà et donc cette méthode sera appelée

à l'initialisation du component donc je

mets un petit log in it

voilà on au service cas présent on va

déclarer donc comme propriété donc cars

de type object ce sont les voitures

qu'on cherche à récupérer object voilà

on va pas s'embêter pour l'instant avec

le data model ce qu'on cherche juste à

démontrer c'est que anglars arrive à

accéder à la paix il reste combien

développer juste avant c'est pour ça que

je voudrais pas de data mode ensuite je

retourne dans le ngn inite

là on va appeler le service donc la

méthode convient déclaré dans un garage

service c'est-à-dire guette cars auquel

on va sauf tribe comme garzon ont

retourné un observable on va observer

les données et donc c'est pour ça qu'on

fait un seul skies voilà donc data on va

dire que c'est de donner qu'on récupère

et je voulais quelque chose

l'opérateur araud voilà donc on va

passer dans ce call back on va dire que

dix cars est égale data voilà on vient

de récupérer notre ressource voiture

donc pour résumer qu'est ce qu'on a dans

le ngn inite c'est à dire quand le

composant va s'initialiser on va les

récupérer la liste des voitures auprès

du service donc maintenant on va aller

dans notre vu ce qu'on va faire c'est

qu'on va retirer tout ça on en a pas

besoin

on va encore une fois sans vraiment

mettre deux structures faire ça un peu à

la bourre 1 on va construire une liste

ou voilà notre liste et on va utiliser

donc la directive angulaire suivante

lg fort voilà où je déclare let car of

cars pour chacune des voitures on va

afficher notre voiture

voilà avec les double doubles et

l'accolade comme ça on va déjà essayer

ça et on va compiler pour voir si ça

marche on re compile avec la commande

ng servent et si la compilation est

bonne je retourne dans le navigateur

ok c'est parfait voilà frêche

donc voilà on peut voir qu'on a une

erreur donc la peine apparemment à notre

api cars est bloqué pour des raisons de

sécurité donc ce qu'il faut faire si

retourner dans notre code java il faut

rajouter une autre en notation

andy cross origines avec cette petite

étoile

donc on relance notre application java

on relance aux serveurs tom cat et on va

voir si cette erreur a disparu je pense

pas qu'ils aient besoin de relancer de

faire un lg servent encore une fois donc

est-ce qu'il est le bruit c'est bon de

savoir a lancé donc là on a plus

l'erreur on a bien learning qu'on avait

mis tout à l'heure dans notre peau

tendue l'a donc comme on vient de

relancer le serveur le cherche postman

ou et postman ici non donc comme on a

relancé notre code java il faut ajouter

des voitures sinon le guette

comme vous pouvez le voir autour d'un

tableau vinh donc on va ajouter une audi

[Musique]

ainsi que non onze fois la mercedes donc

dans postman on récupère bien au de

ressources et donc si on revient ici

normalement on va voir la liste des

voitures qui s'affiche donc on peut voir

que ce sont des types object on va

remédier à ça pour ça on va dans le html

voilà on me dit d'affiché pour l'instant

notre objet cardon qui est de type

object donc on va lui dire affiche mois

brad juste en dessous car point modèle

et on va voir ce qu'on obtient ensuite

voilà donc là on peut dit

on a vraiment réussi à connecter la

partie back spring et la partie front

angula on convient de vraiment de

franchir une étape

on arrive à connecter le front et le

back