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

Commit 647240a

Browse files
RomakitaRomakita
committed
Generate sources
1 parent 27c25ab commit 647240a

16 files changed

+639
-78
lines changed

‎dist/Instructor/html/assets/scripts/highlight.pack.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/Instructor/html/assets/styles/github.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*
2+
3+
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
4+
5+
*/
6+
7+
.hljs {
8+
display: block;
9+
overflow-x: auto;
10+
padding: 0.5em;
11+
color: #333;
12+
background: #f8f8f8;
13+
}
14+
15+
.hljs-comment,
16+
.hljs-quote {
17+
color: #998;
18+
font-style: italic;
19+
}
20+
21+
.hljs-keyword,
22+
.hljs-selector-tag,
23+
.hljs-subst {
24+
color: #333;
25+
font-weight: bold;
26+
}
27+
28+
.hljs-number,
29+
.hljs-literal,
30+
.hljs-variable,
31+
.hljs-template-variable,
32+
.hljs-tag .hljs-attr {
33+
color: #008080;
34+
}
35+
36+
.hljs-string,
37+
.hljs-doctag {
38+
color: #d14;
39+
}
40+
41+
.hljs-title,
42+
.hljs-section,
43+
.hljs-selector-id {
44+
color: #900;
45+
font-weight: bold;
46+
}
47+
48+
.hljs-subst {
49+
font-weight: normal;
50+
}
51+
52+
.hljs-type,
53+
.hljs-class .hljs-title {
54+
color: #458;
55+
font-weight: bold;
56+
}
57+
58+
.hljs-tag,
59+
.hljs-name,
60+
.hljs-attribute {
61+
color: #000080;
62+
font-weight: normal;
63+
}
64+
65+
.hljs-regexp,
66+
.hljs-link {
67+
color: #009926;
68+
}
69+
70+
.hljs-symbol,
71+
.hljs-bullet {
72+
color: #990073;
73+
}
74+
75+
.hljs-built_in,
76+
.hljs-builtin-name {
77+
color: #0086b3;
78+
}
79+
80+
.hljs-meta {
81+
color: #999;
82+
font-weight: bold;
83+
}
84+
85+
.hljs-deletion {
86+
background: #fdd;
87+
}
88+
89+
.hljs-addition {
90+
background: #dfd;
91+
}
92+
93+
.hljs-emphasis {
94+
font-style: italic;
95+
}
96+
97+
.hljs-strong {
98+
font-weight: bold;
99+
}

‎dist/Instructor/html/tp2-composant-pipe.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ <h3>Exercice</h3>
228228
<blockquote>
229229
<p>Correction du TP : <a href="../../Resources/tp2-solution.zip">tp2-solution</a></p>
230230
</blockquote>
231-
<p><a href="tp2-composant-pipe.html">Suivant</a></p>
231+
<p><a href="tp3-composants-imbriques-service-directive-angular.html">Suivant</a></p>
232232

233233
</article>
234234
</div>

