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 composants pour vous aider à configurer rapidement une application évolutive et facile à gérer. Angular permet aux développeurs de créer des applications pour le Web, les mobiles ou les ordinateurs.
Que contient cette collection ?
Cette collection se concentre sur cinq domaines majeurs pour optimiser une application Angular :
- Améliorer les performances de votre application pour augmenter l'engagement et les conversions des utilisateurs
- Améliorer la fiabilité de votre application sur les réseaux de mauvaise qualité en prémettant en cache les éléments avec le service worker Angular
- Rendre votre application détectable par 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 pour offrir une expérience utilisateur semblable à celle d'une application iOS/Android
Chaque article de la collection décrit des techniques que vous pouvez appliquer directement à vos propres applications.
Qu'est-ce qui n'est pas inclus dans cette collection ?
Cette collection suppose que vous connaissez déjà Angular et TypeScript. Si vous ne vous sentez pas encore à l'aise avec ces outils, consultez la documentation 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 avancées, comme l'affichage côté serveur et la compatibilité avec le déploiement.
Configurer la CLI
Pour commencer, installez la CLI de manière globale 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 renvoie la version 8.0.3 ou une version ultérieure.
Si vous ne souhaitez pas installer la CLI de manière globale, 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 la commande suivante :
ng new my-app
Cette commande crée les fichiers et la structure de dossiers initiaux de votre application, puis installe les modules de nœud dont elle a besoin.
Une fois le processus de configuration terminé, démarrez votre application en exécutant la commande suivante :
cd my-app
ng serve
Vous devriez maintenant pouvoir accéder à votre application à l'adresse http://localhost:4200.
Étape suivante
Dans le reste de cette collection, vous apprendrez à améliorer les performances et le SEO de votre application Angular. Voici les thèmes abordés :
- Division du code au niveau de la route dans Angular
- Budgets de performances avec la CLI Angular
- Stratégies de préchargement des routes dans Angular
- Optimisation de la détection des modifications dans Angular
- Virtualiser des listes volumineuses avec Angular CDK
- Prémise en cache avec le service worker Angular
- Pré-afficher des routes avec la CLI Angular
- Rendu côté serveur avec Angular Universal
- Ajouter un fichier manifeste d'application Web avec Angular CLI