Je partage ma présentation sur Angular, il s'agit d'un PPT light autour des grand principes du framework JavaScript/TypeScript Angular.

1. Présentation
d’Angular
Elaboré par : BOUSFIHA Tayeb

2. PLAN
Introduction
à Angular
Architecture
Cycle de
traitement
d’une requête
méthode
d’authentification
Réalisation
Conclusion et
perspectives
2
Controlleur
/actions

3. Introduction
à Angular
3

4. Angular est un Framework front end de google qui aide à créer des applications à page
unique (SPA) interactives et dynamiques avec ses fonctionnalités convaincantes,
notamment la création de modèles, la liaison bidirectionnelle, la modularisation, la gestion
de l'API RESTful, l'injection de dépendances et la gestion AJAX.
Angular
4

5. Architecture
5

6. 6
STRUCTURE PROJET ANGULAR

7. 7
STRUCTURE PROJET ANGULAR DETAILLÉE

8. 8
Angular Modules
Angular propose un concept de modules afin de mieux structurer le code et faciliter la
réutilisation et le partage.
Un module Angular est un mécanisme permettant de :
• regrouper des composants (mais aussi des services, directives, pipes etc...),
• définir leurs dépendances,
• et définir leur visibilité.

9. 9
SELECTEUR

10. 10
Methode prédefinie dans l’API @angular/core

11. La structure logique des documents et des documents accessibles et manipulés est définie
à l'aide d'éléments DOM. Il définit les événements, les méthodes et les propriétés de tous
les éléments HTML en tant qu'objets. DOM dans Angular agit comme une API (interface de
programmation) pour javascript.
Chaque fois qu'une page Web est chargée, le navigateur crée un objet de modèle de
document (DOM) de cette page.
DOM
11
DOM

12. 12
DATA BINDING

13. 13
Les Directives ANGULAR
*ngFor
*ngIf
Les directives sont des classes permettant d'enrichir et modifier la vue par simple ajout
d'attributs HTML sur le template.

14. 14
Pipe
Les Pipes sont des filtres utilisables directement depuis la vue afin de transformer les
valeurs lors du "binding".
Une directive obtient un élément DOM auquel elle est "attachée" et l'améliore avec une
sorte de fonctionnalités.
Une Pipe obtient des données en entrée, les transforme et sort ces données d'une autre
manière.
Directives vs Pipe
Une Pipe sert à manipuler des données, tandis qu'une directive est plus destinée à la
manipulation DOM.

15. Cycle de
traitement d’une
requête
15

16. E
16
Architecture MEAN stack

17. Méthode
d’authentification
17

18. 18
Authentification Angular

19. 19
JWT

20. 20
Authentification avec JWT

21. 21
Angular Canload

22. Controlleur
/actions
22

23. 23
Les services et l’injection des
dépendances

24. 24
Les Observables
La combinaison des Promises avec Async / Await est intéressante mais ne répond pas
encore à tous les "use cases".
Pour outrepasser les limites des "promises" pour les traitements asynchrones, Angular se
base principalement sur le concept d'Observables ou plus généralement le Reactive
Programming.

25. 25
Les Observables vs les promesses

26. Démonstration
26

27. Conclusion
Expérience
Enrichissante
Nouvelles
compétences
Perspectives
professionnelles
Expérience
compétences
Perspectives
recherches
approfondies
recherches
27
Angular utilise TypeScript, qui fournit un excellent support pour la vérification de type et
d'autres outils externes.
Angular est pris en charge par Google, ce qui signifie qu'il est soutenu par une organisation
fiable. Ils travaillent avec une documentation détaillée et une grande communauté, ce qui
en fait un cadre d'apprentissage fiable.
Angular-language-service permet la saisie semi-automatique à l'intérieur des fichiers de
modèle HTML externes des composants, vous permettant d'accélérer votre
développement.

28. Merci pour votre attention !
28