Le document présente un aperçu du framework Angular, utilisé pour développer des applications web côté client avec HTML et TypeScript, en suivant une architecture MVC. Il couvre l'installation, la configuration, les composants, les directives, et aborde également les services web RESTful ainsi que l'intégration de diverses entreprises qui utilisent Angular. Enfin, il décrit des exemples de déclarations de contrôle et des techniques de liaison de données dans Angular.

1. Angular : Un aperçu du framework de
développement d’applications Web Rédigé et Présenté par
Dekel Shoot
Sous l’encadrement de :
Dr Fidel Jiomekong
Hackathon du vendredi 22 septembre 2023

2. I
Introduction et vu
d'ensemble
Architecture MVC
Installation et
configuration
Getting Started
Variable et
opérateurs
Déclarations de
contrôle, et Les
directives
II
Module
III IV V VI VII VIII
SOMMAIRE
IX
Pipe ,Services et
Router
X
CONCLUSION
Http Client et les
Forms

3. I. Introduction et
vu d'ensemble

4. I. Introduction et vu d'ensemble
● Angular est un framework JavaScript
● Angular est utilisé pour créer des applications côté client en
utilisant HTML
● Angular bootstraps JavaScript avec des balises HTML.
● Angular est utilisé pour créer une application d'interface
utilisateur accessible.
● Angular améliore l'expérience de l'interface utilisateur pour
l'utilisateur.
● Le code angular est écrit en langage TypeScript
○ TypeScript est compilé en JavaScript
○ JavaScript est utilisé dans les pages HTML
Qu'est-ce que ANGULAIRE

5. I. Introduction et vu d'ensemble
● Angular a un ensemble de directives pour afficher le contenu
dynamique sur la page HTML. Angular étend les capacités des
nœuds HTML pour une application Web.
● Angular fournit une liaison de données et une injection de
dépendances qui réduit la ligne de code.
● Angular étend les attributs HTML avec des directives et lie les
données au HTML avec des expressions.
● Angular suit l'architecture MVC
Angular améliore le HTML

6. I. Introduction et vu d'ensemble
● Angular communique avec les services Web RESTFul dans les
applications modernes
● un service Web RESTful est accessible par appel HTTP
● Les services Web RESTful échangent des données JSON
(module HttpClient)
Angular — Services Web REST

7. I. Introduction et vu d'ensemble
● Une application est un module
● Le module contient des composants
● Le composant utilise les services
● Les services contiennent des données et des méthodes
commerciales réutilisables
● L'élément de base d'Angular est le composant
● On dit qu'Angular suit l'architecture Composant/Service. En
interne, il suit l'architecture MVC
Application angular

8. I. Introduction et vu d'ensemble
● An Application is a Module
● Modules are reusable
Application angular

9. I. Introduction et vu d'ensemble
● Google
● Microsoft (office 360 en ligne , Xbox)
● IBM
● PayPal
● Samsung
● Netflix
● Freelancer
● Tesla
Quels Entreprises utilisent Angular

10. I. Introduction et vu d'ensemble
Part de marché d’Angular

11. II. Architecture MVC

12. II. Architecture MVC

13. II. Architecture MVC
● View: contient des logiques d'affichage, développées à l'aide de
HTML et les directives d’angular
● Controller: Contient la logique de navigation. Décide les données et
la vue à afficher
● Model: Transporter des données entre View et Controller

14. III. Installation et
configuration

15. II. Installation et configuration
● L'environnement de développement Node.js peut être configuré
sous Windows, Mac, Linux
● L'environnement de développement et l'éditeur suivants sont
requis pour développer
○ Node.js (Gestionnaire de packages de nœuds (NPM))
○ IDE (Environnement de développement intégré) ou éditeur de
texte
● Téléchargez le programme d'installation et l'éditeur depuis
○ https://nodejs.org : installer node et npm
○ https://code.visualstudio.com : Visual Studio Code
● Vous pouvez vérifier la version de npm en suivant la commande
○ npm —v
Noeud d’installation

16. II. Installation et configuration
● Vous pouvez exécuter la commande suivante pour installer le CLI.
○ npm install @angular/cli -g
● Après l'installation, vous pouvez vérifier la version d'Angular en
exécutant la commande suivante :
○ ng version
CLI signifie Interface de Ligne de Commande
Installation du cli d’angular

17. II. Installation et configuration
● Le projet angulaire est créé à l'aide de la commande :
○ ng new project—name
● Supposons que le nom du projet est first_app
○ ng new first_app
○ La commande ci-dessus créera une structure de répertoires
de projet par défaut
Tous les composants seront créés dans le dossier c : /first_app/src/
app
Créer un projet

18. II. Installation et configuration
● Exécutez la commande suivante pour exécuter le projet angulaire
○ c:/first_app> ng servir -o
Il démarrera le serveur angulaire sur le numéro de port par défaut
#4200 et rendra l'application accessible en utilisant
http://localhost:4200
Exécuter le projet

19. VI. Déclarations de
contrôle, et Les directives

20. IV. Getting Started

21. VI. Déclarations de contrôle, et Les directives
injecte du contenu dans la vue : <h1>{{ name }}</h1>
One-way data binding
<button [disabled] = “ ! isValid “> Valider </button>
Property binding
<input [( name )] = “ newName “ />
Two-way data binding
<button (click) = “propose()”> </button>
Event binding
Data binding

22. VI. Déclarations de contrôle, et Les directives
● Interaction direct avec le DOM de la page HTML
● Ajout – suppression – modification des éléments au cours de
l’exécution de la page
● NgIf rend ou non un élément HTML
○ <div *NgIf= « condition »> Hello World </div>
● NgFor itère sur une collection afin d’appliquer un template
○ <li *ngFor = « let idea of ideas » > … </li>
● NgStyle
○ <div [ngStyle]="{color:'red'}">Learn Angular</div>
● NgClass
○ <div [ngClass]=”stringExp|arrayExp|objExp”>...</div>
Directives structurelles

23. VII. Module

24. VIII. Pipe ,Services et
Router

25. IX. Http Client et les
Forms

26. X.CONCLUSION

27. Merci pour votre attention.
Des questions?