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 en ligne, sur mobile ou sur ordinateur.
Que contient cette collection ?
Cette collection se concentre sur cinq domaines principaux de l'optimisation d'une application Angular:
- Améliorer les performances de votre application afin d'augmenter le taux de conversion et l'engagement des utilisateurs
- Améliorer la fiabilité de votre application sur les réseaux de mauvaise qualité grâce à la mise en cache préalable des é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 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 message 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 ?
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 de démarrage avec Angular sur angular.io.
Démarrer un 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 une brève présentation de la CLI, tandis que d'autres articles de la collection montrent 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 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 ultérieure.
Si vous ne souhaitez pas installer la CLI de manière globale, vous pouvez l'installer localement et l'exécuter à l'aide de 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 permet de créer les fichiers et la structure de dossiers initiales de votre application, et d'installer les modules Node 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 via 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 les points 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 les grandes listes avec le CDK Angular
- Effectuer une mise en cache préalable avec le service worker Angular
- Précharger les 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