Mise à jour du TP pour l'accélérer

atelier-angular-17/codelab.json

@@ -3,7 +3,7 @@
   "format": "html",
   "prefix": "https://storage.googleapis.com",
   "mainga": "UA-49880327-14",
-  "updated": "2024-01-26T17:09:21+01:00",
+  "updated": "2024-02-02T21:31:03+01:00",
   "id": "atelier-angular-17",
   "duration": 135,
   "title": "Atelier angular 17",

atelier-angular-17/index.html

@@ -35,6 +35,7 @@
 <li>Lancer : <code>npm install</code></li>
 <li>Lancer : <code>npm start</code></li>
 </ol>
+<p>Bonne pratique : Faites des commits réguliers pour facilement revenir en arrière en cas de besoin</p>
 
 
       </google-codelab-step>
@@ -84,7 +85,7 @@ <h2 is-upgraded>bindToComponentInputs / withComponentInputBinding</h2>
 
       <google-codelab-step label="Partie 1 : Input binding (TP)" duration="15">
         <ol type="1">
-<li>Supprimer le fichier <code>utility.ts</code> et utiliser des @Input()</li>
+<li>Supprimer le fichier <code>utility.ts</code> et utiliser des @Input() avec l&#39;option de routing <code>bindToComponentInputs</code></li>
 </ol>
 
 
@@ -155,38 +156,12 @@ <h2 is-upgraded>Routing avec des standalone component</h2>
   // ...
 ] as Route[];
 </code></pre>
