Angular, un framework pour développer des applications web et mobiles

07 avril 2021

A l’origine, les sites internet étaient uniquement statiques. Et cliquer sur un lien faisait que tout le contenu de la page se rechargeait entièrement. Ce qui, néanmoins, avait pour conséquence de ralentir considérablement le chargement de certains types de sites web, pour lesquelles seulement une petite partie de la page avait subi une modification. 

AJAX (Asynchronous Javascript and XML), qui repose sur le langage JavaScript, voit le jour pour tenter de résoudre ce problème. Cependant, malgré l’utilisation d’AJAX, lorsque la page comporte un nombre élevé de zones interactives, l’élaboration et la gestion de tout le code deviennent vite compliquées. C’est là qu’intervient Angular, un framework créé pour gérer des sites web comportant des zones hautement interactives.  

Outre la création de sites web dynamiques, Angular figure également parmi les technos de développement mobile dédiées à la construction d’applications web dynamiques et immersives. Il s’agit de sites web qui ressemblent trait pour trait à des applications, à quelques différences près.

A travers les lignes qui suivent, nous allons plonger dans l’univers Angular, un framework qui permet de développer des applications web et mobiles

Développement mobile : présentation de Angular-1

Présentation du framework Angular

Qu’est-ce que le framework Angular ?

Créé par Google, Angular est une plateforme de développement open source, basé soit sur le langage JavaScript, soit sur le langage TypeScript qui est un sur-ensemble de JavaScript. Il existe en fait deux Angular : AngularJS et Angular. Voici ce qui les différencie.

AngularJS vs Angular

AngularJS, nom utilisé pour les versions 1.x d’Angular, a vu le jour en 2010. Ce framework permet de réaliser, entre autres, des applications web (Web Apps) en langage HTML et en JavaScript. D’où d’ailleurs le nom de AngularJS, pour Angular Javascript.

Puis, ayant subi une réécriture complète de son code, AngularJS devient en 2016 Angular 2. Reposant sur les langages TypeScript et HTML, Angular 2 devient la base d’écriture des versions 2.x et supérieures du framework qui se nomment désormais juste « Angular ». Une nouvelle version majeure d’Angular apparaît environ tous les six mois.

Il faut savoir que Angular et AngularJS continuent de coexister, mais ne sont pas rétrocompatibles entre eux. Dans la suite de cet article, nous ne parlerons que d’Angular.

Les caractéristiques techniques d’Angular

Une application Angular est comparable à un immeuble (App Angular) doté de plusieurs appartements (modules) et de nombreux ascenseurs (services) facilitant les déplacements entre appartements. Et chaque appartement (module) de cet immeuble comporte plusieurs chambres (composants).  

Les principaux éléments constitutifs d’une application Angular sont ainsi :

  • les composants;
  • les modules;
  • les services.  

Le composant ou component Angular

Constituants de base d’une application Angular, les composants, aussi appelés components, représentent toute la partie visuelle de l’application. Chaque composant participe à la création de l’interface utilisateur (UI, pour User Interface), par laquelle l’utilisateur peut interagir avec l’application.

Un composant peut être une page entière, un élément ou un sous-élément d’un menu, un en-tête, un pied de page, ou bien encore une boîte de dialogue.

Un component est constitué de plusieurs éléments, dont :

  • un fichier de template, sous forme de fichier HTML, qui est en quelque sorte le moule de l’interface utilisateur; 
  • un fichier de style CSS, permettant de personnaliser l’habillage visuel du composant;
  • un fichier TypeScript qui définit le comportement du composant et gère toute la logique du rendu visuel de l’application.

Pour modifier ou étendre le comportement d’un composant, en vue de changer un ou plusieurs éléments visuels de l’application, Angular met plusieurs outils à la disposition du développeur : les Directives, les Pipes et le Data Binding (unidirectionnel ou bidirectionnel).

Les modules

Angular organise les composants à l’intérieur de blocs autonomes appelés modules. Une application Angular possède d’ailleurs au moins un module qui, par convention, est appelé « AppModule« . Un module peut dépendre d’autres modules et peut être partagé.

Les services

