Comment organiser des projets Angular ? L'article suivant compile et partage 5 conseils pratiques pour gérer des projets Angular. J'espère qu'il sera utile à tout le monde ! 
Entrée front-end (vue) au cours de maîtrise : entrez dans l'apprentissage
À mesure que de nouvelles fonctionnalités sont publiées, Web apps deviennent de plus en plus volumineuses. Dans le parcours DevOps d'une entreprise, ce type de changement de version se produit quotidiennement. [Tutoriels associés recommandés : "tutoriel angulaire"]
Dans un cycle de publication aussi rapide, le code peut rapidement devenir lourd. Surtout les projets développés sur la base de JavaScript , comme NextJS ou Angular.
Voici nos 5 meilleures pratiques pour gérer des projets Angular pour une lisibilité, une maintenabilité et une évolutivité maximales.
De nombreux cœurs d’application unique sont des bases de code avec des classes surchargées. De par leur nature, ces programmes volumineux sont difficiles à maintenir. Ils sont fragiles dans le sens où changer une ligne de code peut avoir des effets catastrophiques sur l'ensemble du programme. Le principe de responsabilité unique peut prévenir ces problèmes.
Le principe de responsabilité unique signifie qu’un composant a une et une seule fonction.
La création d'applications à l'aide de cette approche aboutit à un cadre modulaire dans lequel l'application est reliée par ces blocs de code.
L'utilisation de cette approche peut rendre les programmes plus lisibles et plus maintenables. Il peut également localiser facilement les fonctions spécifiées dans l'application.
Pour vous assurer que votre code répond à cette exigence, posez-vous cette question :这代码是干什么的？ Si votre réponse contient le mot-clé and , vous devez alors refactoriser votre code en code à responsabilité unique.
Créer et étendre des applications Angular est un exercice continu. Au fil du temps, organiser vos projets selon le principe de responsabilité unique rendra vos applications propres, lisibles et maintenables.
Les modules en Angular sont la mise en œuvre du principe unique. Dans Angular , chaque module représente une fonctionnalité distincte et indépendante.
Angular fournit plusieurs modules de type pour spécifier comment les regrouper ou les organiser logiquement.
Cœur
Le module Core est un NgModule utilisé pour instancier l'application et charger les fonctions de base pour une utilisation globale.
Par conséquent, tout service singleton doit être implémenté dans le module principal. L’en-tête, le pied de page ou la barre de navigation sont des modules de ce type.
Tous les services (services singleton) qui ont une et une seule instance par application doivent être implémentés dans le module principal. Par exemple, service d'authentification ou service utilisateur.
Fonctionnalité
Les modules fonction représentent le code qui crée les fonctionnalités de l'application. Par exemple, dans une application d'achat en ligne, nous aurions la fonction d'ajouter des articles au panier et un module séparé pour le paiement.
Commun
Les modules partagés sont constitués de modules qui peuvent être combinés pour créer de nouvelles fonctionnalités. Par exemple, la fonction de recherche peut être utilisée pour plusieurs fonctions de la plateforme.
Structurer votre code de cette manière facilite la localisation des éléments et augmente les chances de réutilisation du code.
Les fichiers de style peuvent rapidement devenir désorganisés s'ils ne suivent pas une structure commune. Modèle de bonnes pratiques générales 7-1 , qui utilise 7 dossiers et 1 fichier, comme indiqué ci-dessous :
App - le dossier principal du projet
Abstract - La section abstraite, contenant toutes les variables, mixins et composants similaires
Core - Contient la mise en page, la réinitialisation et le code passe-partout pour l'ensemble du site
Composants - Contient des styles pour tous les composants à créer pour un site Web, tels que les boutons, les onglets et les modaux.
Mise en page - Contient les fichiers nécessaires pour définir la mise en page du site, tels que les en-têtes et les pieds de page.
Pages - Contient des styles pour chaque page spécifique
Fournisseurs - Ce dossier facultatif convient au framework d'amorçage utilisé par le projet, tel que bootstrap
Créez un nouveau fichier all.scss dans chaque dossier contenant toutes les affectations pour ce dossier particulier.
De nombreux services sont conçus pour fonctionner à l’échelle mondiale. Ensuite, dans certains cas, un composant nécessite un service. Les pratiques traditionnelles des composants de codage recommandent le principe de responsabilité unique.
Dans le cadre de cette approche, les services et les composants sont écrits sous forme de projets distincts.
Mais que se passe-t-il lorsque vous envisagez de supprimer les composants de ces services ? Vous vous retrouvez avec un code mort, ce qui ne fait qu'encombrer l'entrepôt. Dans ce cas, la meilleure pratique consiste à placer le service à l’intérieur du composant.
De cette façon, la maintenance des composants et des services est plus facile.
Une structure de fichiers imbriquée est intrinsèquement plus facile à naviguer qu'un système de fichiers plat qui place tous les fichiers de code dans un seul répertoire.
Cependant, à mesure que le projet approche, la structure des fichiers du projet peut devenir assez complexe. Bien que cela facilite la localisation du code, cela présente des défis lors de l'écriture des instructions d'importation.
Lorsqu'une structure de répertoires commence à dépasser trois ou quatre niveaux, les instructions import peuvent devenir très longues et difficiles à lire.
Pour résoudre ce problème, nous pouvons configurer l'alias du chemin dans le fichier tsconfig.json. Dans ce fichier, il y a un tableau nommé compilerOptions . Il s'agit de l'alias de chemin que vous configurez dans votre application.
Lorsque le code est compilé, les alias de chemin définis dans ce tableau sont remplacés par des chemins réels. La valeur de chaque chemin est un objet clé-valeur contenant le chemin et l'alias réels.
Créer et étendre des applications Angular est un exercice continu.