Bibliographie & annexes
Quiz & test
Présentation
En anglais
RÉSUMÉ
Dans le domaine des cadres logiciels (frameworks) permettant la création d’applications web, Angular est la figure de proue d’une nouvelle génération combinant la mise en œuvre de services web et de composants. Ainsi grâce à Angular, le navigateur charge l’essentiel de la structure de l’application lors de sa première connexion au serveur, les transactions suivantes n’opérant que d’efficaces mises à jour. Le second point essentiel est la création de composants, qui avec les modules, permettent non seulement une très grande modularité et réutilisabilité des codes, mais représentent aussi une puissante extension du langage HTML. Ces deux aspects sont illustrés via quelques aperçus de codes d’un exemple de site marchand.
Lire cet article issu d'une ressource documentaire complète, actualisée et validée par des comités scientifiques.
Lire l’articleABSTRACT
In the field of software frameworks for creating web applications, Angular is the leader of a new generation combining the implementation of web services and components. Thus, thanks to Angular, the browser loads the entire structure of the application when it first connects to the server, with subsequent transactions only performing effective updates. The second essential point is the creation of components, which together with the modules, not only allow a very high modularity and reusability of the codes, but also represent a powerful extension of the HTML language. These two aspects are illustrated via some code previews of an example of a merchant site.
Auteur(s)
-
Pierre POMPIDOR : Maître de conférences en informatique - Université de Montpellier / LIRMM (Laboratoire d’Informatique de Robotique et de Micro-électronique de Montpellier)
INTRODUCTION
Angular est un cadre logiciel (ou framework) créé par Google en 2016 . Il permet de développer des applications web qui sont des applications informatiques s’affichant dans un navigateur, et exploitant des programmes et des données hébergés sur des machines distantes (nommées serveurs). Si un framework laisse toute liberté au développeur d’implémenter les fonctionnalités qu’il désire, il impose une structuration précise des différents programmes à réaliser. Pour sa part, Angular met en œuvre deux grandes avancées du génie logiciel : l’utilisation de services web et en conséquence la création d’applications dites monopages, et la mise en œuvre de composants.
Cet article se propose donc d’expliquer le fonctionnement et les bénéfices des services web et des composants, illustrés par la création d’un embryon d’application qui permettrait, l’authentification d’un utilisateur faite, de visualiser la liste des produits en vente sur un site marchand.
Il est important de préciser que cet article concerne Angular (à ce jour en version 8) et non AngularJS, une première version, devenue obsolète, du framework de Google.
L'expertise technique et scientifique de référence
MOTS-CLÉS
KEYWORDS
Component | Angular | web services | SPA
DOI (Digital Object Identifier)
Cet article fait partie de l’offre
Technologies logicielles Architectures des systèmes
(239 articles en ce moment)
Cette offre vous donne accès à :
Une base complète d’articles
Actualisée et enrichie d’articles validés par nos comités scientifiques
Des services
Un ensemble d'outils exclusifs en complément des ressources
Un Parcours Pratique
Opérationnel et didactique, pour garantir l'acquisition des compétences transverses
Doc & Quiz
Des articles interactifs avec des quiz, pour une lecture constructive
Présentation
Mise en œuvre d’un routeur
En anglais
3. Composants et extension du langage HTML
3.1 Langage HTML
Revenons maintenant du côté client : la présentation des données dans la fenêtre d’un navigateur est organisée grâce à l’utilisation d’un langage de description nommé HTML (pour HyperText Markup Language). Ce langage, très facile d’accès, mobilise des duos de balises, une balise ouvrante et une balise fermante (et quelquefois des balises autofermantes), encadrant les données ou les autres balises sur lesquelles la directive est portée.
Par exemple, un texte centré et cliquable, renvoyant sur la documentation d’Angular, peut être codé ainsi :
<center>
<a href="https://angular.io/"> Documentation d’Angular </a>
</center>
Nous remarquons que la balise ouvrante <a> qui crée dans notre exemple une ancre sur un texte qui peut être sélectionné (un hypertexte), est accompagnée d’un attribut href. La majorité des balises est ainsi enrichie d’attributs qui modifient leurs comportements.
Par ailleurs, quand du code HTML (une page) est transmis au navigateur, celui-ci va utiliser un outillage spécifique pour allouer en mémoire de l’ordinateur les différentes entités de ce code (balises, attributs informations textuelles…). Cet outillage est constitué de classes au sens de la programmation par objet (ce point ne sera pas détaillé dans cet article), et est nommé le Document Object Model (le DOM). Par extension, le DOM désigne également toutes les données mises en mémoire et associées à une page affichée dans une fenêtre du navigateur. Dans une architecture traditionnelle, la navigation de l’internaute sur un site web implique donc l’envoi par le serveur de nouvelles pages constituées de balises HTML, chaque réception d’une page nécessitant la recréation du DOM ce qui est une opération très lourde. Dans une architecture basée sur la création d’applications monopages, la création du DOM est faite initialement (en tout cas pour sa partie correspondante aux balises et à leurs attributs), la navigation ultérieure ne provoquant que des mises à jour du DOM ce qui beaucoup plus efficace.
HAUT DE PAGE3.2 Composants
La seconde et principale évolution...
L'expertise technique et scientifique de référence
TEST DE VALIDATION ET CERTIFICATION CerT.I. :
Cet article vous permet de préparer une certification CerT.I.
Le test de validation des connaissances pour obtenir cette certification de Techniques de l’Ingénieur est disponible dans le module CerT.I.
de Techniques de l’Ingénieur ! Acheter le module
Cet article fait partie de l’offre
Technologies logicielles Architectures des systèmes
(239 articles en ce moment)
Cette offre vous donne accès à :
Une base complète d’articles
Actualisée et enrichie d’articles validés par nos comités scientifiques
Des services
Un ensemble d'outils exclusifs en complément des ressources
Un Parcours Pratique
Opérationnel et didactique, pour garantir l'acquisition des compétences transverses
Doc & Quiz
Des articles interactifs avec des quiz, pour une lecture constructive
Composants et extension du langage HTML
BIBLIOGRAPHIE
-
(1) - NORING (C.) - Architecture Angular Application with redux, rxjs and ngrx, - Editions Packt Publishing (2018).
-
(2) - POMPIDOR (P.) - Angular et Node.js : optimisez le développement de vos applications web avec une architecture MEAN. - Editions ENI (2016).
-
(3) - SESHADRI (S.) - Angular : Up and Running, Learning Angular, Step by Step, - Editions O'Reilly Media (2018).
1 Lien sur l’application d’illustration :
Accédez à l’application d’illustration en cliquant ici
HAUT DE PAGE
Site officiel d’Angular : https://angular.io/
Site officiel d’Angular CLI : https://cli.angular.io/
Site officiel d’Angular Material : https://material.angular.io/
Lien didactique sur Angular Universal Toolkit :
https://techblog.fexcofts.com/2018/08/13/angular-seo-universal-toolkit/
Spécification du DOM : https://www.w3.org/DOM/
Spécification de HTML : https://www.w3.org/HTML/
Spécification de HTTP : https://www.w3.org/Protocols/
Site officiel de JSX : https://reactjs.org/docs/introducing-jsx.html
Site officiel de MongoDB : https://www.mongodb.com/fr
Site officiel de Node.js : https://nodejs.org/fr/
Site officiel de Polymer : https://www.polymer-project.org/
Site officiel de React :...
L'expertise technique et scientifique de référence
Cet article fait partie de l’offre
Technologies logicielles Architectures des systèmes
(239 articles en ce moment)
Cette offre vous donne accès à :
Une base complète d’articles
Actualisée et enrichie d’articles validés par nos comités scientifiques
Des services
Un ensemble d'outils exclusifs en complément des ressources
Un Parcours Pratique
Opérationnel et didactique, pour garantir l'acquisition des compétences transverses
Doc & Quiz
Des articles interactifs avec des quiz, pour une lecture constructive
QUIZ ET TEST DE VALIDATION PRÉSENTS DANS CET ARTICLE
1/ Quiz d'entraînement
Entraînez vous autant que vous le voulez avec les quiz d'entraînement.
2/ Test de validation
Lorsque vous êtes prêt, vous passez le test de validation. Vous avez deux passages possibles dans un laps de temps de 30 jours.
Entre les deux essais, vous pouvez consulter l’article et réutiliser les quiz d'entraînement pour progresser. L’attestation vous est délivrée pour un score minimum de 70 %.
L'expertise technique et scientifique de référence
Cet article fait partie de l’offre
Technologies logicielles Architectures des systèmes
(239 articles en ce moment)
Cette offre vous donne accès à :
Une base complète d’articles
Actualisée et enrichie d’articles validés par nos comités scientifiques
Des services
Un ensemble d'outils exclusifs en complément des ressources
Un Parcours Pratique
Opérationnel et didactique, pour garantir l'acquisition des compétences transverses
Doc & Quiz
Des articles interactifs avec des quiz, pour une lecture constructive
