Scribd
Importer
324 vues32 pages

Angular-Chapitre1-Intro Dev Web

Ce document présente un cours sur le framework Angular. Le cours couvre divers aspects d'Angular tels que les composants, les directives, les services et le routage. Le cours utilisera également TypeScript pour développer une application Angular.

Transféré par

Chiheb Mezrigui
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
324 vues32 pages

Angular-Chapitre1-Intro Dev Web

Ce document présente un cours sur le framework Angular. Le cours couvre divers aspects d'Angular tels que les composants, les directives, les services et le routage. Le cours utilisera également TypeScript pour développer une application Angular.

Transféré par

Chiheb Mezrigui
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 32

| U N I V E RS IT É D E C A RT HAGE

| F AC ULT É D ES S C I E N C ES D E B I Z E RT E
| D É PA RT E M E N T I N FOR M ATIQU E

ANGULAR
Front-End JavaScript Framework
M.A.D AHDEH
S ECTION : GL IS2

M.A.DAHDEH ([email protected]) 1
A propos de ce cours
 Ce cours se concentre principalement sur les frameworks front-end basés sur Javascript, et
en particulier le framework Angular (actuellement Ver. 11.x),

 Ce cours utilisera Typescript pour développer une application Angular

 Ce cours présente divers aspects d'Angular, notamment:


 les composants, les directives, les services et le routage

 les observables et la programmation réactive avec RxJS

 la communication Client-seveur via HttpClient et l’utlisation d’API REST.

M.A.DAHDEH ([email protected]) 2
Objectifs du cours
A l’issue de ce cours, l’étudiant sera capable de :
 Assurer le développement web, avec une maîtrise de la partie Front-end des applications web
 Développer une interface ergonomique, interactive et dynamique via le Framework Angular.
 Adapter les pages web à tous types de terminaux (responsive design)

M.A.DAHDEH ([email protected]) 3
Pré requis
 Une bonne maitrise du HTML5 et CSS notamment le framework Bootstrap

 Une bonne connaissance pratique de JavaScript:


 en particulier ES 5, est fortement recommandée.

 TypeScript ou ES 6, est fortement apprécié

M.A.DAHDEH ([email protected]) 4
Plan
 Chapitre 1 : Introduction au développement web
 Chapitre 2 : Java Script /ECMAScript
 Chapitre 3 : Angular

M.A.DAHDEH ([email protected]) 5
Chapitre 1 : Introduction au
développement web
LES BASES DE WEB

M.A.DAHDEH ([email protected]) 6
WWW: Définition
The World Wide Web
 Le web :
• Collection de documents HTML …
◦ HTML: HyperText Markup Language
 Langage de base pour la création de toutes les pages Web
• liés ensemble …
◦ Utilisation des hyperliens: le lien entre les pages Web
• Inventé entre 1989 et 1990

 Le premier site Internet et le premier navigateur ont été inventés en 1990 par Tim Berners-Lee
• Il est l'initiateur des 3 principales technologies web: les adresses web, HTTP et HTML
• Fondateur et président du W3C depuis 1994
◦ W3C: WWW Consortium - organisme indépendant qui publie des normes pour le Web

M.A.DAHDEH ([email protected]) 7
WWW : Histoire du web
The World Wide Web

M.A.DAHDEH ([email protected]) 8
WWW: Les principaux composants
The World Wide Web
 Principaux éléments du WWW
• HTTP: Le principal protocole du Web
• Serveurs: ordinateurs qui hébergent les fichiers qui composent le Web
• Internet: le plus grand réseau informatique du monde
• Navigateur: programme qui s’exécute sur votre ordinateur pour afficher les fichiers trouvés sur le Web