‎dist/Instructor/html/tp3-composants-imbriques-service-directive-angular.html

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<title>Labs Angular</title>
6+
<meta charset="UTF-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
9+
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
10+
<link href="//fonts.googleapis.com/css?family=Merriweather:400,300,700" rel="stylesheet" type="text/css">
11+
12+
<link type="text/css" rel="stylesheet" href="assets/styles/materialize.min.css" media="screen,projection"/>
13+
<link type="text/css" rel="stylesheet" href="assets/styles/github-markdown.css" />
14+
<link type="text/css" rel="stylesheet" href="assets/styles/github.css" />
15+
<link type="text/css" rel="stylesheet" href="assets/styles/glyph.css" />
16+
<link type="text/css" rel="stylesheet" href="assets/styles/main.css" />
17+
18+
</head>
19+
<body>
20+
21+
22+
<header class="navbar-fixed">
23+
24+
<nav class="navbar">
25+
<div class="nav-wrapper">
26+
<a href="http://valtech.fr" class="brand-logo hide-on-med-and-down">
27+
<i class="valtech-logo--header glyph" data-icon="valtech-logo" aria-hidden="true"></i>
28+
</a>
29+
30+
<a class="brand-logo center">
31+
Labs Angular
32+
</a>
33+
34+
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
35+
36+
<ul class="right">
37+
<li>
38+
<a href="https://github.com/NodeAndTyped/labs-angular/" title="See on github">
39+
<i class="material-icons">visibility</i>
40+
</a>
41+
</li>
42+
43+
<li>
44+
<a href="https://github.com/NodeAndTyped/labs-angular/zipball/master" title="download">
45+
<i class="material-icons">file_download</i>
46+
</a>
47+
</li>
48+
49+
<li class="hide-on-med-and-down">
50+
<a class="dropdown-button" href="#!" data-activates="dropdown1">
51+
<i class="material-icons">menu</i>
52+
</a>
53+
</li>
54+
</ul>
55+
56+
57+
</div>
58+
</nav>
59+
60+
</header>
61+
62+
<ul class="side-nav" id="mobile-demo">
63+
64+
<li class="logo">
65+
66+
<i class="valtech-logo--header glyph" data-icon="valtech-logo" aria-hidden="true"></i>
67+
68+
</li>
69+
70+
71+
<li><a href="index.html">Accueil</a></li>
72+
73+
<li><a href="tp1-installation.html">TP 1 - Installation</a></li>
74+
75+
<li><a href="tp2-composant-pipe.html">TP 2 - Le composant Chronomètre</a></li>
76+
77+
<li><a href="tp3-composants-imbriques-service-directive-angular.html">TP 3 - Créer une liste d&#39;utilisateurs en ligne</a></li>
78+
79+
</ul>
80+
81+
<ul id="dropdown1" class="dropdown-content">
82+
83+
<li><a href="index.html">Accueil</a></li>
84+
85+
<li><a href="tp1-installation.html">TP 1 - Installation</a></li>
86+
87+
<li><a href="tp2-composant-pipe.html">TP 2 - Le composant Chronomètre</a></li>
88+
89+
<li><a href="tp3-composants-imbriques-service-directive-angular.html">TP 3 - Créer une liste d&#39;utilisateurs en ligne</a></li>
90+
91+
</ul>
92+
93+
<div class="container container-body">
94+
<article class="markdown-body">
95+
<h1>TP 3</h1>
96+
<blockquote>
97+
<p>Créer une liste d'utilisateurs en ligne</p>
98+
</blockquote>
99+
<p>Dans ce TP, nous allons créer un tableau contenant la liste des utilisateurs
100+
avec leur statut en ligne. </p>
101+
<p>Pour rappel, la structure initiale du projet est la suivante :</p>
102+
<pre><code class="bash">src/app
103+
├── app.component.css
104+
├── app.component.html
105+
├── app.component.spec.ts
106+
├── app.component.ts
107+
└── app.module.ts
108+
</code></pre>
109+
<h2>Notre 1er Service</h2>
110+
<p>Dans le dossier <code>src/app</code>, créer votre 1er service sous le nom <code>UserService</code>.</p>
111+
<p>Pour aller plus vite, vous pouvez utiliser l'outil <code>@angular/cli</code> pour créer votre service.</p>
112+
<pre><code class="bash">ng g service user
113+
</code></pre>
114+
<p>Genèrera les fichiers suivants :</p>
115+
<pre><code class="bash">src/app
116+
├── user.service.spec.ts
117+
└── user.service.ts
118+
</code></pre>
119+
<p>Ce service devra retourner la liste de tous les utilisateurs :</p>
120+
<pre><code class="json">[
121+
{"id": 1, "email": "john.doe@gmail.com", "status": "online"},
122+
{"id": 2, "email": "jane.doe@gmail.com", "status": "online"},
123+
{"id": 3, "email": "jean.dupond@gmail.com", "status": "busy"},
124+
{"id": 4, "email": "jean.dupont@gmail.com", "status": "offline"},
125+
{"id": 5, "email": "jeanne.dupond@gmail.com", "status": "offline"},
126+
{"id": 6, "email": "joe.doe@gmail.com", "status": "online"}
127+
]
128+
</code></pre>
129+
<h2>Composant tableau des utilisateurs</h2>
130+
<p>Dans le dossier <code>src/app</code>, créer un dossier <code>user-table</code> qui contiendra tout le code source du composant <code>UserTableComponent</code>.</p>
131+
<p>Ce composant <code>UserTableComponent</code> affiche la liste des utilisateurs avec leur statut dans tableau HTML.</p>
132+
<p>Pour aller plus vite, vous pouvez utiliser l'outil <code>@angular/cli</code> pour créer votre composant.</p>
133+
<pre><code class="bash">ng g component user-table
134+
</code></pre>
135+
<p>Ci-dessous le code source ajouté au projet :</p>
136+
<pre><code class="bash">src/app
137+
└── user-table
138+
   ├── user-table.component.css
139+
   ├── user-table.component.html
140+
   ├── user-table.component.spec.ts
141+
   └── user-table.component.ts
142+
</code></pre>
143+
<p>Ajouter les feuilles de style à votre composant pour que :</p>
144+
<ul>
145+
<li>Les lignes pairs soient en fonds gris clair,</li>
146+
<li>Le texte <code>online</code> soit en vert,</li>
147+
<li>Le texte <code>offline</code> soit en gris clair,</li>
148+
<li>Le texte <code>busy</code> soit en rouge,</li>
149+
<li>L'entête du tableau soit en fonds bleu clair, avec le texte en blanc.</li>
150+
</ul>
151+
<p>Le tableau possède une checkbox (md-checkbox) permettant d'afficher soit les utilisateurs en ligne,
152+
soit tous les utilisateurs.</p>
153+
<h2>Composant enfant</h2>
154+
<p>Créer un composant <code>UserTableRowComponent</code> représentant une ligne du tableau.</p>
155+
<p>Pour aller plus vite, vous pouvez utiliser l'outil <code>@angular/cli</code> pour créer votre composant.</p>
156+
<pre><code class="bash">ng g component user-table-row
157+
</code></pre>
158+
<p>Modifier votre code pour intégrer ce composant dans le composant <code>UserTableComponent</code>.</p>
159+
<p>Ci-dessous le code source ajouté au projet :</p>
160+
<pre><code>src/app
161+
└── user-table-row
162+
   ├── user-table-row.component.css
163+
   ├── user-table-row.component.html
164+
   ├── user-table-row.component.spec.ts
165+
   └── user-table-row.component.ts
166+
</code></pre>
167+
<p>Le <code>UserTableRowComponent</code> devra gérer l'afficher des données de l'utilisateur ainsi que l'action de s'afficher ou se masquer
168+
en fonction du statut d'affichage demandé par le composant parent.</p>
169+
<h2>Conclusion</h2>
170+
<p>Ce TP vous aura appris à :</p>
171+
<ul>
172+
<li>Utiliser les directives intégrées à Angular (<em>ngIf, </em>ngFor),</li>
173+
<li>Créer un service Angular et l'injecter dans un composant,</li>
174+
<li>Créer des composants avec une relation parent-enfant,</li>
175+
<li>Créer et utiliser un template.</li>
176+
</ul>
177+
<blockquote>
178+
<p>Correction du TP : <a href="../../Resources/tp3-solution.zip">tp3-solution</a></p>
179+
</blockquote>
180+
<p><a href="tp4-formulaire-route.md">Suivant</a></p>
181+
182+
</article>
183+
</div>
184+
185+
<footer class="page-footer">
186+
187+
<div class="container">
188+
189+
<div class="row">
190+
<div class="col l12 s12">
191+
<p><a href="mailto:info@valtech.fr">info@valtech.fr</a></p>
192+
<p>Vous avez une vision concernant l'avenir digital de votre entreprise ? N'hésitez pas à nous contacter.</p>
193+
<p>Tél : 01 76 21 15 00</p>
194+
<p class="foot__offices">
195+
<span>Aarhus | Amserfoort | Amsterdam | Bangalore | Bristol | Buenos Aires | Chicago | Copenhagen | Dallas | Düsseldorf | Eindhoven | Frankfurt | Geneva | Gurgaon | Göteborg | Honolulu | London | Malmö | Manchester | Montreal | Munich | New York | Paris | Singapore | Stockholm | Sydney | Uppsala | Utrecht | Västerås</span>
196+
</p>
197+
</div>
198+
</div>
199+
200+
<div class="footer-social">
201+
<ul>
202+
<li><a href="https://www.facebook.com/valtech.fr"><i class="glyph" data-icon="facebook" title="Suivez-nous à facebook" aria-hidden="true"></i><span class="hidden">facebook</span></a></li>
203+
<li><a href="https://www.linkedin.com/company/valtech"><i class="glyph" data-icon="linkedin" title="Suivez-nous à linkedin" aria-hidden="true"></i><span class="hidden">linkedin</span></a></li>
204+
<li><a href="https://www.instagram.com/valtech_fr/"><i class="glyph" data-icon="instagram" title="Suivez-nous à instagram" aria-hidden="true"></i><span class="hidden">instagram</span></a></li>
205+
<li><a href="https://twitter.com/Valtech_FR"><i class="glyph" data-icon="twitter" title="Suivez-nous à twitter" aria-hidden="true"></i><span class="hidden">twitter</span></a></li>
206+
</ul>
207+
</div>
208+
209+
210+
211+
</div>
212+
213+
<div class="footer-copyright">
214+
<div class="container">
215+
216+
© Valtech 2016
217+
218+
<a class="grey-text text-lighten-4 right" href="http://valtech.fr/services/mentions-legales-cgu/">
219+
Mentions légales / CGU
220+
</a>
221+
222+
</ul>
223+
</div>
224+
</div>
225+
226+
</footer>
227+
228+
<script type="text/javascript" src="assets/scripts/jquery.min.js"></script>
229+
<script type="text/javascript" src="assets/scripts/materialize.min.js"></script>
230+
<script type="text/javascript" src="assets/scripts/highlight.pack.js"></script>
231+
232+
<script>
233+
$( document ).ready(function(){
234+
$(".button-collapse").sideNav();
235+
$(".dropdown-button").dropdown();
236+
});
237+
</script>
238+
239+
240+
<script>
241+
hljs.initHighlightingOnLoad();
242+
</script>
243+
244+
</body>
245+
</html>

‎dist/Instructor/pdf/labs.pdf

-1.97 KB
Binary file not shown.

‎dist/Resources/tp3-solution.zip

107 Bytes
Binary file not shown.

‎dist/Student/ebook/assets/scripts/highlight.pack.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)