Skip to content
This repository was archived by the owner on Jul 16, 2022. It is now read-only.

Commit 0ac2bff

Browse files
RomakitaRomakita
committed
Generate sources
1 parent 94a2383 commit 0ac2bff

15 files changed

+592
-21
lines changed

‎dist/Instructor/html/tp1-installation.html

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,10 +136,15 @@ <h2>Installation d'Angular Material</h2>
136136
<pre><code class="bash">npm install --save @angular/material
137137
</code></pre>
138138
<p>Puis rajouter dans le fichier <code>app.module.ts</code> la dépendence du module comme suivant :</p>
139-
<pre><code class="typescript">import { MaterialModule } from '@angular/material';
139+
<pre><code class="typescript">import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
140+
import { MaterialModule } from '@angular/material';
140141
// other imports
141142
@NgModule({
142-
imports: [MaterialModule],
143+
...
144+
imports: [
145+
BrowserAnimationsModule,
146+
MaterialModule
147+
],
143148
...
144149
})
145150
export class AppModule { }
@@ -148,6 +153,15 @@ <h2>Installation d'Angular Material</h2>
148153
les icônes de la librairie Material :</p>
149154
<pre><code class="html">&#x3C;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
150155
</code></pre>
156+
<p>Enfin dans le <code>styles.css</code>, ajouter le thème :</p>
157+
<pre><code class="css">@import '~@angular/material/prebuilt-themes/indigo-pink.css';
158+
159+
body {
160+
padding: 0;
161+
margin:0;
162+
font-family: Roboto,"Helvetica Neue",sans-serif;
163+
}
164+
</code></pre>
151165
<h2>Générer des Composants, Directives, Pipe, etc...</h2>
152166
<p>Vous pouvez utiliser la commande <code>ng generate</code> (ou <code>ng g</code>) pour générer des composants Angular : </p>
153167
<pre><code class="bash">ng generate component my-new-component

‎dist/Instructor/html/tp4-formulaires-routes.html

