Publié · en amélioration
Framework · Depuis 2016
Angular est un framework web basé sur TypeScript et piloté par Google, avec routage, formulaires et HTTP intégrés pour de grandes applications maintenables.
Angular est un framework front-end qui permet de créer des applications web en TypeScript. Publié pour la première fois en 2016, il est développé en open source par l'équipe Angular de Google. Malgré son nom, c'est un framework distinct d'AngularJS, apparu en 2010. L'interface se compose de composants associant un template et une classe TypeScript, l'état qui évolue est suivi par des signals, et la logique partagée est placée dans des services fournis par injection de dépendances.
Comme le routeur, les formulaires, HttpClient, l'internationalisation et les outils de test sont livrés sous forme de paquets officiels, Angular est très présent dans les grandes applications métier et les interfaces d'administration maintenues par plusieurs équipes pendant des années. Sa structure homogène et ses générateurs de code rendent les projets très semblables entre eux, ce qui aide les nouveaux venus à s'y retrouver rapidement. Le rendu côté serveur et la génération de sites statiques passent par les mêmes outils.
Le plus rapide pour commencer est d'installer Node.js, de créer un projet avec Angular CLI puis de lancer le serveur de développement avec ng serve. Le site officiel angular.dev propose un tutoriel interactif dans le navigateur ainsi que des guides détaillés pour chaque sujet. Quelques bases de TypeScript sont très utiles, car le code Angular repose sur des classes, des types et des décorateurs.
Chaque composant importe directement les composants et directives qu'il utilise, ce qui permet de découper l'interface en petites briques autonomes sans module supplémentaire.
On déclare l'état et les valeurs dérivées avec signal, computed et effect ; Angular sait précisément ce qui a changé et ne met à jour que les parties concernées.
Routeur, formulaires réactifs, HttpClient, internationalisation et rendu serveur sont des paquets officiels : inutile de choisir soi-même les bibliothèques essentielles.
Angular CLI prend en charge la création de projet, la génération de code, le serveur de développement, les tests et les builds de production optimisés.
Angular CLI fonctionne avec Node.js. Installez une version LTS depuis nodejs.org et vérifiez que node et npm affichent leur version. Les versions de Node.js prises en charge figurent dans le tableau de compatibilité d'angular.dev.
node --version && npm --versionInstallez Angular CLI globalement avec npm. La commande ng devient alors disponible ; ng version affiche la version installée.
npm install -g @angular/cliCréez un nouveau projet avec ng new et démarrez le serveur de développement. Après avoir répondu aux questions sur le format des styles et le SSR, l'application s'ouvre sur http://localhost:4200.
ng new my-app && cd my-app && ng serve --openLe décorateur @Component transforme une classe en composant, c'est-à-dire en morceau d'interface. Le selector est le nom de la balise utilisée dans le HTML, {{ }} affiche une valeur dans le template et (click) relie un événement à une méthode. Un signal se lit en l'appelant comme une fonction et se modifie avec update ; dès qu'il change, Angular met la vue à jour automatiquement.
src/app/app.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>Hello, {{ name() }}!</h1>
<button (click)="increment()">Clicked {{ count() }} times</button>
`,
})
export class App {
protected readonly name = signal('Angular');
protected readonly count = signal(0);
increment() {
this.count.update((value) => value + 1);
}
}
npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --openSix chapitres pour aller de l'installation aux notions essentielles de Angular.
Posez vos questions, partagez votre expérience et échangez vos avis sur Angular.
Aucune discussion pour l'instant. Lancez la première.
0 commentaire
Se connecter · Connectez-vous pour laisser un commentaire.
Soyez le premier à commenter.