https://air.imag.fr/index.php?action=history&feed=atom&title=ECOM_1F0_2018-19_BTB_Angular 2026-06-10T22:35:30Z Revision history for this page on the wiki MediaWiki 1.39.17 https://air.imag.fr/index.php?title=ECOM_1F0_2018-19_BTB_Angular&diff=42986&oldid=prev 2018-11-06T15:38:00Z

<p>Added angular fundamentals section</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 15:38, 6 November 2018</td> </tr><tr> <td colspan="2" class="diff-lineno">Line 11:</td> <td colspan="2" class="diff-lineno">Line 11:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Un fois ces bases acquises, nous avons poursuivi notre formation par [https://openclassrooms.com/en/courses/4668271-developpez-des-applications-web-avec-angular le cours assez complet] disponible sur le site OpenClassrooms concernant Angular. Nous avons terminé cette phase de formation préliminaire par le suivi de [https://angular.io/tutorial la formation] de la documentation officielle d'Angular.</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Un fois ces bases acquises, nous avons poursuivi notre formation par [https://openclassrooms.com/en/courses/4668271-developpez-des-applications-web-avec-angular le cours assez complet] disponible sur le site OpenClassrooms concernant Angular. Nous avons terminé cette phase de formation préliminaire par le suivi de [https://angular.io/tutorial la formation] de la documentation officielle d'Angular.</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>La formation s'est révélée suffisante pour être capable de faire de l'Angular "pur" (sans JHipster), de manière incrémentale. Cependant, prendre en main le code Angular généré par JHipster s'est révélé difficile et a donc necessité de se pencher plus avant sur la documentation "avancée" de Angular ([https://angular.io/guide/router ''Angular Fundamentals'']).</div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Installation =</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>= Installation =</div></td> </tr> </table>

Enzo.Molion https://air.imag.fr/index.php?title=ECOM_1F0_2018-19_BTB_Angular&diff=42448&oldid=prev 2018-10-16T09:08:20Z

<p>Created &quot;Installation&quot; section</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 09:08, 16 October 2018</td> </tr><tr> <td colspan="2" class="diff-lineno">Line 11:</td> <td colspan="2" class="diff-lineno">Line 11:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Un fois ces bases acquises, nous avons poursuivi notre formation par [https://openclassrooms.com/en/courses/4668271-developpez-des-applications-web-avec-angular le cours assez complet] disponible sur le site OpenClassrooms concernant Angular. Nous avons terminé cette phase de formation préliminaire par le suivi de [https://angular.io/tutorial la formation] de la documentation officielle d'Angular.</div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Un fois ces bases acquises, nous avons poursuivi notre formation par [https://openclassrooms.com/en/courses/4668271-developpez-des-applications-web-avec-angular le cours assez complet] disponible sur le site OpenClassrooms concernant Angular. Nous avons terminé cette phase de formation préliminaire par le suivi de [https://angular.io/tutorial la formation] de la documentation officielle d'Angular.</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>= Installation =</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Pré-requis :</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* [https://www.npmjs.com/ npm]</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* [https://nodejs.org/en/ Node.js]</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Installation basique avec npm :</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* Mettre à jour npm :</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> npm install -g npm</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* Installer Angular :</div></td> </tr> <tr> <td colspan="2" class="diff-empty diff-side-deleted"></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> npm install -g @angular/cli</div></td> </tr> </table>

Enzo.Molion https://air.imag.fr/index.php?title=ECOM_1F0_2018-19_BTB_Angular&diff=42293&oldid=prev 2018-10-09T07:24:47Z

<p>Added official Angular formation</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:24, 9 October 2018</td> </tr><tr> <td colspan="2" class="diff-lineno">Line 10:</td> <td colspan="2" class="diff-lineno">Line 10:</td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Pour cela, nous avons vu les bases de l'[https://www.w3.org/html/ html] et du [https://www.w3.org/Style/CSS/ CSS] via deux formations FreeCodeCamp : une [https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/ formation basique d'html] et [https://learn.freecodecamp.org/responsive-web-design/basic-css/ une formation basique de CSS]. </div></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Pour cela, nous avons vu les bases de l'[https://www.w3.org/html/ html] et du [https://www.w3.org/Style/CSS/ CSS] via deux formations FreeCodeCamp : une [https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/ formation basique d'html] et [https://learn.freecodecamp.org/responsive-web-design/basic-css/ une formation basique de CSS]. </div></td> </tr> <tr> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> <td class="diff-marker"></td> <td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br /></td> </tr> <tr> <td class="diff-marker" data-marker="−"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Un fois ces bases acquises, nous avons poursuivi notre formation par [https://openclassrooms.com/en/courses/4668271-developpez-des-applications-web-avec-angular le cours assez complet] disponible sur le site OpenClassrooms concernant Angular.</div></td> <td class="diff-marker" data-marker="+"></td> <td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Un fois ces bases acquises, nous avons poursuivi notre formation par [https://openclassrooms.com/en/courses/4668271-developpez-des-applications-web-avec-angular le cours assez complet] disponible sur le site OpenClassrooms concernant <ins style="font-weight: bold; text-decoration: none;">Angular. Nous avons terminé cette phase de formation préliminaire par le suivi de [https://angular.io/tutorial la formation] de la documentation officielle d'</ins>Angular.</div></td> </tr> </table>

Enzo.Molion https://air.imag.fr/index.php?title=ECOM_1F0_2018-19_BTB_Angular&diff=42270&oldid=prev 2018-10-04T14:59:02Z

<p>Created page + created &quot;Présentation&quot; section + Created &quot;Formation&quot; section</p> <p><b>New page</b></p><div>= Présentation =<br /> [https://angular.io/ Angular] est un &#039;&#039;framework&#039;&#039; JavaScript (donc &#039;&#039;frontend&#039;&#039;). Il est basé sur [https://www.typescriptlang.org/ TypeScript]. <br /> À la date du début du projet, celui-ci est en version 6.1.9.<br /> <br /> Il s&#039;agit d&#039;un langage « côté client », qui permet donc de gérer l’UI (affichage, interactions…) de façon dynamique et vient en complément des langages « côté serveur ».<br /> <br /> = Formation =<br /> Ayant abordé Angular en cours de [http://formations.univ-grenoble-alpes.fr/fr/catalogue/cycle-preparatoire-et-diplome-d-ingenieur-XC/sciences-technologies-sante-STS/ingenieur-de-polytech-grenoble-specialite-reseaux-informatiques-et-communication-multimedia-program-ingenieur-de-polytech-grenoble-specialite-reseaux-informatiques-et-communication-multimedia/ue-presentation-et-stockage-des-donnees-IFNZJUW6/mobilite-multimedia-donnees-ouvertes-IFNZRSNF.html MMDO] par le biais du framework [https://ionicframework.com/ Ionic] utilisant Angular, ce dernier nous était familier. Cependant, il a été nécessaire de se former correctement à celui-ci. <br /> <br /> Pour cela, nous avons vu les bases de l&#039;[https://www.w3.org/html/ html] et du [https://www.w3.org/Style/CSS/ CSS] via deux formations FreeCodeCamp : une [https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/ formation basique d&#039;html] et [https://learn.freecodecamp.org/responsive-web-design/basic-css/ une formation basique de CSS]. <br /> <br /> Un fois ces bases acquises, nous avons poursuivi notre formation par [https://openclassrooms.com/en/courses/4668271-developpez-des-applications-web-avec-angular le cours assez complet] disponible sur le site OpenClassrooms concernant Angular.</div>

Enzo.Molion