-<h3 is-upgraded>Provide un service à un ensemble de sous routes</h3>
-<p>Dans la configuration des routes, on va pouvoir utiliser le mot clé <strong>providers: [...]</strong> afin de fournir un service pour plusieurs routes et sous composants :</p>
-<pre><code language="language-ts" class="language-ts">// Main application:
-export const ROUTES: Route[] = {
-  // Lazy-load the admin routes.
-  {path: &#39;admin&#39;, loadChildren: () =&gt; import(&#39;./admin/routes&#39;).then(mod =&gt; mod.ADMIN_ROUTES)},
-  // ... rest of the routes
-}
-
-// In admin/routes.ts:
-export const ADMIN_ROUTES: Route[] = [{
-  path: &#39;&#39;,
-  pathMatch: &#39;prefix&#39;,
-  providers: [
-    //ici le service d&#39;admin est chargé pour tous les enfants 
-    AdminService,
-    {provide: ADMIN_API_KEY, useValue: 12345},
-  ],
-  children: [
-    {path: &#39;users&#39;, component: AdminUsersCmp},
-    {path: &#39;teams&#39;, component: AdminTeamsCmp},
-  ],
-}];
-</code></pre>
 <h2 is-upgraded>Bootstrap avec un standalone component</h2>
 <p>Pour supprimer l&#39;ensemble des modules, il va falloir modifier le bootstraping de l&#39;application en modifiant la méthode du fichier <strong>main.js</strong>. Les services nécessaires à l&#39;ensemble de l&#39;application seront fournis dans ce fichier.</p>
 <pre><code language="language-ts" class="language-ts">bootstrapApplication(PhotoAppComponent, {
   providers: [
-    provideRouter([/* app routes */]),
-    importProvidersFrom(
-      LibraryModule.forRoot()
-    ),
+    provideRouter([/* app routes */], {/* options comme withComponentInputBinding() par exemple*/}),
+    provideHttpClient()
     // ...
   ]
 });
@@ -198,9 +173,10 @@ <h2 is-upgraded>Bootstrap avec un standalone component</h2>
 
       <google-codelab-step label="Partie 2 : Standalone (TP)" duration="30">
         <ol type="1">
-<li>Migrez l&#39;application précédemment clonée vers le modèle full standalone (Plus aucun module).</li>
+<li>Migrez le composant <code>header</code> à la main.</li>
+<li>Utiliser la schematics <code>ng g @angular/core:standalone</code> pour migrer en automatique un maximum de choses.</li>
 <li>Réussite : Le comportement de l&#39;application est inchangé.</li>
-<li>Allez plus loin.</li>
+<li>Allez plus loin avec la suppression des modules de routing.</li>
 </ol>
 
 
@@ -359,9 +335,10 @@ <h3 is-upgraded>@Empty</h3>
 
       <google-codelab-step label="Partie 3 : Control flow (TP)" duration="20">
         <ol type="1">
-<li>Migrez l&#39;application précédemment clonée vers le modèle full control-flow.</li>
+<li>Migrez le composant <code>recipe</code> vers le modèle full control-flow.</li>
+<li>Supprimer le type <code>$any</code> et voir que maintenant le typage fonctionne !</li>
+<li>Utiliser la schematics <code>ng g @angular/core:control-flow</code> pour migrer en automatique un maximum de choses.</li>
 <li>Réussite : Le comportement de l&#39;application est inchangé.</li>
-<li>Allez plus loin.</li>
 </ol>
 
 
@@ -446,7 +423,9 @@ <h4 is-upgraded>Erreur possible - Types of property ‘xxx&#39; are incompatible
       <google-codelab-step label="Partie 4 : Formulaire typé (TP)" duration="30">
         <ol type="1">
 <li>Migrer le formulaire pour un formulaire typé</li>
+<li>Simplifier le HTML si c&#39;est possible (en autre pour les FormArrays)</li>
 </ol>
+<p>Note : Il existe du code en haut du composant fournit afin de gagner du temps.</p>
 
 
       </google-codelab-step>

atelier.md

@@ -18,6 +18,8 @@ Cet atelier permet de monter en compétence sur les dernières versions d'Angula
 3. Lancer : ```npm install```
 4. Lancer : ```npm start```
 
+Bonne pratique : Faites des commits réguliers pour facilement revenir en arrière en cas de besoin
+
 ## Partie 1 : Input binding (Théorie)
 
 ### Required
@@ -76,7 +78,7 @@ class YourComponent {
 ## Partie 1 : Input binding (TP)
 Duration: 0:15:00
 
-1. Supprimer le fichier `utility.ts` et utiliser des @Input()
+1. Supprimer le fichier `utility.ts` et utiliser des @Input() avec l'option de routing `bindToComponentInputs`
 
 ## Partie 2 : Standalone (Théorie)
 
@@ -166,34 +168,6 @@ export default [
 ] as Route[];
 ```
 
-#### Provide un service à un ensemble de sous routes
-
-Dans la configuration des routes, on va pouvoir utiliser le mot clé **providers: [...]** afin de fournir un service pour plusieurs routes et sous composants :
-
-```ts
-// Main application:
-export const ROUTES: Route[] = {
-  // Lazy-load the admin routes.
-  {path: 'admin', loadChildren: () => import('./admin/routes').then(mod => mod.ADMIN_ROUTES)},
-  // ... rest of the routes
-}
-
-// In admin/routes.ts:
-export const ADMIN_ROUTES: Route[] = [{
-  path: '',
-  pathMatch: 'prefix',
-  providers: [
-    //ici le service d'admin est chargé pour tous les enfants 
-    AdminService,
-    {provide: ADMIN_API_KEY, useValue: 12345},
-  ],
-  children: [
-    {path: 'users', component: AdminUsersCmp},
-    {path: 'teams', component: AdminTeamsCmp},
-  ],
-}];
-```
-
 ### Bootstrap avec un standalone component
 
 Pour supprimer l'ensemble des modules, il va falloir modifier le bootstraping de l'application en modifiant la méthode du fichier **main.js**. 
@@ -202,10 +176,8 @@ Les services nécessaires à l'ensemble de l'application seront fournis dans ce
 ```ts
 bootstrapApplication(PhotoAppComponent, {
   providers: [
-    provideRouter([/* app routes */]),
-    importProvidersFrom(
-      LibraryModule.forRoot()
-    ),
+    provideRouter([/* app routes */], {/* options comme withComponentInputBinding() par exemple*/}),
+    provideHttpClient()
     // ...
   ]
 });
@@ -216,9 +188,10 @@ Par exemple, ```provideRouter``` remplacera la configuration ```RouterModule.for
 ## Partie 2 : Standalone (TP)
 Duration: 0:30:00
 
-1. Migrez l'application précédemment clonée vers le modèle full standalone (Plus aucun module).
-2. Réussite : Le comportement de l'application est inchangé.
-3. Allez plus loin.
+1. Migrez le composant `header` à la main.
+2. Utiliser la schematics `ng g @angular/core:standalone` pour migrer en automatique un maximum de choses.
+3. Réussite : Le comportement de l'application est inchangé.
+4. Allez plus loin avec la suppression des modules de routing.
 
 ## Partie 3 : Control flow (Théorie)
 
@@ -406,9 +379,10 @@ devient :
 ## Partie 3 : Control flow (TP)
 Duration: 0:20:00
 
-1. Migrez l'application précédemment clonée vers le modèle full control-flow.
-2. Réussite : Le comportement de l'application est inchangé.
-3. Allez plus loin.
+1. Migrez le composant `recipe` vers le modèle full control-flow.
+2. Supprimer le type `$any` et voir que maintenant le typage fonctionne !
+3. Utiliser la schematics `ng g @angular/core:control-flow` pour migrer en automatique un maximum de choses.
+4. Réussite : Le comportement de l'application est inchangé.
 
 ## Partie 4 : Formulaire typé (Théorie)
 
@@ -533,8 +507,12 @@ Types of property 'count' are incompatible.
 Duration: 0:30:00
 
 1. Migrer le formulaire pour un formulaire typé
+2. Simplifier le HTML si c'est possible (en autre pour les FormArrays)
+
+Note : Il existe du code en haut du composant fournit afin de gagner du temps.
 
 ## Partie 5 : Signals (Théorie)
+
 ### Introduction
 
 **Signal** est une nouveauté Angular 16. Cela correspond à un observable qui va informer les consommateurs qui l'écoute lorsqu'il change de valeur. Il peut contenir n'importe quelle valeur. Un **signal** peut être **writable** ou **read-only**.

start/src/app/recipe/recipe-form/recipe-form.component.html

@@ -1,9 +1,8 @@
 <form [formGroup]="formGroup">
-    @if (!!formGroup.get('id')?.value) {
-      <h1>Editer</h1>
-    } @else {
+      <h1 *ngIf="!!formGroup.get('id')?.value; else createTpl">Editer</h1>
+    <ng-template #createTpl>
       <h1>Créer</h1>
-    }
+    </ng-template>
     <mat-stepper orientation="vertical">
       <mat-step>
         <ng-template matStepLabel>Metadata de la recette</ng-template>
@@ -16,9 +15,7 @@ <h1>Créer</h1>
             <mat-form-field>
               <mat-label>Type</mat-label>
               <mat-select formControlName="type">
-                @for (type of recipeTypes; track type) {
-                  <mat-option [value]="type">{{type}}</mat-option>
-                }
+                <mat-option *ngFor="let type of recipeTypes" [value]="type">{{type}}</mat-option>
               </mat-select>
             </mat-form-field>
             <section class="actions">
@@ -41,8 +38,8 @@ <h2>Liste des ingrédients :</h2>
                 </tr>
               </thead>
               <tbody>
-                @for (ingredient of ingredientsForm.controls; track ingredient; let i = $index) {
                   <tr
+                    *ngFor="let ingredient of ingredientsForm.controls; let i = index"
                     [formGroupName]="i">
                     <td>
                       <mat-form-field>
@@ -59,10 +56,9 @@ <h2>Liste des ingrédients :</h2>
                     <td><mat-form-field>
                       <mat-label>Unité de mesure</mat-label>
                       <mat-select formControlName="unit">
-                        @for (unit of unitOfMeasure; track unit) {
                           <mat-option
+                          *ngFor="let unit of unitOfMeasure"
                           [value]="unit">{{unit}}</mat-option>
-                        }
                       </mat-select>
                     </mat-form-field>
                   </td>
@@ -72,7 +68,6 @@ <h2>Liste des ingrédients :</h2>
                     </button>
                   </td>
                 </tr>
-              }
             </tbody>
           </table>
         </section>
@@ -95,8 +90,7 @@ <h2>Liste d'instructions :</h2>
               </tr>
             </thead>
             <tbody>
-              @for (instruction of instructionsForm.controls; track instruction; let i = $index) {
-                <tr>
+                <tr *ngFor="let instruction of instructionsForm.controls; let i = index">
                   <td>
                     <mat-form-field>
                       <mat-label>Instruction</mat-label>
@@ -108,7 +102,6 @@ <h2>Liste d'instructions :</h2>
                     fontIcon="clear"></mat-icon></button>
                   </td>
                 </tr>
-              }
             </tbody>
           </table>
         </section>