SlideShare une entreprise Scribd logo
1  sur  6
Télécharger pour lire hors ligne
AngularJS: Single Page Application
Par : opentuto.com
/TheOpentuto
Single Page Application
SPA signifie Single Page Application, ou application monopage en
français, est une application web accessible via une page web
unique. Le but est d’éviter le chargement d’une nouvelle page à
chaque action demandée, et de fluidifier ainsi l’expérience
utilisateur.
2
www.opentuto.com
Différences entre une SPA et un site web
classique ?
SPA Site web classique
Composée d’une seule page Composé de plusieurs pages
Le rôle du navigateur est beaucoup plus important
que dans un site web, toute la logique applicative y
étant déportée
Le rôle du navigateur est simplement d’afficher les
pages envoyées par le serveur et de lui transmettre les
actions de l’utilisateur
Le serveur est responsable de fournir les ressources
de l’application et surtout d’exposer les données
Le serveur contient la logique applicative (il fournit les
pages à afficher et réagit aux actions de l’utilisateur)
La différence entre une SPA et un site web classique réside dans leur
structure et dans la relation entre le navigateur et le serveur.
3
www.opentuto.com
Les avantages et les inconvénients des SPA
Les arguments en faveur d’un site web à page unique sont les
suivants :
• Tout le contenu est chargé en une seule fois ;
• Scroller est moins compliqué et risqué que de cliquer ;
• La maintenance est plus simple ;
• La densité d’information favorise un meilleur référencement.
Les arguments en défaveur des sites web à page unique sont les
suivants :
• Le site est plus long à charger ;
• Le site est généralement truffé de javascript pour proposer une
navigation locale (au sein de la page) ;
• Les utilisateurs peuvent être désorientés.
4
www.opentuto.com
Exemple des SPA
Gmail est un exemple d’application web monopage. Les liens ne
rechargent pas la page mais le contenu est modifié au fur et à
mesure selon les requêtes. Un autre exemple de SPA et
de Websocket : la recherche en saisie automatique sous Google qui
modifie le contenu en dynamique.
5
www.opentuto.com
MERCI POUR VOTRE ATTENTION
6
www.opentuto.com
/TheOpentuto
https://www.youtube.com/user/TheOpentuto
https://twitter.com/theopentuto
https://www.facebook.com/TheOpentuto
Cours AngularJS: http://bit.ly/1PETvcp
Rejoignez-nous :

Contenu connexe

En vedette

Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentationJohn Staveley
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)Yacine Rezgui
 
Siz değil iş sizi nasıl bulur? GDG İzmir
Siz değil iş sizi nasıl bulur? GDG İzmir Siz değil iş sizi nasıl bulur? GDG İzmir
Siz değil iş sizi nasıl bulur? GDG İzmir Gokhan Boranalp
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page ApplicationKMS Technology
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSM R Rony
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2Trung Vo Tuan
 
Awesome Words To Use On Your CV
Awesome Words To Use On Your CVAwesome Words To Use On Your CV
Awesome Words To Use On Your CVMonster UK
 
Single page application - .Net
Single page application - .NetSingle page application - .Net
Single page application - .NetEl Aber Haythem
 

En vedette (11)

Single Page Applications
Single Page ApplicationsSingle Page Applications
Single Page Applications
 
Single Page Application presentation
Single Page Application presentationSingle Page Application presentation
Single Page Application presentation
 
Git 101
Git 101Git 101
Git 101
 
AngularJS - Présentation (french)
AngularJS - Présentation (french)AngularJS - Présentation (french)
AngularJS - Présentation (french)
 
Siz değil iş sizi nasıl bulur? GDG İzmir
Siz değil iş sizi nasıl bulur? GDG İzmir Siz değil iş sizi nasıl bulur? GDG İzmir
Siz değil iş sizi nasıl bulur? GDG İzmir
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
 
Single Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJSSingle Page Application (SPA) using AngularJS
Single Page Application (SPA) using AngularJS
 
Introduction to Angular 2
Introduction to Angular 2Introduction to Angular 2
Introduction to Angular 2
 
Effective cv writing
Effective cv writingEffective cv writing
Effective cv writing
 
Awesome Words To Use On Your CV
Awesome Words To Use On Your CVAwesome Words To Use On Your CV
Awesome Words To Use On Your CV
 
Single page application - .Net
Single page application - .NetSingle page application - .Net
Single page application - .Net
 

AngularJS - Single Page Application (application monopage)

  • 1. AngularJS: Single Page Application Par : opentuto.com /TheOpentuto
  • 2. Single Page Application SPA signifie Single Page Application, ou application monopage en français, est une application web accessible via une page web unique. Le but est d’éviter le chargement d’une nouvelle page à chaque action demandée, et de fluidifier ainsi l’expérience utilisateur. 2 www.opentuto.com
  • 3. Différences entre une SPA et un site web classique ? SPA Site web classique Composée d’une seule page Composé de plusieurs pages Le rôle du navigateur est beaucoup plus important que dans un site web, toute la logique applicative y étant déportée Le rôle du navigateur est simplement d’afficher les pages envoyées par le serveur et de lui transmettre les actions de l’utilisateur Le serveur est responsable de fournir les ressources de l’application et surtout d’exposer les données Le serveur contient la logique applicative (il fournit les pages à afficher et réagit aux actions de l’utilisateur) La différence entre une SPA et un site web classique réside dans leur structure et dans la relation entre le navigateur et le serveur. 3 www.opentuto.com
  • 4. Les avantages et les inconvénients des SPA Les arguments en faveur d’un site web à page unique sont les suivants : • Tout le contenu est chargé en une seule fois ; • Scroller est moins compliqué et risqué que de cliquer ; • La maintenance est plus simple ; • La densité d’information favorise un meilleur référencement. Les arguments en défaveur des sites web à page unique sont les suivants : • Le site est plus long à charger ; • Le site est généralement truffé de javascript pour proposer une navigation locale (au sein de la page) ; • Les utilisateurs peuvent être désorientés. 4 www.opentuto.com
  • 5. Exemple des SPA Gmail est un exemple d’application web monopage. Les liens ne rechargent pas la page mais le contenu est modifié au fur et à mesure selon les requêtes. Un autre exemple de SPA et de Websocket : la recherche en saisie automatique sous Google qui modifie le contenu en dynamique. 5 www.opentuto.com
  • 6. MERCI POUR VOTRE ATTENTION 6 www.opentuto.com /TheOpentuto https://www.youtube.com/user/TheOpentuto https://twitter.com/theopentuto https://www.facebook.com/TheOpentuto Cours AngularJS: http://bit.ly/1PETvcp Rejoignez-nous :