Angular, maintenu par Google, est un framework open-source largement utilisé pour le développement d’applications web. Il vous offre une boîte à outils robuste et une gamme de fonctionnalités qui vous permettent de créer des applications web dynamiques, réactives et évolutives.
Le lancement récent de la version 16 d’Angular introduit des mises à jour et des améliorations passionnantes de l’expérience de développement, ainsi que de meilleures performances et une plus grande stabilité des applications.
1. Signaux Angular
Angular Signals est une bibliothèque qui permet de définir des valeurs réactives et d’établir des dépendances entre elles. Voici un exemple simple d’utilisation d’Angular Signals au sein d’une application Angular :
@Component ({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
firstName = signal('Jane');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.fullName()));
}
setName(newName: string) {
this.firstName.set(newName);
}
}
L’extrait de code ci-dessus crée une valeur calculée appelée fullName, qui s’appuie sur les signaux firstName et lastName. En outre, il définit un effet, une fonction de rappel qui s’exécute chaque fois que la valeur des signaux qu’elle lit change.
Dans ce cas, la valeur de fullName dépend de firstName et de lastName, de sorte que la modification de l’un ou l’autre déclenche l’effet. Lorsque la valeur de firstName est définie sur John, le navigateur affiche le message suivant dans la console :
Name changed: John Doe.
2. Standalone Ng New Collection
À partir d’Angular v16, vous pouvez créer de nouveaux projets autonomes dès le début ! Pour essayer l’aperçu développeur des schémas autonomes, assurez-vous que vous avez installé Angular CLI v16 et exécutez la commande suivante :
ng new --standalone
En faisant cela, vous obtiendrez une structure de projet plus simple sans aucun NgModules. De plus, tous les générateurs du projet produiront des directives, des composants et des tuyaux autonomes !
3. Mappage automatique des paramètres de l’itinéraire
Considérons une configuration de routage comme suit :
export const routes: Routes = [{
path: 'search:/id',
component: SearchComponent,
resolve: {
searchDetails: searchResolverFn
}
}];
Avant Angular 16, vous deviez injecter le service ActivatedRoute pour récupérer les paramètres d’URL, les paramètres de requête ou les données associées pour une URL particulière.
Voici un exemple de ce qu’il fallait faire :
@Component({
...
})
export class SearchComponent {
readonly #activatedRoute = inject(ActivatedRoute);
readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id')));
readonly data$ = this.#activatedRoute.data.map(({
searchDetails
}) => searchDetails);
}
Avec Angular 16, vous n’avez plus besoin d’injecter le service ActivatedRoute pour récupérer les différents paramètres de route car vous pouvez les lier directement aux entrées des composants.
Pour activer cette fonctionnalité dans une application qui utilise le système de modules, définissez la valeur correspondante dans les options RouterModule :
RouterModule.forRoot(routes, {
bindComponentInputs: true
})
Pour une application autonome, vous devez plutôt appeler une fonction :
provideRoutes(routes, withComponentInputBinding());
Une fois cette fonctionnalité activée, le composant devient beaucoup plus simple :
@Component({
...
})
export class SearchComponent {
@Input() id!: string;
@Input() searchDetails!: SearchDetails;
}
4. Entrée obligatoire
Une fonctionnalité très attendue par la communauté Angular est la possibilité de marquer certaines entrées comme obligatoires. Jusqu’à présent, vous deviez utiliser diverses solutions de contournement pour y parvenir, comme la levée d’une erreur dans le cycle de vie NgOnInit si la variable n’était pas définie ou la modification du sélecteur du composant pour inclure les entrées obligatoires.
Cependant, ces deux solutions avaient leurs avantages et leurs inconvénients. À partir de la version 16, rendre une entrée obligatoire est aussi simple que de fournir un objet de configuration dans les métadonnées de l’annotation d’entrée :
@Input({
required: true
}) name!: string;
5. Vite comme serveur de développement
Angular 14 a introduit un nouveau bundler JavaScript appelé EsBuild, qui a considérablement amélioré les temps de construction d’environ 40 %. Cependant, vous ne pouviez réaliser ce gain de performance que pendant la phase de construction et non pendant le développement avec le serveur de développement.
Dans la prochaine version d’Angular, l’outil de construction Vite permet d’utiliser EsBuild pendant le développement également.
Pour activer cette fonctionnalité, mettez à jour la configuration du constructeur dans le fichier angular.json comme suit :
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
"options": {
...
}
}
Veuillez noter que cette fonctionnalité est encore expérimentale.
Améliorer l’expérience et les performances de développement
La version 16 d’Angular apporte des mises à jour passionnantes comme Angular Signals pour la gestion des données, la création de projets autonomes, le mappage automatique des paramètres de route, les entrées requises et l’intégration de Vite pour améliorer le développement. Ces améliorations permettent d’améliorer l’expérience de développement et d’augmenter les performances de l’application.