M.A.DAHDEH ([email protected]) 9
WWW: Comment ça fonctionne ?
The World Wide Web
 La personne… ou disons l’ordinateur… ou mieux, Navigateur web, que affiche la page Web s'appelle le client

 Lorsque le client souhaite afficher une page Web (lorsqu'une adresse est écrite dans le navigateur Web), une
requête est envoyée au serveur

M.A.DAHDEH ([email protected]) 10
WWW: Comment ça fonctionne ?
The World Wide Web
 Le serveur recherche la page
• S'il la trouve, il la renvoie

• Sinon, il renvoie une erreur

M.A.DAHDEH ([email protected]) 11
WWW: Comment ça fonctionne ?
The World Wide Web
 La page est ensuite décodée et affichée par le navigateur web

 Le navigateur web est un logiciel qui interprète la page HTML et affiche un résultat à l'écran

M.A.DAHDEH ([email protected]) 12
WWW: HTML
The World Wide Web
 HTML: HyperText Mark-up Language
• A vu le jour en 1991
• Gère et organise le contenu d’une page Web
• Fait référence à d'autres documents: images ou vidéos par exemple
• Hypertexte: liens vers d'autres pages
• Le HTML repose sur une syntaxe simple et rigide, dont l'unité de base est la balise.
◦ Ex : <html>, <body>, <img>, <a>, <h1>, <table>, <div>
• Il est interprété par un Navigateur Internet (Browser) pour afficher la page
◦  Ex : Chrome, FireFox, Safari, Opéra, InternetExplorer

M.A.DAHDEH ([email protected]) 13
WWW: HTML5
The World Wide Web
 HTML5
• Fondamentalement, la cinquième version du langage HTML :
• Intégration facile des vidéos,
• un meilleur agencement du contenu,
• de nouvelles fonctionnalités pour les formulaires.
• Se réfère également à la combinaison de trois technologies: HTML5, CSS3 et Javascript :
• HTML: Structure des pages Web,
• CSS: Style et présentation des pages Web,
• Javascript: Comportement des éléments Web (Interaction entre client et internaute)

M.A.DAHDEH ([email protected]) 14
WWW: HTML5 – Quelques notions de base
The World Wide Web

M.A.DAHDEH ([email protected]) 15
WWW: HTML5 – Quelques notions de base
The World Wide Web

 La balise div est une boite conteneur qui n'a aucune valeur sémantique tout comme le span : ces balises
sont pourtant très utiles pour disposer, contenir et styliser des éléments.
 Le HTML5 à apporter tout un lot de nouvelles balises renforçant l'aspect sémantique de la structure
HTML :
 <main>, <header>, <nav>, <section>, <article>, <aside>, <footer>

M.A.DAHDEH ([email protected]) 16
WWW: CSS3
The World Wide Web
 CSS (Cascading Style Sheets, Feuilles de style)
 Son rôle est de gérer l'apparence de la page web
 agencement, positionnement, décoration, couleurs, taille du texte.
 Ce langage est venu compléter le HTML en 1996.
 CSS 3 : c'est la dernière version, qui apporte des fonctionnalités
particulièrement attendues comme :
 Les bordures arrondies, les dégradés, les ombres, etc

M.A.DAHDEH ([email protected]) 17
WWW: CSS3 : Quelques notions de base
The World Wide Web

M.A.DAHDEH ([email protected]) 18
WWW: CSS3 : Quelques notions de base
The World Wide Web

M.A.DAHDEH ([email protected]) 19
WWW: HTTP
The World Wide Web
 HTTP: Hypertext Transfer Protocol
• Un protocole de communication client-serveur développé pour le World Wide Web.

• HTTPS est la variante sécurisée du protocle

 Un protocole de requête-réponse dans le modèle informatique client-serveur


• Demande soumise par le client pour demander au serveur une ressource ou un calcul

• Réponse envoyée par le serveur :


◦ Contient des informations sur l'état d'achèvement de la requête

◦ Peut contenir le contenu demandé dans le corps

M.A.DAHDEH ([email protected]) 20
HTTP: Les codes de statut
The World Wide Web
 La première ligne d'une réponse HTTP est un code de
statut

 Comprend un code numérique de statut ainsi que la


version du protocole HTTP utilisé
• 1xx: Message d’information
• 2xx: Réussite
• 3xx: Redirection
• 4xx: Erreur due au client
• 5xx: Erreur due au serveur

M.A.DAHDEH ([email protected]) 21
HTTP: Les méthodes de requête
The World Wide Web
 HTTP définit des méthodes (ou verbes) pour indiquer l'action souhaitée à effectuer sur la
ressource identifiée : URI

 Un « Uniform Resource Identifier » permet d'identifier les ressources sur Internet

M.A.DAHDEH ([email protected]) 22
HTTP: Les méthodes de requête
The World Wide Web
 GET: lecture d'une ressource
• Renvoie une représentation de la ressource (JSON par exemple) et un code de réponse 200 (OK) si tout va bien

• En cas d'erreur, renvoie un 404 (non trouvé) ou un 400 (mauvaise requête)

• GET ne doit jamais mettre à jour une ressource!

• Exemple: GET http://www.example.com/customers/12345

 DELETE: suppression d'une ressource


• En cas de suppression réussie, renvoie 200 (OK), ainsi qu'un contenu, tel que l'élément supprimé

• En cas de ressource inexistante, renvoie 204 (pas de contenu)

• Exemple: DELETE http://www.example.com/customers/12345

M.A.DAHDEH ([email protected]) 23
HTTP: Les méthodes de requête
The World Wide Web
 PUT: créer / mettre à jour une ressource en indiquant son URI exact
• Le corps de la requête contient la représentation complète de la nouvelle ressource et l’URI est celle
de la ressource elle-même
• Si la ressource existe déjà, elle sera modifiée, sinon, elle sera créée
• Renvoie 201 (créé) en cas de création d'une nouvelle ressource, et 200 (OK) ou 204 (pas de contenu)
en cas de mise à jour
• Ne renvoie généralement pas de contenu
• Exemple:

M.A.DAHDEH ([email protected]) 24
HTTP: Les méthodes de requête
The World Wide Web
 POST: créer / mettre à jour une ressource à l'aide d'un gestionnaire
• Permet principalement:
◦ Envoi de données au programme situé à l'URL spécifiée
◦ Publier un message dans un forum
◦ Envoi de données à un processus qui l’utilisera
◦ Ajout de données à une base de données…
• Le traitement est déterminé par le serveur
• Utilisé si nous ne connaissons pas l'URI exact de la ressource
• Renvoie 201 si l'entité a été créée, 200 (OK) si la réponse contient une entité, et 204 sinon. Doit
également renvoyer un emplacement (URI de la ressource)
• Exemple:

M.A.DAHDEH ([email protected]) 25
HTTP: Les méthodes de requête
The World Wide Web
 HEAD
• Permet de récupérer les informations sur un document (Type, Capacité, Date de dernière modification
etc…)

 CONNECT
• Etablit un tunnel vers le serveur identifié par la ressource cible.

 OPTIONS
• Utilisée pour décrire les options de communications avec la ressource visée.

 TRACE
• Réalise un message de test aller/retour en suivant le chemin de la ressource visée.

M.A.DAHDEH ([email protected]) 26
Conception & Développement des
applications web et mobile
Conception (Design) Développement (Development, Building
and Deployment)
 User Interface (UI)/ User Experience Design
(UX)  Frameworks UI : Bootstrap , Material, …
 Conception visuelle  Frameworks JavaScript : Angular, React, …
 Le prototypage
 Couleurs, graphiques et animation  Frameworks des applications mobiles Hybrides
: Ionic , Cordova, ..

 Frameworks coté serveur (server-side) :


Express , Spring Boot, Laravel, …

M.A.DAHDEH ([email protected]) 27
Front end & Back end
The World Wide Web
 La tendance actuelle est de vouloir séparer entre les deux parties d’un site web :
• La partie cliente (Front-end) : composée de fichiers HTML, CSS et JavaScript qui sont interprétés par le navigateur

• La partie serveur (Back-end) : composée de fichiers PHP , Java ou autres qui sont interprétés coté serveur et SGBD

M.A.DAHDEH ([email protected]) 28
Architecture 3 tiers
The World Wide Web
 L’application web est organisée en trois couches différentes :

Préoccupé par les problèmes


liés à l'interface utilisateur (UI)
Couche présentation
Validation des règles métier du
Couche métier monde réel et traitement du
contenu dynamique
Couche d’accès aux
données Persistance et accès aux
données via une API

M.A.DAHDEH ([email protected]) 29
Site web ou application web ? (1 / 2)
The World Wide Web
 Un site Web est défini par son contenu :
• Un site web est une application serveur qui envoie des pages HTML au navigateur web du client

• Les sites Web sont principalement informatifs (exp: lemonde.fr )

• A chaque changement de page, il faut faire une requête au serveur : Communications longues et couteuses

Couche présentation Couche métier Couche d’accès aux données

M.A.DAHDEH ([email protected]) 30
Site web ou application web ? (2 / 2)
The World Wide Web
 Une application Web est définie par son interaction avec l’utilisateur :
• Il s’agit d’une simple page HTML qui contient suffisamment de JavaScript pour pouvoir fonctionner en
autonomie, une fois que le serveur la renvoyer au client.

• Le JavaScript gère la navigation en affichant ou masquant les éléments HTML nécessaires pour
donner l’impression à l’internaute qu’il navigue sur un site traditionnel,

• On appelle ce genre d’ Architecture :


 SPA (Single Page Application) utilisant un Framework JS
 Exemples :
/index.html
 Les applications Web Google ( Gmail, Google Docs, etc ). API REST, JSON

 l’application web de FaceBook Couche présentation Couche métier


Couche d’accès aux
données

M.A.DAHDEH ([email protected]) 31
Développement Web Full Stack
The World Wide Web
UI Framework BaaS
Bootstrap 4 / (Back-end as a Service)
Framework
Material Design JS / Librairies
Angular, Ionic, React, … /
JQuery Spring Boot (Java)
SQL ( MySQL, Oracle, …)
CSS JS Express (NodeJS)
HTM NoSQL (MongoDB, … )
….
L

Couche présentation Couche métier Couche d’accès aux données

M.A.DAHDEH ([email protected]) 32

Vous aimerez peut-être aussi