Le rôle d’un service est de fournir à l’application, entre autres, une valeur ou une fonctionnalité dont elle a besoin. Un composant ou component doit idéalement recourir aux « services »pour les fonctionnalités qui ne concernent pas l’expérience utilisateur.  

Le service est ainsi utilisé principalement pour 3 raisons :

  • fonctionnalités indépendantes des composants;
  • accès à des données partagées entre les composants;
  • interactions externes. 

Les fonctionnalités des services sont mises à la disposition des composants à travers ce qu’on appelle « l’injection de dépendances »

Développement mobile : présentation de Angular-2

Que peut-on réaliser avec Angular ?

Outre des sites web, Angular permet également la réalisation de :

  • applications web;
  • applications web monopage ou Single Page Application (SPA);
  • applications web progressives ou Progressive Web App (PWA);
  • applications mobiles multiplateformes, à l’aide des frameworks NativeScript ou Ionic.

Application web

Une application web, aussi appelée Web App, est un logiciel applicatif hébergé sur un serveur. Elle est accessible depuis n’importe quel navigateur web.

A la différence d’une application mobile, une application web ne nécessite pas de téléchargement ni d’installation sur un ordinateur ou un appareil mobile. Par contre, pour accéder à cet outil, une connexion Internet est nécessaire. 

Single Page Application (SPA)

Appelées applications monopage, ce sont des applications web qui se contentent de ne mettre à jour dynamiquement qu’une page unique.

Progressive Web App (PWA) 

Les Progressive Web App (PWA) désignent des applications web qui se comportent comme des applications natives. Une PWA cumule un certain nombre de qualités. Elle est en effet : 

  • installable sur des plateformes desktop ou mobiles
  • adaptative, car elle s’adapte aux capacités du navigateur utilisé; 
  • immersive, car elle fonctionne en plein écran;
  • progressive, car elle fonctionne sur toutes les tailles d’écran.

Une PWA peut également fonctionner en mode hors ligne. De plus, elle est plus légère qu’une application native qui, cependant, garde l’avantage d’un nombre élevé de fonctions. 

Même si les Progressive Web App se comportent beaucoup comme des applications natives, elles ne disposent pas de bundle de programme d’installation leur permettant d’être distribuées via les plateformes comme App Store ou Google Play. Ceci qui fait que, à la différence des applications natives, les PWA manquent de visibilité. 

Application mobile multiplateforme 

Une application mobile est un logiciel applicatif téléchargeable, que l’on installe sur un appareil mobile. Certaines applications mobiles peuvent fonctionner en mode hors ligne, d’autres non. 

Pour réaliser une application mobile avec Angular, il est nécessaire de l’utiliser avec un autre framework tel que NativeScript ou Ionic. Couplés à Angular, ces deux frameworks permettent la création d’applications mobiles multiplateformes, autrement dit des applications pouvant s’exécuter sur plusieurs plateformes (iOS, Android, Blackberry, Windows Phone et bien d’autres).  

A l’origine, Ionic était étroitement lié à Angular JS, puis à Angular. Utiliser Angular était donc obligatoire pour créer une application mobile sous Ionic. Mais depuis sa version 4, Ionic supporte également deux autres frameworks populaires : React et Vue.js.

En conclusion 

Performant et open source, le framework Angular constitue une solution complète, qui permet de créer aussi bien des sites web et des applications web (Web Apps et PWA), que des applications mobiles multiplateformes. Il est plus mature que ses principaux concurrents, à savoir React et Vue.js. De plus, il jouit du soutien d’une communauté importante de contributeurs. 

Parce qu’il est développé par Google, le framework Angular est également considéré comme une technologie pérenne. Néanmoins, réputé difficile, l’apprentissage de cette plateforme de développement pourrait rebuter les développeurs en herbe. Son utilisation s’adresse en effet plutôt à des développeurs qui utilisent déjà TypeScript ou JavaScript, et qui ont de solides connaissances en HTML et en CSS.

Pour en savoir plus :

Quel est votre projet ?

Nous vous accueillons dans notre agence, au cœur de Paris pour parler de votre projet.
Notre équipe se fera un plaisir de vous écouter autour d’un café  !

    Un projetUne candidatureWhat else