Améliorations dans Angular et 15

1) Injecter des services dans Angular 14 sans constructeur en utilisant inject.
Auparavant, une classe avec un constructeur était toujours nécessaire pour injecter n'importe quel service :

class MyClass {
  constructor(private myService: MyService) {}
}

Maintenant, nous pouvons injecter un service à la fois dans les fonctions et dans les classes. Il nous suffit de déclarer une variable et de la définir égale à injecter avec le nom du service à l'intérieur :

const monService = inject(MonService);
Ceci est utile, par exemple, dans les intercepteurs et les gardes, qui sont désormais couramment réalisés avec des fonctions au lieu de classes.

2) Balise à fermeture automatique pour enregistrer des lignes dans Angular 15.
A partir de cette version, vous pouvez utiliser un composant avec une seule balise :

Avant, il fallait ouvrir et fermer une balise de composant pour l'utiliser :

3) Réduisez vos importations dans Angular en créant des raccourcis.
Au lieu d'avoir de longues importations comme celles-ci :

importer { MyComponent } depuis '../../components/my-component';
Vous pouvez raccourcir les importations comme ceci :

importer { MyComponent } depuis '@components/my-component' ;
Pour y parvenir, accédez au fichier tsconfig.json et ajoutez des chemins sous la propriété compilerOptions. À l'intérieur des chemins, vous pouvez configurer vos propres raccourcis d'importation :

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

La recommandation est que si vous êtes dans un composant et que vous souhaitez utiliser quelque chose de spécifique à ce composant, importez-le relativement en utilisant ./ pour accéder à cette ressource. Mais lorsque vous accédez à un dossier parent, utilisez le raccourci @. Si cela vous pose des problèmes, vous devrez peut-être fermer et rouvrir Visual Studio Code. Ces petits détails font la différence en gardant le code aussi organisé que possible.

4) Optimisez le chargement des images avec la directive NgOptimizedImage dans Angular 15.
Si nous avons une liste de 15 images et que nous les parcourons normalement en utilisant [src], nous serons confrontés au problème du chargement des 15 images en même temps au démarrage de l'application, ce qui réduit les performances :

Pour résoudre ce problème, Angular fournit la directive NgOptimizedImage. Pour l'utiliser, importez-le simplement :

importer { NgOptimizedImage } depuis '@angular/common';
Et utilisez [ngSrc] au lieu de [src]. Cela chargera les images paresseusement, améliorant ainsi les performances. Cependant, la directive présente de nombreuses autres configurations. Si vous souhaitez uniquement un chargement paresseux, je vous recommande d'utiliser l'attribut chargement="lazy", qui fait partie du standard HTML et est compatible avec tous les navigateurs :

Une recommandation : si vous avez une image principale en haut du menu, ne la réglez pas sur un chargement différé, car elle sera la première à se charger à l'ouverture de l'application. Appliquez-le uniquement aux images qui pourraient apparaître sous le parchemin, car nous n'avons pas besoin de les charger immédiatement.

Ceci est très important pour les applications publiques, telles que les applications SSR qui nécessitent un bon référencement, car cela permet d'améliorer les performances.

— Notes basées sur le cours Angular d'EfisioDev —

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!