Vous souhaitez rendre votre site Angular aussi rapide et accessible que possible ? Vous êtes au bon endroit !
Qu'est-ce qu'Angular ?
Angular est un framework permettant de créer des interfaces utilisateur. Il fournit des éléments de base pour vous aider à configurer rapidement une application évolutive et facile à gérer. Angular permet aux développeurs de créer des applications sur le Web, sur mobile ou sur ordinateur.
Que contient cette collection ?
Cette collection se concentre sur cinq grands domaines d'optimisation d'une application Angular :
- Améliorer les performances de votre application pour augmenter le nombre de conversions et l'engagement des utilisateurs
- Améliorer la fiabilité de votre application sur les réseaux de mauvaise qualité en mettant en cache les éléments avec le service worker Angular
- Rendre votre application visible pour les moteurs de recherche et les robots de réseaux sociaux à l'aide du prérendu et de l'affichage côté serveur
- Rendre votre application installable (installable) pour offrir une expérience utilisateur semblable à celle d'une application iOS/Android
- en améliorant l'accessibilité de votre application afin de la rendre utilisable et compréhensible pour tous les utilisateurs ;
Chaque article de la collection décrit des techniques que vous pouvez appliquer directement à vos propres applications.
Qu'est-ce qui ne figure pas dans cette collection ?
Cette collection part du principe que vous connaissez déjà Angular et TypeScript. Si vous ne vous sentez pas encore à l'aise avec ces concepts, consultez la documentation sur TypeScript et le guide Premiers pas avec Angular sur angular.io.
Nouveau projet
L'interface de ligne de commande (CLI) Angular vous permet de configurer rapidement une application Angular simple côté client. Cet article présente brièvement la CLI, tandis que d'autres articles de la collection expliquent comment ajouter des fonctionnalités plus avancées, comme le rendu côté serveur et la prise en charge du déploiement.
Configurer la CLI
Pour commencer, installez la CLI globalement et vérifiez que vous disposez de la dernière version en exécutant les commandes suivantes :
npm i -g @angular/cli
ng --version
Assurez-vous que la dernière commande affiche la version 8.0.3 ou ultérieure.
Si vous ne souhaitez pas installer la CLI globalement, vous pouvez l'installer localement et l'exécuter avec la commande npx :
npm i @angular/cli
npx ng --version
Créer le projet
Pour créer un projet, exécutez :
ng new my-app
Cette commande crée les fichiers et la structure de dossiers initiaux de votre application, et installe les modules de nœud dont elle a besoin.
Une fois le processus de configuration terminé, démarrez votre application en exécutant :
cd my-app
ng serve
Vous devriez maintenant pouvoir accéder à votre application à l'adresse http://localhost:4200.
Étape suivante
Le reste de ce module explique comment améliorer les performances, l'accessibilité et le SEO de votre application Angular. Voici ce qui est inclus :
- Fractionnement du code au niveau du routage dans Angular
- Budgets de performances avec la CLI Angular
- Stratégies de préchargement d'itinéraires dans Angular
- Optimisation de la détection des modifications dans Angular
- Virtualiser de grandes listes avec le CDK Angular
- Préchargement avec le service worker Angular
- Prérendre des routes avec la CLI Angular
- Rendu côté serveur avec Angular Universal
- Ajouter un fichier manifeste d'application Web avec la CLI Angular
- Audit de l'accessibilité avec Codelyzer