Atelier #1 - Introduction au Frontend Web avec Angular.pdf

Transcript

1. Atelier de préparation à un Hackathon Atelier #1 Introduction au Frontend Web avec Angular /PolyHx @PolyHx
2. Brandon Roberge Bonjour! Étudiant en Génie Informatique, 4e année VP Technologies, PolyHx
3. Un Hackathon? • Objectif: Créer, innover et apprendre! • 24 à 48h sans arrêt • En équipe • Présentation devant juges
4. Hackatown 2019 Les 19 et 20 janvier 2019
5. Conseils pour un premier Hackathon • Apprendre une technologie à la fois • Focuser sur l’idée, sa présentation • Ne pas faire de backend
6. Frontend Web? • Application qui roule dans un navigateur web • Utilise obligatoirement HTML/CSS/JS à la base • C’est la partie que les utilisateurs voient de l’application
7. HTML index.html
8. CSS style.css
9. JavaScript script.js
10. Angular? https://angular.io/ • Framework de frontend Web • Ajoute un niveau d’abstraction entre les APIs du navigateur et l’application • En TypeScript • Maintenu par Google • Version 7 • À ne pas confondre avec AngularJS
11. Frameworks / librairies comparables
12. TypeScript • Superset de JavaScript • Statiquement typé • Compile en JavaScript
13. Introduction haut niveau
14. Components
15. Components test.component.ts test.component.html https://stackblitz.com/edit/polyhx-angular-1
16. Components test.component.ts test.component.html https://stackblitz.com/edit/polyhx-angular-2
17. Démo!
18. Directives: NgFor app.component.ts app.component.html https://stackblitz.com/edit/polyhx-angular-3
19. Directives: NgIf app.component.ts app.component.html https://stackblitz.com/edit/polyhx-angular-4
20. Directives: NgModel app.component.ts app.component.html https://stackblitz.com/edit/polyhx-angular-5
21. Directives de propriétés • Peuvent être appliquées sur n'importe quel attribut HTML ◦ Des [] signifient une liaison entre un attribut et une variable du component ◦ Ex: Dans le premier cas, la valeur de href réfère à la valeur de la variable link dans le component Alors que dans le second, la valeur sera “link”. VS
22. Components enfants test.component.ts test.component.html https://stackblitz.com/edit/polyhx-angular-6
23. Components enfants test.component.ts test.component.html https://stackblitz.com/edit/polyhx-angular-6
24. Services
25. Services data.service.ts app.component.ts Injection
26. Chose très importante dans un Hackathon...
27. Rendre ça beau!
28. ngx-bootstrap • Librairie de components Angular pré-faits • Utilise le framework CSS Bootstrap https://getbootstrap.com/ https://valor-software.com/ngx-bootstrap/#/
29. Démo!
30. Exercice https://bit.ly/2DmzaO6