Atelier Dev coté client

A.U.2024-2025 - Semestre 1

Taleb Ines(2024/2025) 1
But du cours
Organiser et modulariser ses développements JavaScript grâce à un
Framework
Découvrir les fonctionnalités du Framework Angular
Savoir développer une nouvelle application Web
Savoir concevoir une application Angular avec JavaScript et Type
Script
Connaître les mécanismes avancés du Framework Angular

Taleb Ines(2024/2025) 2
Chapitre 1 :Les grands principes
d'Angular
A.U.2024-2025 - Semestre 1

Taleb Ines(2024/2025) 3
Eléments de contenu

Introduction

L'application Single Page

MVC avec Angular

Les services

Injection de dépendance

Limites de jQuery
Taleb Ines(2024/2025) 4
Introduction
 Angular permet de créer le front-end des applications web de type SPA (Single Page Application)
réactives.
 Une SPA est une application qui utilise une seule page HTML (index.html) récupérée depuis le
serveur.
 Pour naviguer à l'intérieur de l'application, JavaScript envoie des requêtes HTTP (AJAX) au serveur
pour obtenir du contenu dynamique, souvent sous forme de JSON.
 Le contenu JSON est ensuite affiché sur la même page, côté client, en HTML.

Partie Front end Partie Back end

HTML REST,PHP,JEE,NodeJS
JSON
CSS
TYPESCRIPT SGBD
ANGULAR

Taleb Ines(2024/2025) 5
Introduction
Angular 1 (Agular JS) :Première version de Angular qui est la plus
populaire. Elle est basé sur une architecture MVC coté client. Les
applications Angular 1 sont écrite en Java Script.
Angular 2 (Angular ) :Est une réécriture de Angular 1 qui est plus
performante, mieux structurée et représente le futur de Angular.
 Les applications de Angular 2 sont écrites en Type Script qui est compilé et
traduit en Java Script avant d’être exécuté parles Browsers Web.
 Angular 2 est basée sur une programmation basée sur les Composants Web
(Web Componenet)
Angular 4 à 18 sont de simples mises à jour de Angular 2 avec des
améliorations au niveau performances.
Taleb Ines(2024/2025) 6
Introduction
Angular avec Type Script
 Pour développer une application Angular il est recommandé
d’utiliser Type Script qui sera compilé et traduit en Java Script.
 Type Script est un langage de script structuré et orienté objet qui
permet de simplifier le développement d’applications Java Script

Compilé en
TypeScript Javascript

Taleb Ines(2024/2025) 7
L'application Single Page
Une Single Page Application (SPA) est une application web qui charge une seule page
HTML et met à jour dynamiquement son contenu à mesure que l'utilisateur interagit avec
l'application, sans avoir à recharger la page entière. Cela permet une expérience utilisateur
plus fluide.
Exemples de SPAs :
Gmail
Google Maps
Trello
Avantages des SPAs :
Navigation fluide.
Temps de chargement initial plus rapide.
Réduction de la consommation de bande passante.
Taleb Ines(2024/2025) 8
MVC avec Angular
Le modèle MVC (Modèle-Vue-Contrôleur) est une architecture utilisée
pour structurer les applications :
• Modèle (Model) : Il gère les données et la logique de l'application.
• Vue (View) : Elle présente les données du modèle à l'utilisateur.
• Contrôleur (Controller) : Il gère l'interaction entre la vue et le modèle.
Il reçoit les entrées de l'utilisateur, les traite et les renvoie au modèle
ou à la vue.

Taleb Ines(2024/2025) 9
Taleb Ines(2024/2025) 10
Les services
Un service est généralement une classe avec un but étroit et bien défini.
Généralement, les composants se limite à l’affichage et à la gestion des événements
utilisateurs dans la vue du composant. L’exécution des traitements en local ou en
back end sont attribués aux services.
Quand un événement survient dans la vue, le composant fait appel à des fonctions
dans les services pour effectuer des traitements et fournir des résultats.
Généralement, c’est les service qui interagissent avec la partie back end de
l’application en envoyant des requêtes HTTP.
Généralement c’est les composants qui consomme les services, toutefois, un
service peut consommer d’autres services.
L’utilisation d’un service se fait via le principe de l’injection des dépendances.

Taleb Ines(2024/2025) 11
Injection de dépendance
L'injection de dépendance est une façon de fournir une nouvelle instance d'une
classe avec les dépendances entièrement formées dont elle a besoin.
 La plupart des dépendances sont des services.
Lorsque Angular crée un composant, il utilise le système d'injection de dépendances
pour fournir automatiquement les services requis par le composant
Un injecteur maintient un conteneur d'instances de service qu'il a créé
précédemment.
Si une instance de service demandée n'est pas dans le conteneur, l'injecteur en fait
une et l'ajoute au conteneur avant de renvoyer le service à Angular.
Lorsque tous les services demandés ont été résolus et retournés, Angular peut
appeler le constructeur du composant avec ces services comme arguments.
 Il s'agit d'une injection de dépendance.
Taleb Ines(2024/2025) 12
Limites de jQuery
jQuery est une bibliothèque JavaScript centrée sur la manipulation du
DOM, la gestion des événements et les requêtes AJAX.
Il facilite les interactions avec le DOM, mais il ne fournit pas de
structure forte pour construire des applications complexes.
Le code jQuery peut rapidement devenir difficile à maintenir pour des
applications à grande échelle, car il manque de fonctionnalités natives
comme le data-binding ou la gestion des états complexes.

Taleb Ines(2024/2025) 13
Limites de jQuery
Pas de support pour le MVC : Contrairement à AngularJS, jQuery n'a
pas de structure MVC intégrée, ce qui complique la gestion des
grandes applications.
Pas d'injection de dépendance : Dans jQuery, les objets ne sont pas
injectés automatiquement dans les fonctions, ce qui rend le code plus
difficile à tester et à maintenir.
Difficulté à gérer les gros projets : jQuery fonctionne bien pour les
petites interactions, mais devient difficile à utiliser dans des
applications complexes.

Taleb Ines(2024/2025) 14