Chaque jour, nous publions des conseils, des astuces ou tout simplement un élément utile de notre expérience avec Angular. Ce mouvement a été chaleureusement accueilli et soutenu par la communauté des développeurs.
J'ai décidé d'écrire un article sur les dix trucs les plus appréciés et d'expliquer plus en détail les concepts qui y sont présentés.
Commençons!
Tokenize les objets globaux!
Le tweet le plus populaire parle des jetons DI d'objets globaux.
Dans le frontend, nous sommes habitués au fait qu'il existe de nombreux objets dans l'environnement global. Nous utilisons des objets comme la fenêtre, le document, la méthode de récupération, l'emplacement et nous ne nous attendons jamais à ce qu'ils existent.
Mais, par exemple, dans Angular Universal ou dans l'environnement de test de Jest, il n'y a pas de navigateur, pas d'objet fenêtre, pas de DOM. Et en passant ces entités à travers l'application via des jetons, vous n'aurez jamais de problèmes pour les utiliser, les remplacer ou tester votre code.
Hériter de Observable ou Subject
Je connais de nombreux développeurs qui créent de bons services dans leurs applications. Ces services font bien une chose. Et, puisque nous utilisons RxJS dans l'écosystème angulaire, ces services ne peuvent contenir qu'un seul champ avec un observable ou un sujet à l'intérieur pour transformer les données.
De telles situations peuvent être simplifiées en héritant des services de Observable ou Subject:
Valeur de contrôle comme ReplaySubject
Il peut y avoir des situations où il est nécessaire de souscrire à valueChanges du contrôle réactif, en démarrant le flux à partir de sa valeur actuelle. Vous n'avez plus à réinventer la roue, mais ajoutez simplement cet emballage à vous-même:
Améliorer l'application pour les écrans haute résolution
Saviez-vous que vous pouvez facilement suivre les utilisateurs avec des écrans haute résolution?
De plus, vous pouvez même fournir des éléments multimédias de résolution appropriée pour ces moniteurs en utilisant la balise multimédia native et sans effort supplémentaire:
N'oubliez pas les tuyaux
Les tuyaux sont un excellent outil pour travailler dans le style du cadre angulaire. Ils nous permettent de rester déclaratifs dans nos modèles de composants. Il est triste que certains développeurs Angular évitent de créer leurs propres tuyaux: ils peuvent être utilisés pour transformer proprement des données dans presque toutes les situations.
Et voici un exemple de tube universel pour la conversion de données:
Faites votre boîte de banane
Cette fonctionnalité angulaire a de nombreux noms: banane-dans-une-boîte, liaison bidirectionnelle ou simplement entrée-sortie. Cette approche se trouve généralement dans les formulaires lorsque vous travaillez avec [(ngModel)]. Mais savez-vous comment mettre en œuvre cela pour vos propres composants?
RxJS - le monde inconnu
J'essaie toujours de vérifier tous les paramètres et surcharges pour les opérateurs RxJS que j'utilise. Raison: beaucoup d'entre eux ont des options cachées, apprenant que vous pouvez écrire certains flux plus rapidement et plus facilement.
En outre, il existe également des opérateurs impopulaires. Ils se rencontrent rarement, mais ils peuvent résoudre certains problèmes spécifiques en une seule ligne de code au lieu d'un flux énorme et délicat.
Par exemple, l'une de ces découvertes pour moi était la fonction de comparaison dans l'opérateur distinctUntilChanged:
Et il y avait aussi un tweet si populaire sur RxJS. Une petite astuce pour rendre vos composants un peu plus faciles à développer:
Ou l'opérateur defaultIfEmpty, qui vous permet de mettre une logique utile dans le flux en une ligne de code:
Vous pouvez même écrire votre propre alternative à ngFor
Et une dernière chose: Angular a une syntaxe spéciale pour les sélecteurs de directive comme for ... of ... Vous pouvez l'utiliser pour créer votre propre ngFor pour n'importe laquelle de vos tâches.
Par exemple, vous pouvez faire un rapide ngFor pour itérer sur l'objet Map. Ou un simple pour itérer sur un index d'un nombre à un autre:
Conclusion
Angular est grand et il a beaucoup plus de fonctionnalités. J'ai un certain nombre d'idées de nouvelles astuces et astuces issues de nos meilleures pratiques que je prévois de partager avec la communauté. Si vous êtes intéressé par de nouveaux tweets comme celui-ci, suivez-moi sur Twitter . Et bonne journée!