diff --git a/resources/docs/docs/assets/button-primary.png b/resources/docs/docs/assets/button-primary.png new file mode 100644 index 0000000000000000000000000000000000000000..b1e209d805c278560c4c81734dd9e2bbc58a0362 Binary files /dev/null and b/resources/docs/docs/assets/button-primary.png differ diff --git a/resources/docs/docs/assets/navbar-component.png b/resources/docs/docs/assets/navbar-component.png new file mode 100644 index 0000000000000000000000000000000000000000..c5e2173e61fa193d2ad8260eb2a2495301f39df6 Binary files /dev/null and b/resources/docs/docs/assets/navbar-component.png differ diff --git a/resources/docs/docs/assets/navbar-works.png b/resources/docs/docs/assets/navbar-works.png new file mode 100644 index 0000000000000000000000000000000000000000..f30a1010d29d67d9ced5230aca9c040b4084f9d1 Binary files /dev/null and b/resources/docs/docs/assets/navbar-works.png differ diff --git a/resources/docs/docs/premiere-page/app-component.md b/resources/docs/docs/premiere-page/app-component.md index c1dc271ee4d839c756d56377a4ba06f707a08b4d..47786c948d8e35375a9b8a5c184a765bfb12254f 100644 --- a/resources/docs/docs/premiere-page/app-component.md +++ b/resources/docs/docs/premiere-page/app-component.md @@ -1 +1,25 @@ # Le composant app-component +Ce composant est le composant racine de ton application. +On l'appelle souvent le *shell* car c'est celui qui est chargé en premier et c'est celui qui permet de charger les autres. + +## Etape 1 : On supprime tout !!! +Comme tu l'as vu Angular a deja mis plein de choses dans ce composant pour coder ta première page au lancement du projet. +Comme le titre de cette section l'indique : on peut tout enlever ! + +Va dans le `app.component.html` et supprime tout ! Mais vraiment tout ! + +## Etape 2 : l'interpolation +Dans le fichier `app.component.ts`, Angular a deja mis une variable `title = 'le nom de ton app';` +Cette variable est accessible depuis le fichier htlm de ton app.component, c'est ce qu'on appelle l'interpolation 😊 + +A toi de jouer ! Va dans le fichier `app.component.html` et ajoute +```angular2html +<h1>Bienvenue sur ma super app : {{title}}</h1> +``` +> Le html utilise la *double moustache* {{}} pour afficher les variables du ts. + +Rend toi sur [http://localhost:4200/](http://localhost:4200/){:target="_blank"} et *magiiie*, tu as bien un titre qui prend en compte ta variable ! + +> By the way... +> Est ce que tu as remarqué que tu n'avais pas a relancer ton projet pour que l'affichage change ? +> C'est ce qu'on appelle le **hot reload** diff --git a/resources/docs/docs/premiere-page/navbar.md b/resources/docs/docs/premiere-page/navbar.md index b7fa7a25078cce487a30b660ee3a047e564cf39f..053c59412896bc89d8bd741013df5c0420dde051 100644 --- a/resources/docs/docs/premiere-page/navbar.md +++ b/resources/docs/docs/premiere-page/navbar.md @@ -1,34 +1,108 @@ # Ton premier composant +Comme on le dit souvent, en Angular **tout est composant** -## Disclamer -On va faire beaucoup de choses, ça va te paraitre un peu compliqué mais pas de panique ! -On est la pour vous aider, et si tu ne comprends pas tout ce n'est pas grave du tout !! - -## Intellij -La base de tout c'est un bon IDE, on te conseille Intellij si tu n'en a pas deja un -Tu trouvera le lien de téléchargement directement sur leur [site](https://www.jetbrains.com/fr-fr/idea/download) - -## Docker -La base de données a déjà été remplie et le backend a été codé pour toi :) Pour que les lancer, on a besoin de docker. -Rend toi sur le [site officel](https://www.docker.com/products/docker-desktop/) pour le télécharger. - -## La BDD et le backend -Tu trouvera le backend [ici](https://gitlab.takima.io/school/formation-angular/angular-lab) -### 1. Clone le projet -Place toi dans le repertoire de ton choix sur ton ordinateur et ouvre une interface de commande. -Tape la commande suivante : -```bash -git clone git@gitlab.takima.io:school/formation-angular/angular-lab.git +Alors ça y est, c'est le moment pour toi de coder ton tout premier composant !! + +## En ligne de commande +Pour générer un composant en angular, on le fait en ligne de commande +<pre> +ng generate component <em>navbar</em> +</pre> + +Si tu regardes dans ton arborescence de fichier tu dois bien avoir un nouveau composant qui s'appelle *navbar* comme ça: + +<img src="../assets/navbar-component.png" alt="drawing" width="318"/> + +>*navbar* c'est le nom de ton composant ! Tu aurais pu l'appeler *menu* *bar* ou autre ! + +> ng generate composant *quelquechose* c'est un peu long a taper quand on a plein de composants à créer. +> On utilise souvent le raccourci `ng g c quelquechose` + +## On affiche le composant +Super le composant est créer, maintenant il faut l'afficher ! +Si tu vas dans ton `navbar.component.ts`, tu dois avoir: +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-navbar', + standalone: true, + imports: [], + templateUrl: './navbar.component.html', + styleUrl: './navbar.component.scss' +}) +export class NavbarComponent { +} +``` +> 💡 Pour rappel +> - le `selector` permet d'injecter ce composant dans les fichier html d'autres composants +> - le `imports` te permet d'importer tout ce dont tu as besoin pour faire fonctionner le composant +> - le `templateUrl` relie le ts au fichier html +> - le `styleUrl` relie le ts au fichier scss + +On va utiliser ce qui est indiquer dans `selector` pour injecter notre navbar dans le `app.component` + +Rend toi dans le fichier `app.component.html` et supprime la balise `<h1>Bienvenue sur ma super app : {{title}}</h1>`. +Maintentant, ajoute +```angular2html +<app-navbar></app-navbar> +``` +><h2> ⚠️ Peu importe ce que tu utilises dans un composant il faudra l'importer ! </h2> + +Rend toi dans le `app.component.ts`: +- ajoute le composant `NavbarComponent` dans la liste des imports +- ajoute l'import en haut du fichier : `import { NavbarComponent } from "./navbar/navbar.component";` + +Ton fichier doit ressembler à ça : +```ts +import { Component } from '@angular/core'; +import { RouterOutlet } from '@angular/router'; +import { NavbarComponent } from "./navbar/navbar.component"; + +@Component({ + selector: 'app-root', + standalone: true, + imports: [RouterOutlet, NavbarComponent], + templateUrl: './app.component.html', + styleUrl: './app.component.scss' +}) +export class AppComponent { ``` -### 2. Ouvre le projet dans ton IDE -### 3. Lance le projet -Dans le terminal de Intellij lance la commande suivante -```bash -docker compose up + +Si tu retournes sur [http://localhost:4200/](http://localhost:4200/){:target="_blank"} , tu dois avoir: +<img src="../assets/navbar-works.png" alt="drawing"/> + +***Congraaats ton composant fonctionne*** ⭐ + +## La navbar +Je ne sais pas si tu te souviens mais au debut des install, on a mis *bootstrap*, une lib qui te permet de faire des composants super rapidement +> Tu peux aller checker la doc par [là](https://getbootstrap.com/docs/4.0/components/alerts/){:target="_blank"} pour voir tout ce que tu peux faire avec !! + +### ✔️ On vérifie d'abord que bootstrap est bien installé + +- Rends toi dans le html de ton composant navbar et supprime la balise `<p>navbar works!</p>` +- Ajoute un bouton bootstrap : +```html +<button type="button" class="btn btn-primary">Primary</button> ``` -<br/> -#### Rend toi sur la [documentation](http://localhost:8080/swagger-ui/index.html#/) de ton backend et lance un appel GET pour vérifier que tout fonctionne ⭐ -<br/> +Tu dois avoir ce bouton qui s'affiche : +<img src="../assets/button-primary.png" alt="drawing"/> + +> 🥶 Si ton bouton n'est pas bleu, c'est que bootstrap est mal importé ! Appelle nous ! + +### 🎨 On fait une jolie navbar + +On utilise la navbar de bootstrap comme expliquer ici [ici](https://getbootstrap.com/docs/4.0/components/navbar/){:target="_blank"} +Tu peux maintenant supprimer ton bouton bleu et le remplacer par: +```angular2html +<nav class="navbar navbar-light navbar-expand bg-light ps-5"> + <a class="navbar-brand">Navbar</a> + <a class="nav-item nav-link" href="#">Accueil</a> +</nav> +``` +***Congraaats tu as une jolie navbar !*** ⭐ + + + -*Respire un bon coup, tu as fait le plus dur et le plus boring* 💪