Lines changed: 138 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,144 @@ <h1>TP 4</h1>
108108
<blockquote>
109109
<p>Formulaires et routes</p>
110110
</blockquote>
111-
<p>Dans ce TP, nous allons créer les formulaires de connexion et d'authentification.</p>
111+
<p>Dans ce TP, nous allons créer les formulaires de connexion et d'authentification.
112+
Pour ce faire nous aurons besoin de mettre en place la module de routage d'Angular
113+
pour afficher plusieurs pages.</p>
114+
<h2>Installation</h2>
115+
<p>Installez le module <code>@angular/router</code> avec la commande suivante :</p>
116+
<pre><code class="bash">npm install -g @angular/router
117+
</code></pre>
118+
<h2>Création des pages et des routes</h2>
119+
<p>Nous devons maintenant créer les composants
120+
Déclarez ensuite les routes dans un nouveau fichier <code>app.routes.js</code>. Nous devrons créer les routes suivantes :</p>
121+
<table>
122+
<thead>
123+
<tr>
124+
<th>Page</th>
125+
<th>Route</th>
126+
<th>Composant</th>
127+
<th>Description</th>
128+
</tr>
129+
</thead>
130+
<tbody>
131+
<tr>
132+
<td>Accueil</td>
133+
<td>/</td>
134+
<td>HomeComponent</td>
135+
<td>Affiche un message de bienvenu avec un bouton rediregeant l'utilisateur vers la page de connexion. Une authentifié, cette page affiche la liste des utilisateurs.</td>
136+
</tr>
137+
<tr>
138+
<td>Login</td>
139+
<td>/login</td>
140+
<td>LoginComponent</td>
141+
<td>Formulaire d'authentification</td>
142+
</tr>
143+
<tr>
144+
<td>Signup</td>
145+
<td>/signup</td>
146+
<td>SigninComponent</td>
147+
<td>Formulaire d'inscription</td>
148+
</tr>
149+
</tbody>
150+
</table>
151+
<ol>
152+
<li>Commencez par créer les composants énoncés dans le tableau. </li>
153+
<li>Ensuite, vous devrez écrire vos routes dans le fichier <code>app.routes.js</code> en fonction de tableau ci-dessus.</li>
154+
<li>Importez vos routes dans votre application <code>app.module.js</code>comme suivant :</li>
155+
</ol>
156+
<pre><code class="typescript">import { ROUTES } from "./app.routes";
157+
import { RouterModule } from "@angular/router";
158+
159+
@NgModule({
160+
...
161+
imports: [
162+
RouterModule.forRoot(ROUTES)
163+
],
164+
...
165+
}
166+
</code></pre>
167+
<p>Enfin vous devez indiquer au routeur où seront afficher les vues dans votre application.</p>
168+
<pre><code class="html">&#x3C;router-outlet>&#x3C;/router-outlet>
169+
</code></pre>
170+
<h3>Page d'accueil</h3>
171+
<p>La page d'accueil devra afficher la liste des utilisateurs une fois authentifié.
172+
Commencez par réintégrer la liste des utilisateurs dans HomeComponent. Nous nous occuperons des règles d'affichage plus tard.</p>
173+
<h3>Page d'authentification</h3>
174+
<p>Nous allons maintenant utiliser les API Formulaires d'Angular. Nous utiliserons ici les <code>formulaires pilotés par le template</code>
175+
mais vous êtes libre d'utiliser la seconde approche.</p>
176+
<p>Le formulaire de connexion présentera les éléments suivants :</p>
177+
<ul>
178+
<li>Un champ e-mail, qui est un champ obligatoire et doit respecter le pattern e-mail,</li>
179+
<li>Un champ mot de passe, qui est un champ obligatoire,</li>
180+
<li>Un bouton de connexion, actif que si toutes les données saisies sont valides,</li>
181+
<li>Un bouton <code>ou m'enregister</code> pour rediriger l'utilisateur vers la page d'inscription.</li>
182+
</ul>
183+
<p>N'oubliez pas d'afficher les messages en fonction du type d'erreur du champs associé.</p>
184+
<p>Voici un exemple du formulaire attendu en Material :</p>
185+
<p><img src="images/login.png" alt="max-300"> </p>
186+
<h3>Le service Authenticate</h3>
187+
<p>Une fois le formulaire réalisé, vous devrez créer le service <code>AuthenticateService</code> (<code>ng g service authenticate</code>) qui aura pour fonction d'authentifier
188+
l'utilisateur. </p>
189+
<p>Ce service exposera les méthodes suivantes :</p>
190+
<table>
191+
<thead>
192+
<tr>
193+
<th>Method</th>
194+
<th>Descripton</th>
195+
</tr>
196+
</thead>
197+
<tbody>
198+
<tr>
199+
<td><code>authenticate(email: string, password: string): boolean</code></td>
200+
<td>Permet d'authentifier l'utilisateur. Stocke l'utilisateur dans le localStorage et émet un événement sur le flux
201+
<code>onSignin</code>
202+
.</td>
203+
</tr>
204+
<tr>
205+
<td><code>logout()</code></td>
206+
<td>Supprimer les infos stocker dans le localStorage et émet un événement sur le flux onLogout.</td>
207+
</tr>
208+
<tr>
209+
<td><code>getUser()</code></td>
210+
<td>Retourne l'utilisateur connecté et stocké dans le localStorage.</td>
211+
</tr>
212+
<tr>
213+
<td><code>get onSignin(): EventEmitter&#x3C;User></code></td>
214+
<td>Retourne l'objet (ou flux)
215+
<code>EventEmmiter</code>
216+
dédié à l'événement onSignin.</td>
217+
</tr>
218+
<tr>
219+
<td><code>get onLogout(): EventEmitter&#x3C;boolean></code></td>
220+
<td>Retourne l'objet (ou flux)
221+
<code>EventEmmiter</code>
222+
dédié à l'événement onLogout.</td>
223+
</tr>
224+
</tbody>
225+
</table>
226+
<blockquote>
227+
<p>Nous utiliserons la class EventEmitter pour permettre à des composants de s'abonner à des événements.</p>
228+
</blockquote>
229+
<h3>La page d'accueil (fin)</h3>
230+
<p>Maintenant que vous avez un service AuthenticateService de prêt, vous pouvez gérer les règles d'affichage de cette page !</p>
231+
<h3>Page d'inscription</h3>
232+
<p>Le formulaire d'inscription présentera les éléments suivants :</p>
233+
<ul>
234+
<li>Prénom, qui est un champ obligatoire, </li>
235+
<li>Nom, qui est un champ obligatoire, </li>
236+
<li>Un champ e-mail, qui est un champ obligatoire et doit respecter le pattern e-mail,</li>
237+
<li>Un champ mot de passe, qui est un champ obligatoire,</li>
238+
<li>Un bouton de enregistrer, actif que si toutes les données saisies sont valides,</li>
239+
</ul>
240+
<p>Ensuite rajouter les fonctions permettant d'ajouter un utilisateur dans liste d'utilisateurs du service <code>UserService</code>.</p>
241+
<h3>La navbar (bonus)</h3>
242+
<p>Une application est toujours plus belle lorsque cette dernière possède une <code>navbar</code>.</p>
243+
<p>Cette navbar devra s'afficher sur l'ensemble des pages. Elle devra afficher les liens suivants :</p>
244+
<ul>
245+
<li>Home,</li>
246+
<li>Signin lorsque aucun utilisateur n'est authentifié,</li>
247+
<li>Signout lorsqu'un utilisateur est authentifié.</li>
248+
</ul>
112249
<blockquote>
113250
<p>Correction du TP : <a href="../../Resources/tp4-solution.zip">tp4-solution</a></p>
114251
</blockquote>

‎dist/Instructor/html/tp5-webservice.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,6 @@
107107
<h1>TP 5</h1>
108108
<blockquote>
109109
<p>Intégration des webservices</p>
110-
</blockquote>
111-
<p>Dans ce TP, nous allons créer les formulaires de connexion et d'authentification.</p>
112-
<blockquote>
113110
<p>Correction du TP : <a href="../../Resources/tp5-solution.zip">tp5-solution</a></p>
114111
</blockquote>
115112
<p><a href="tp4-formulaire-route.md">Suivant</a></p>

‎dist/Instructor/pdf/labs.pdf

64.1 KB
Binary file not shown.

‎dist/Resources/tp4-solution.zip

-7 Bytes
Binary file not shown.

‎dist/Student/ebook/index.html

Lines changed: 154 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -166,10 +166,15 @@ <h2>Installation d'Angular Material</h2>
166166
<pre><code class="bash">npm install --save @angular/material
167167
</code></pre>
168168
<p>Puis rajouter dans le fichier <code>app.module.ts</code> la dépendence du module comme suivant :</p>
169-
<pre><code class="typescript">import { MaterialModule } from '@angular/material';
169+
<pre><code class="typescript">import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
170+
import { MaterialModule } from '@angular/material';
170171
// other imports
171172
@NgModule({
172-
imports: [MaterialModule],
173+
...
174+
imports: [
175+
BrowserAnimationsModule,
176+
MaterialModule
177+
],
173178
...
174179
})
175180
export class AppModule { }
@@ -178,6 +183,15 @@ <h2>Installation d'Angular Material</h2>
178183
les icônes de la librairie Material :</p>
179184
<pre><code class="html">&#x3C;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
180185
</code></pre>
186+
<p>Enfin dans le <code>styles.css</code>, ajouter le thème :</p>
187+
<pre><code class="css">@import '~@angular/material/prebuilt-themes/indigo-pink.css';
188+
189+
body {
190+
padding: 0;
191+
margin:0;
192+
font-family: Roboto,"Helvetica Neue",sans-serif;
193+
}
194+
</code></pre>
181195
<h2>Générer des Composants, Directives, Pipe, etc...</h2>
182196
<p>Vous pouvez utiliser la commande <code>ng generate</code> (ou <code>ng g</code>) pour générer des composants Angular : </p>
183197
<pre><code class="bash">ng generate component my-new-component
@@ -480,7 +494,144 @@ <h1>TP 4</h1>
480494
<blockquote>
481495
<p>Formulaires et routes</p>
482496
</blockquote>
483-
<p>Dans ce TP, nous allons créer les formulaires de connexion et d'authentification.</p>
497+
<p>Dans ce TP, nous allons créer les formulaires de connexion et d'authentification.
498+
Pour ce faire nous aurons besoin de mettre en place la module de routage d'Angular
499+
pour afficher plusieurs pages.</p>
500+
<h2>Installation</h2>
501+
<p>Installez le module <code>@angular/router</code> avec la commande suivante :</p>
502+
<pre><code class="bash">npm install -g @angular/router
503+
</code></pre>
504+
<h2>Création des pages et des routes</h2>
505+
<p>Nous devons maintenant créer les composants
506+
Déclarez ensuite les routes dans un nouveau fichier <code>app.routes.js</code>. Nous devrons créer les routes suivantes :</p>
507+
<table>
508+
<thead>
509+
<tr>
510+
<th>Page</th>
511+
<th>Route</th>
512+
<th>Composant</th>
513+
<th>Description</th>
514+
</tr>
515+
</thead>
516+
<tbody>
517+
<tr>
518+
<td>Accueil</td>
519+
<td>/</td>
520+
<td>HomeComponent</td>
521+
<td>Affiche un message de bienvenu avec un bouton rediregeant l'utilisateur vers la page de connexion. Une authentifié, cette page affiche la liste des utilisateurs.</td>
522+
</tr>
523+
<tr>
524+
<td>Login</td>
525+
<td>/login</td>
526+
<td>LoginComponent</td>
527+
<td>Formulaire d'authentification</td>
528+
</tr>
529+
<tr>
530+
<td>Signup</td>
531+
<td>/signup</td>
532+
<td>SigninComponent</td>
533+
<td>Formulaire d'inscription</td>
534+
</tr>
535+
</tbody>
536+
</table>
537+
<ol>
538+
<li>Commencez par créer les composants énoncés dans le tableau. </li>
539+
<li>Ensuite, vous devrez écrire vos routes dans le fichier <code>app.routes.js</code> en fonction de tableau ci-dessus.</li>
540+
<li>Importez vos routes dans votre application <code>app.module.js</code>comme suivant :</li>
541+
</ol>
542+
<pre><code class="typescript">import { ROUTES } from "./app.routes";
543+
import { RouterModule } from "@angular/router";
544+
545+
@NgModule({
546+
...
547+
imports: [
548+
RouterModule.forRoot(ROUTES)
549+
],
550+
...
551+
}
552+
</code></pre>
553+
<p>Enfin vous devez indiquer au routeur où seront afficher les vues dans votre application.</p>
554+
<pre><code class="html">&#x3C;router-outlet>&#x3C;/router-outlet>
555+
</code></pre>
556+
<h3>Page d'accueil</h3>
557+
<p>La page d'accueil devra afficher la liste des utilisateurs une fois authentifié.
558+
Commencez par réintégrer la liste des utilisateurs dans HomeComponent. Nous nous occuperons des règles d'affichage plus tard.</p>
559+
<h3>Page d'authentification</h3>
560+
<p>Nous allons maintenant utiliser les API Formulaires d'Angular. Nous utiliserons ici les <code>formulaires pilotés par le template</code>
561+
mais vous êtes libre d'utiliser la seconde approche.</p>
562+
<p>Le formulaire de connexion présentera les éléments suivants :</p>
563+
<ul>
564+
<li>Un champ e-mail, qui est un champ obligatoire et doit respecter le pattern e-mail,</li>
565+
<li>Un champ mot de passe, qui est un champ obligatoire,</li>
566+
<li>Un bouton de connexion, actif que si toutes les données saisies sont valides,</li>
567+
<li>Un bouton <code>ou m'enregister</code> pour rediriger l'utilisateur vers la page d'inscription.</li>
568+
</ul>
569+
<p>N'oubliez pas d'afficher les messages en fonction du type d'erreur du champs associé.</p>
570+
<p>Voici un exemple du formulaire attendu en Material :</p>
571+
<p><img src="images/login.png" alt="max-300"> </p>
572+
<h3>Le service Authenticate</h3>
573+
<p>Une fois le formulaire réalisé, vous devrez créer le service <code>AuthenticateService</code> (<code>ng g service authenticate</code>) qui aura pour fonction d'authentifier
574+
l'utilisateur. </p>
575+
<p>Ce service exposera les méthodes suivantes :</p>
576+
<table>
577+
<thead>
578+
<tr>
579+
<th>Method</th>
580+
<th>Descripton</th>
581+
</tr>
582+
</thead>
583+
<tbody>
584+
<tr>
585+
<td><code>authenticate(email: string, password: string): boolean</code></td>
586+
<td>Permet d'authentifier l'utilisateur. Stocke l'utilisateur dans le localStorage et émet un événement sur le flux
587+
<code>onSignin</code>
588+
.</td>
589+
</tr>
590+
<tr>
591+
<td><code>logout()</code></td>
592+
<td>Supprimer les infos stocker dans le localStorage et émet un événement sur le flux onLogout.</td>
593+
</tr>
594+
<tr>
595+
<td><code>getUser()</code></td>
596+
<td>Retourne l'utilisateur connecté et stocké dans le localStorage.</td>
597+
</tr>
598+
<tr>
599+
<td><code>get onSignin(): EventEmitter&#x3C;User></code></td>
600+
<td>Retourne l'objet (ou flux)
601+
<code>EventEmmiter</code>
602+
dédié à l'événement onSignin.</td>
603+
</tr>
604+
<tr>
605+
<td><code>get onLogout(): EventEmitter&#x3C;boolean></code></td>
606+
<td>Retourne l'objet (ou flux)
607+
<code>EventEmmiter</code>
608+
dédié à l'événement onLogout.</td>
609+
</tr>
610+
</tbody>
611+
</table>
612+
<blockquote>
613+
<p>Nous utiliserons la class EventEmitter pour permettre à des composants de s'abonner à des événements.</p>
614+
</blockquote>
615+
<h3>La page d'accueil (fin)</h3>
616+
<p>Maintenant que vous avez un service AuthenticateService de prêt, vous pouvez gérer les règles d'affichage de cette page !</p>
617+
<h3>Page d'inscription</h3>
618+
<p>Le formulaire d'inscription présentera les éléments suivants :</p>
619+
<ul>
620+
<li>Prénom, qui est un champ obligatoire, </li>
621+
<li>Nom, qui est un champ obligatoire, </li>
622+
<li>Un champ e-mail, qui est un champ obligatoire et doit respecter le pattern e-mail,</li>
623+
<li>Un champ mot de passe, qui est un champ obligatoire,</li>
624+
<li>Un bouton de enregistrer, actif que si toutes les données saisies sont valides,</li>
625+
</ul>
626+
<p>Ensuite rajouter les fonctions permettant d'ajouter un utilisateur dans liste d'utilisateurs du service <code>UserService</code>.</p>
627+
<h3>La navbar (bonus)</h3>
628+
<p>Une application est toujours plus belle lorsque cette dernière possède une <code>navbar</code>.</p>
629+
<p>Cette navbar devra s'afficher sur l'ensemble des pages. Elle devra afficher les liens suivants :</p>
630+
<ul>
631+
<li>Home,</li>
632+
<li>Signin lorsque aucun utilisateur n'est authentifié,</li>
633+
<li>Signout lorsqu'un utilisateur est authentifié.</li>
634+
</ul>
484635
<blockquote>
485636
<p>Correction du TP : <a href="../../Resources/tp4-solution.zip">tp4-solution</a></p>
486637
</blockquote>
@@ -489,9 +640,6 @@ <h1>TP 4</h1>
489640
<h1>TP 5</h1>
490641
<blockquote>
491642
<p>Intégration des webservices</p>
492-
</blockquote>
493-
<p>Dans ce TP, nous allons créer les formulaires de connexion et d'authentification.</p>
494-
<blockquote>
495643
<p>Correction du TP : <a href="../../Resources/tp5-solution.zip">tp5-solution</a></p>
496644
</blockquote>
497645

‎dist/Student/pdf/labs.pdf

64.1 KB
Binary file not shown.

‎docs/resources/tp4-solution.zip

-7 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)