Présentation

Article interactif

1 - APPLICATION MONOPAGE VERSUS APPLICATION MULTIPAGES

2 - DU CÔTÉ SERVEUR, LES SERVICES WEB

  • 2.1 - Services web
  • 2.2 - Des données hébergées dans une base de données NoSQL
  • 2.3 - Un exemple de serveur Node.js

3 - COMPOSANTS ET EXTENSION DU LANGAGE HTML

4 - MISE EN ŒUVRE D’UN ROUTEUR

5 - PROGRAMMATION RÉACTIVE ET BIBLIOTHÈQUE NGRX

  • 5.1 - Programmation réactive et observables
  • 5.2 - Bibliothèque NgRx et stores

6 - MISE EN ŒUVRE D’UNE APPLICATION ANGULAR

  • 6.1 - Création d’une application avec Angular CLI
  • 6.2 - Structure de l’application donnée en exemple
  • 6.3 - Développement et mise en production

7 - CONCLUSION

8 - GLOSSAIRE

9 - SIGLES, NOTATIONS ET SYMBOLES

Article de référence | Réf : H3330 v1

Glossaire
Angular - La figure de proue d’une nouvelle génération de frameworks web

Auteur(s) : Pierre POMPIDOR

Relu et validé le 05 janv. 2021

Pour explorer cet article
Télécharger l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !

Sommaire

Présentation

Version en anglais 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’article

ABSTRACT

Angular, the leader of a new generation of web frameworks

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.

Cet article est réservé aux abonnés.
Il vous reste 93% à découvrir.

Pour explorer cet article
Téléchargez l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !


L'expertise technique et scientifique de référence

La plus importante ressource documentaire technique et scientifique en langue française, avec + de 1 200 auteurs et 100 conseillers scientifiques.
+ de 10 000 articles et 1 000 fiches pratiques opérationnelles, + de 800 articles nouveaux ou mis à jours chaque année.
De la conception au prototypage, jusqu'à l'industrialisation, la référence pour sécuriser le développement de vos projets industriels.

KEYWORDS

Component   |   Angular   |   web services   |   SPA

DOI (Digital Object Identifier)

https://doi.org/10.51257/a-v1-h3330


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

ABONNEZ-VOUS

Lecture en cours
Présentation
Version en anglais En anglais

8. Glossaire

Application web monopage ; Single Page Application

Application web dont la structure est complètement transmise au navigateur lors de son chargement initial. Cette structure comprend les templates contenant les balises HTML des différents composants, et les codes JavaScript qui permettent de mettre à jour l’affichage du navigateur en fonction des données ultérieurement importées.

Bundle

Regroupement de plusieurs fichiers de programmes (il peut être désigné aussi sous le nom de package ou de paquetage).

DOM ; Document Object Model

Le modèle objet du document représente l’outillage (les classes en programmation objets) permettant d’allouer en mémoire du navigateur les différentes entités de la page web (balises, attributs informations textuelles…). Par extension, il désigne toutes les données mises en mémoire et associées à une fenêtre du navigateur.

Un lien est donné sur sa spécification officielle dans la webographie.

HTML ; HyperText MarkUp Language

Langage de programmation permettant de structurer les pages web affichées dans le navigateur, et de mettre en forme les informations contenues dans ces pages. Ce langage met en œuvre des duos de balises qui exécutent leurs directives sur les données, ou d’autres balises, qu’elles encadrent (il existe aussi des balises uniques).

Un lien est donné sur sa spécification officielle dans la webographie.

HTTP ; HyperText Transfert Protocol

Protocole de communication réseau client-serveur pour Internet.

Un lien est donné sur sa spécification officielle dans la webographie.

JavaScript

Langage de programmation permettant la programmation de scripts initialement destinés à accéder au contenu de pages web chargées en mémoire d’un navigateur (et à les modifier). Ce langage a ensuite évolué notamment avec les normes ECMAScript définies par l’ECMA (une organisation émettant, entre autres, des normes de standardisation pour les langages de programmation), et permet par ailleurs la création de serveurs avec l’utilisation de Node.js.

JSON ; JavaScript Object Notation

Notation sous format textuel, appelée sérialisation, d’objets JavaScript qui sont directement alloués en mémoire par un programme JavaScript auquel ils sont transmis.

MEAN ; M ongoDB E xpress A ngular N ode.js...

Cet article est réservé aux abonnés.
Il vous reste 93% à découvrir.

Pour explorer cet article
Téléchargez l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !


L'expertise technique et scientifique de référence

La plus importante ressource documentaire technique et scientifique en langue française, avec + de 1 200 auteurs et 100 conseillers scientifiques.
+ de 10 000 articles et 1 000 fiches pratiques opérationnelles, + de 800 articles nouveaux ou mis à jours chaque année.
De la conception au prototypage, jusqu'à l'industrialisation, la référence pour sécuriser le développement de vos projets industriels.

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.

Obtenez CerT.I., la certification
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

ABONNEZ-VOUS

Lecture en cours
Glossaire
Sommaire
Sommaire

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

2 Sites Internet

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 :...

Cet article est réservé aux abonnés.
Il vous reste 95% à découvrir.

Pour explorer cet article
Téléchargez l'extrait gratuit

Vous êtes déjà abonné ?Connectez-vous !


L'expertise technique et scientifique de référence

La plus importante ressource documentaire technique et scientifique en langue française, avec + de 1 200 auteurs et 100 conseillers scientifiques.
+ de 10 000 articles et 1 000 fiches pratiques opérationnelles, + de 800 articles nouveaux ou mis à jours chaque année.
De la conception au prototypage, jusqu'à l'industrialisation, la référence pour sécuriser le développement de vos projets industriels.

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

ABONNEZ-VOUS

Sommaire

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

La plus importante ressource documentaire technique et scientifique en langue française, avec + de 1 200 auteurs et 100 conseillers scientifiques.
+ de 10 000 articles et 1 000 fiches pratiques opérationnelles, + de 800 articles nouveaux ou mis à jours chaque année.
De la conception au prototypage, jusqu'à l'industrialisation, la référence pour sécuriser le développement de vos projets industriels.

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

ABONNEZ-VOUS