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. Elle fournit des éléments de base qui vous permettent de configurer rapidement une application évolutive et facile à gérer. Angular permet aux développeurs de créer des applications accessibles sur le Web, sur mobile ou sur ordinateur.
Que contient cette collection ?
Cet article se concentre sur cinq domaines principaux de l'optimisation d'une application Angular:
- Améliorer les performances de votre application pour accroître le taux de conversion et l'engagement utilisateur
- 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échargement et du rendu côté serveur
- Rendre votre application installable pour offrir une expérience utilisateur semblable à celle d'une application iOS/Android
- Améliorer l'accessibilité de votre application afin de la rendre utilisable et compréhensible par tous les utilisateurs
Chaque article de la collection décrira des techniques que vous pourrez appliquer directement à vos propres applications.
Qu'est-ce qui ne contient pas dans cette collection ?
Dans cette collection, nous partons du principe que vous connaissez déjà Angular et TypeScript. Si vous ne les maîtrisez pas encore, consultez la documentation TypeScript et le guide Premiers pas avec Angular sur angular.io.
Démarrer un projet
L'interface de ligne de commande (CLI) vous permet de configurer rapidement une application Angular simple côté client. Cet article présente brièvement la CLI, tandis que d'autres de la collection expliquent comment ajouter des fonctionnalités plus avancées, telles que 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 génère la version 8.0.3 ou 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 initiaux et la structure de dossiers 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 la commande suivante:
cd my-app
ng serve
Vous devriez maintenant pouvoir accéder à votre application à l'adresse http://localhost:4200.
Étape suivante
Dans la suite de cette collection, vous apprendrez à améliorer les performances, l'accessibilité et le SEO de votre application Angular. Voici les sujets abordés:
- Fractionnement du code au niveau de la route dans Angular
- Budgets alloués aux performances avec la CLI Angular
- Acheminer les stratégies de préchargement dans Angular
- Optimisation de la détection des modifications dans Angular
- Virtualisez de longues listes avec le CDK Angular
- Prémettre en cache avec le service worker Angular
- Précharger 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