Top Qs
Chronologie
Chat
Contexte
Angular
framework Javascript De Wikipédia, l'encyclopédie libre
Remove ads
Angular (également appelé Angular 2+ pour le distinguer de son prédécesseur AngularJS)[2],[3] est un framework pour clients, open source, basé sur TypeScript et codirigé par l'équipe du projet « Angular » chez Google ainsi que par une communauté de particuliers et de sociétés. Angular est une réécriture complète d'AngularJS. Il permet la création d’applications Web et plus particulièrement d'applications Web monopages : des applications Web accessibles via une page Web unique qui permet de fluidifier l’expérience utilisateur et d’éviter les chargements de pages à chaque nouvelle action. Le framework est basé sur une architecture du type MVC et permet donc de séparer les données, le visuel et les actions pour une meilleure gestion des responsabilités. Selon l'enquête Stack Overflow auprès des développeurs, Angular est l'un des frameworks web les plus utilisés[4].
Cet article doit être recyclé ().
Remove ads
Différences avec AngularJS
Angular est une réécriture complète d'AngularJS. Contrairement à AngularJS, Angular n'a pas de notion de « portée » (scope) ou de contrôleurs ; au lieu de cela, il utilise une hiérarchie de composants comme principale caractéristique architecturale[5]. Angular a une syntaxe d'expression différente, en se concentrant sur les "[ ]" pour la liaison des propriétés, et les "( )" pour la liaison des évènements[6]. Angular recommande l'utilisation du langage TypeScript, créé par Microsoft, qui introduit des fonctionnalités telles que le typage statique, les génériques et les annotations de type.
Remove ads
Caractéristiques principales
Résumé
Contexte
Composants
L'architecture est basée sur des composants, ce qui encourage un meilleur découplage de l'application et permet la réutilisation d'éléments d'interface. Chaque composant encapsule son propre code HTML (la vue), son CSS (le style) et sa logique métier (le code en TypeScript), ce qui facilite la gestion et le test des différentes parties d'une application[7].
Voici un exemple de composant:
@Component({
selector: 'app-simple',
template: `<h1>Bienvenue sur notre application!</h1>`,
styles: `h1 { color: red; }`
})
export class SimpleComponent {
// La logique du composant peut être ajoutée ici
}
Data binding
Le data binding facilite la synchronisation des données entre le modèle et la vue. Avec Angular, il peut être bidirectionnel[8].
Voici un exemple de data binding bidirectionnel avec un formulaire permettant de modifier le nom affiché:
@Component({
template: `
<input type="text" [(ngModel)]="name" />
<p>Mon nom est {{ name }}</p>
`
})
export class AppComponent {
name = 'Emeline';
}
Injection de dépendance
L'injection de dépendances permet de gérer les dépendances entre les différents composants de l’application. Elle facilite le partage de code entre les composants[9].
Directives
Les directives étendent le HTML avec de nouvelles fonctionnalités spécifiques à l'application[10].
Routeur
Un routeur permet de naviguer entre les différentes vues de l’application. Il est possible par exemple de changer de vue en cliquant sur un lien[11].
Remove ads
Historique
Résumé
Contexte
Nom
À l'origine, la réécriture d'AngularJS avait été appelée « Angular 2 » par l'équipe mais cela avait conduit à des confusions entre les développeurs. Pour clarifier, l'équipe a décidé d'utiliser des termes différents pour chaque framework: « AngularJS », pour les versions 1.X, basées sur JavaScript, et « Angular » (sans le « JS »), pour les versions 2 et suivantes[12].
Version 2.0.0
Angular 2.0 est annoncé à la conférence ng-europe 2014, qui s'est déroulée les 22 et de cette même année[13],[14]. Les changements drastiques dans la version 2.0 ont créé beaucoup de controverses parmi les développeurs[15]. Le , les développeurs d'Angular annoncent que la version 2 passe de la version alpha à la version d'essai pour les développeurs[16]. Angular 2 passe en version bêta en [17] et la première version candidate à la production est publiée en [18]. La version finale est publiée le .
Version 4.0.0
Le , Angular 4 a été annoncé ; le saut de la version 3 étant fait pour éviter une confusion en raison de l'absence d'alignement de la version du routeur qui avait déjà été distribuée en v3.3.0[19]. La version finale a été publiée le [20]. Angular 4 est compatible avec Angular 2[21].
Angular 4.3 est une version mineure, ce qui signifie qu'il ne contient pas de modifications importantes et que c'est un remplacement direct pour les versions 4.x.x.
Fonctionnalités de la version 4.3 :
- Introduction de HttpClient, bibliothèque plus petite, plus facile à utiliser et plus puissante pour faire des requêtes HTTP ;
- Nouveaux évènements du cycle de vie du routeur pour les Gardes et les Résolveurs. Quatre nouveaux évènements : GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd rejoignent l'ensemble des évènements de cycle de vie tels que NavigationStart ;
- Désactivation conditionnelle des animations.
Version 5.0.0
Angular 5 est sorti le [22]. Des améliorations-clés dans Angular 5 incluent le soutien des applications web progressives, un optimiseur de production et des améliorations liées à Material Design[23].
Version 6.0.0
Angular 6 est sorti le [24]. C'est une version majeure permettant de moins mettre l'accent sur le cadre sous-jacent, de plus en plus sur la suite d'outils et de rendre plus facile le passage à Angular dans le futur, avec :
- ng update,
- ng add,
- Angular Elements,
- Angular Material + CDK Components,
- Angular Material Starter Components,
- CLI Workspaces,
- Library Support,
- Tree Shakable Providers,
- Animations Performance Improvements,
- RxJS v6.
Version 7.0.0
Angular 7 a été publié le [25]. Cette version ne présente que peu de nouveautés. L'interface en ligne de commande (CLI) a toutefois été améliorée. Angular Material prend désormais en charge le défilement virtuel et le glisser-déposer. Angular 7 est également plus rapide que les versions précédentes[26].
Version 8.0.0
Angular 8 est sorti le [27]. Cette version intègre partiellement un nouveau compilateur: Ivy. Elle offre également un meilleur support des Web Workers. Le JavaScript est chargé plus rapidement sur les navigateurs modernes. La migration depuis AngularJS est également facilitée[28].
Version 9.0.0
Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?
Angular 9 est sorti le [29].
- Mise en place du moteur de rendu Ivy.
Version 10.0.0
Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?
Angular 10 est sorti le [30].
Version 11.0.0
Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?
Angular 11 est sorti le [31].
Version 12.0.0
Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?
Angular 12 est sorti le [32].
- IE 11 est déprécié.
Version 13.0.0
Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?
Angular 13 est sorti le [33].
- Suppression du support d'IE 11.
- View Engine a été supprimé du mode de compilation au profit d'Ivy. Un avertissement est affiché pour les bibliothèques encore sous View Engine (Angular 12 et moins).
Version 14.0.0
Angular 14 est sorti le .
- Amélioration du support des micro-frontends
- Mise en place des composants autonomes sans ngModule.
- La validation des formulaires est maintenant typable.
Version 15.0.0
Angular 15 est sorti le .
Version 16.0.0
Angular 16 est sorti le .
Cette version introduit, en aperçu développeur :
- Une refonte du système de réactivité : Angular Signals[34].
- Un nouveau système de construction des exécutables (builder) basée sur esbuild et intégrant Vite[34].
Cette version fournit également :
Version 17.0.0
Angular 17 a été publiée le .
- Cette version introduit un mécanisme de flux de contrôle déclaratif.
- On notera par ailleurs que la construction des exécutables (build) a été améliorée : elle se déroule plus rapidement et apporte des gains de performance[35]
- De plus, la documentation a été revue.
- Mise en place d'une nouvelle syntaxe pour les templates. Par exemple :est remplacé par :
<ng-container *ngFor="let item of list"> <div *ngIf="condition; else elseTemplate"> A </div> <ng-template #elseTemplate> <div> B </div> </ng-template> </ng-container>
@for (item of list; track item) { @if (condition) { <div>A</div> } @else { <div>B</div> } }
Version 18.0.0
Angular 18 a été publiée le .
Version 19.0.0
Angular 19 a été publiée le . Les nouveautés sont [36]:
- Hydratation incrémentale pour un SSR beaucoup plus rapide.
- Standalone activé par défaut
- API
resource()pour gérer les données avec des signaux. - Nouveaux signaux (dont
linkedSignal). - Modes SSR par route (
client,server,prerender). - HMR amélioré, plus rapide (même pour les templates).
- Nouveau Time Picker dans Angular Material.
- autoCSP pour renforcer automatiquement la sécurité CSP.
Version 20.0.0
Angular 20 a été publiée le .
Politique d'évolution
Chaque version est prévue pour être compatible avec la version antérieure. Google a promis de faire des mises à jour deux fois par année.
Politique de support
Toutes les versions majeures bénéficient d'une assistance pendant 18 mois. Il s'agit de 6 mois de support actif, au cours desquels des mises à jour et des correctifs sont publiés à intervalles réguliers. Elle est suivie de 12 mois de support à long terme (LTS), au cours desquels seuls les correctifs critiques et les correctifs de sécurité sont publiés[37].
Les versions en cours sont[38]:
Remove ads
Bibliothèques
Angular Material
Angular Material est une bibliothèque de composants d'interface utilisateur qui implémente le Material Design de Google dans Angular. Elle offre une expérience utilisateur cohérente sur différents appareils et plateformes[39].
Angular Material inclut divers composants tels que des boutons, des cartes, des boîtes de dialogue, des grilles et des contrôles de formulaire. Ces composants sont conçus pour être personnalisables et faciles à intégrer aux applications Angular. Parmi les autres fonctionnalités d'Angular Material, on retrouve la prise en charge du responsive design, des thèmes et de l'accessibilité[39].
Remove ads
Exemple
Voici un exemple simple de composant affichant un bouton avec un compteur qui s'incrémente à chaque clic:
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-counter',
template: `
<h2>Count: {{ count() }}</h2>
<button (click)="increment()">Increment</button>
`
})
export class CounterComponent {
count = signal(0); increment() {
this.count.update(value => value + 1);
}
}
Pour l'afficher, il suffit d'ajouter son sélecteur dans le modèle (le template HTML) d'un autre composant[7]:
<app-counter></app-counter>
Remove ads
Notes et références
Annexes
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads