00:00Bonjour à tous et bienvenue dans cette vidéo où nous allons nous occuper de créer nos pages admin, donc nos
00:06composants admin.
00:07Alors si on reprend la structure de notre crowbar, on a un layout, donc un composant, on a une dashboard,
00:18composant également,
00:31je vais simplement y mettre un préfixe, vous allez voir aussi que c'est très facile de faire du préfixage
00:37dans le routeur d'Angular,
00:40donc je vais simplement les coller comme ça, ça va être des routes enfants, on connaît la méthode, et vous
00:45allez voir que c'est assez simple.
00:48Donc, admin, dashboard, user, cocktail, index, edit, add, comment dire, ouais, cité, on va faire un peu comme la dernière
00:57fois,
00:58je vais utiliser ici les trois, là je vais les faire, index, edit, add, ensuite pour cocktail, je vais faire
01:08index,
01:10je vais faire une page edit, qui va recevoir ou non un paramètre, et pas de delete aussi, comme ça
01:19on va se simplifier un peu la chose,
01:22et puis ça nous permettra de voir aussi deux choses bien différentes.
01:25Bien sûr, après, il faudra fermer, se connecter à l'API, blablabla, blablabla.
01:30C'est donc parti pour créer tous les composants nécessaires, ceux qui sont dans notre layout.
01:35Alors, le routeur public, j'en ai plus besoin, je me situe dans l'admin.
01:43Alors évidemment, dans l'admin, je vais également avoir un layout.
01:46Donc, je fais mon layout, RSC, bam, class name.
01:55Alors si j'ai besoin de faire un truc spécifique, je vais juste changer, hop, layout, ici, mon composant.
02:05Pourquoi il a cliqué deux fois cet abruti, évidemment, hop, voilà.
02:11Class name égale à layout, ok.
02:17Ici, je me fais de suite une dashboard, .js, hop, RSC, blablabla.
02:28Tac, class name, hop, bas de majuscule, ah ouais, bon, celle-là, je la mets en simple.
02:39Ça, c'est pas bien méchant, on s'en fiche un peu.
02:41Quoique, non, je vais quand même faire du propre.
02:45Je reprends ici, donc j'ai mon layout, j'ai ça.
02:49Je vais me faire quand même un dossier user et un dossier cocktail.
02:52Comme ça, à l'intérieur, j'y range tous les composants dont j'ai besoin.
02:56Nouveau fichier, euh, pardon, dossier, hop, user et folder cocktail.
03:08Ok.
03:09Évidemment, vous avez compris que du côté architecture, je pousse le truc à l'extrême,
03:13histoire de parcourir un maximum d'objets.
03:16Bien évidemment, vous n'êtes pas obligé de reprendre les structures comme ça,
03:19on n'est pas obligé de faire tout ce genre de manipulation, on pouvait tout mettre.
03:24D'un coup, je trouve que c'est plus propre, plus structuré,
03:28et que derrière, on s'y retrouve mieux.
03:31Le sujet principal est toujours le même,
03:33c'est pouvoir maintenir notre code plus facilement,
03:36notre applicatif, le faire évoluer plus facilement.
03:39Si tout est découpé, c'est quand même plus simple d'intervenir
03:42sans prendre le risque d'impacter une autre partie,
03:45et donc de péter quelque chose qu'on ne voulait pas péter.
03:49Ok, ici, new file dans user,
03:54donc on a l'index.js,
03:56ah ben non, parce que l'index, je vais l'utiliser.
04:01Alors, je ne vais pas jouer à index, i majuscule et i minuscule,
04:09ça va être un peu bizarre,
04:11donc dedans, je vais l'appeler user.js,
04:14ça sera notre composant par défaut.
04:20RSC, tac, tac, hop, class name, user,
04:31ok, ici, new file, je vais faire useredit.js,
04:41RSC, ça serait bien qu'il nous pompe des générateurs,
04:44alors je sais qu'il y en a des générateurs automatiques en ligne de commande,
04:48mais,
04:51voilà, c'est encore amené à un module à part,
04:53ça aurait été bien qu'il puisse l'intégrer, ça aurait été sympa.
04:56le useredit.js,
05:01RSC, boom,
05:04hop,
05:06class name,
05:07autant pour moi,
05:08qu'est-ce qu'il me fait,
05:09j'ai pas besoin de ça, merci,
05:11class name,
05:13égale,
05:16hop, useredit,
05:17ok, donc ça, c'est bon,
05:20pour l'instant, je route pas,
05:21je ne mets que des parties,
05:23dans cocktail,
05:25hop,
05:26on a cocktail.js,
05:31voilà,
05:33RSC,
05:34hop,
05:36tac,
05:38class name,
05:39égale,
05:40cocktail,
05:43et on va faire,
05:45new file,
05:46cocktail.js,
05:51RSC,
05:56class name,
05:59égale,
06:00cocktail,
06:01edit,
06:02ok,
06:03alors,
06:04comme je vous ai dit, je mets les class names directement,
06:06reflex, comme ça le composant est propre,
06:08ça ne veut pas dire que je ne vais pas dégommer la div pour faire autre chose,
06:11comme on avait fait dans l'entête,
06:14d'ailleurs,
06:15tant que j'y pense,
06:17il me faudra des composants,
06:19si on reprend les structures que je fais jusqu'ici,
06:22j'ai besoin,
06:24dans mon layout,
06:25d'y mettre l'admin header en haut,
06:28et le menu,
06:31la sidebar,
06:31à gauche.
06:33Donc,
06:34ça c'est bon,
06:36on fera du ménage après,
06:38ici,
06:39donc dans component,
06:41je me fais un nouveau dossier,
06:43qui est admin,
06:45dedans,
06:45j'y mets,
06:47header,
06:51.js,
06:54qui est également un composant,
06:57hop,
06:59class name,
07:00à header,
07:01histoire de ne pas avoir de confusion,
07:03et ici,
07:05je me fais le side menu.js,
07:09ok,
07:11rsc,
07:14tac,
07:15class name,
07:16égal,
07:17side menu.js,
07:20bon,
07:21alors,
07:21reprenons un petit peu,
07:23je ferme public,
07:25ici aussi,
07:27donc dans les pages,
07:27j'ai un dossier admin,
07:29avec la dashboard,
07:31et le layout,
07:32je reprends ici,
07:34donc j'ai mon dossier admin,
07:36dashboard,
07:38et mon layout ici,
07:40impeccable,
07:41ensuite,
07:42j'ai un dossier user,
07:43où je retrouve user,
07:44user add,
07:45et user edit,
07:48ici,
07:49avec tout ça,
07:51le même délire,
07:53pour la partie cocktail,
07:55évidemment,
07:57et,
08:00pour assembler tout ça,
08:01et pour avoir un layout correct,
08:03j'ai mon header,
08:05et mon side menu,
08:06donc dans les composants,
08:08voilà,
08:09donc là,
08:09on a la structure de fichier,
08:12qu'on va utiliser,
08:13on a généré tous les éléments,
08:14dont on avait besoin,
08:16et donc,
08:17dans la prochaine vidéo,
08:19on va s'occuper du routage,
08:21de tout ça,
08:22la mise en place du routeur,
08:23le layout,
08:24les routes enfants,
08:25les routes préfixées,
08:26etc,
08:26etc,
08:28là,
08:28on a juste mis en place,
08:29une structure de fichier,
08:31qui,
08:33qui nous permettra,
08:34ou va nous permettre,
08:36de faire quelque chose,
08:37de plus structuré,
08:39évidemment,
08:40vous doutez bien,
08:41que pour les questions,
08:42de routage,
08:42et quelque chose,
08:43de plus facile,
08:45il va falloir,
08:45que je me cogne,
08:46des index,
08:47de faire mes exports,
08:49et simplifier,
08:50toutes mes routes,
08:51comme on avait fait,
08:53voilà pour cette partie,
08:54prochaine vidéo,
08:55le routage,
08:56de la partie admin,
08:58mine.
Commentaires