Fermer

juin 4, 2019

17 bibliothèques angulaires que vous devriez connaître


Bien qu'il soit correct d'éviter d'utiliser des bibliothèques externes au cours du développement, elles peuvent néanmoins contribuer à réduire considérablement le temps de développement. Nous répertorions ici quelques bibliothèques angulaires utiles pouvant vous aider à développer des applications avec Angular.

Angular est un cadre de développement Web permettant de créer des applications et des systèmes robustes d’une page. Développé et mis à jour par Google et les responsables de la communauté, Angular est une excellente bibliothèque pour la construction d’applications Web à grande échelle.

Angular regroupe une communauté immense et active. Par conséquent, de nombreuses bibliothèques ont été introduites par la communauté pour outillage fourni par Angular. Aujourd’hui, nous examinerons certaines bibliothèques pouvant être introduites dans des applications existantes, allant des bibliothèques d’utilitaires aux bibliothèques de composants d’interface utilisateur.

1. ng-bootstrap

Il semble juste de commencer par l'implémentation angulaire de la bibliothèque d'interface utilisateur la plus populaire. La bibliothèque ng-bootstrap a été construite de haut en bas avec TypeScript. Contrairement à la version précédente, jQuery a été abandonnée en tant que dépendance, spécifiant le code CSS de Bootstrap comme seule autre dépendance. Avec la plupart des composants JavaScript mis en œuvre, la bibliothèque apparaît comme une solution complète lors de l’utilisation de Bootstrap avec Angular. Le développement actif étant en cours, de plus en plus de composants seront inclus. Avec presque 7k étoiles sur GitHub ng-bootstrap semble être un choix très populaire pour beaucoup de développeurs Angular.

La version angulaire.js de ce projet est encore disponible ici bien que cela ne soit pas maintenu activement.

 ng-bootstrap "title =" ng-bootstrap "/> [19659008] 2. Google Maps angulaire</h2 data-recalc-dims=

L’utilisation de la bibliothèque Google Maps dans Angular est toujours une tâche ardue, car elle est chargée à l’aide d’une balise script, de sorte que les définitions de type ne sont pas facilement disponibles, ce qui entraîne des erreurs de compilation qui nécessitent beaucoup de travail.

La bibliothèque angulaire de Google Maps fournit des services et des directives pour la mise en oeuvre de services de Google Maps, ainsi que des directives pour la création de cartes, l’utilisation de marqueurs, etc. La bibliothèque propose également une fonction asynchrone utile pour la vérification. si la bibliothèque Google Maps est chargée sur la page Web.

Le projet a amassé près de 2 étoiles sur GitHub. Consultez leur documentation pour commencer.

 google-maps "title =" google-maps "/></p data-recalc-dims=

3. ngx-translate

La construction d'une application prenant en charge plusieurs langues peut s'avérer ardue, en particulier pour les applications d'une seule page. Ngx-translate est une excellente bibliothèque pour gérer plusieurs langues dans votre application Angular. Il fournit des services pour charger des traductions qui peuvent être utilisés dans toute l'application. Les traductions peuvent être définies et chargées à l'aide des écouteurs TranslateService et onChange sont également disponibles pour gérer les changements de langue dans l'application.

La configuration est assez simple et la bibliothèque est bien documentée avec des exemples détaillés. Visitez leur page GitHub pour commencer.

4. Angular2-jwt

La gestion des applications d'une page utilisant des jetons Web pour l'authentification nécessite généralement l'utilisation d'intercepteurs pour ajouter des en-têtes aux requêtes réseau. Bien que cela soit facile à mettre en œuvre, il est difficile de filtrer les demandes n’exigeant pas de jetons d’accès. C’est là que cette impressionnante bibliothèque entre en jeu. En utilisant le paquet angular-jwt d’Auth0, vous pouvez charger des jetons d’accès à partir du stockage local ou du stockage de session. Il fournit un HttpInterceptor qui ajoute des en-têtes d'authentification aux demandes. La possibilité de mettre un nom de domaine en liste noire ou en liste blanche est également disponible.

Avec presque 2 étoiles sur le GitHub il s'agit d'une bibliothèque bien documentée avec des exemples adéquats et ne nécessitant que quelques étapes pour commencer. [19659019] 5. AngularFire2

Vous souhaitez implémenter une fonctionnalité temps réel dans votre application Angular? Ne cherchez plus, cette bibliothèque utilise la puissance de RxJS, Firebase et Angular pour permettre la synchronisation des données en temps réel. Il fournit également des services et des fournisseurs permettant d'interroger des documents et des collections sur Cloud Firebase et la base de données en temps réel, gère l'authentification à l'aide de Firebase, gère le téléchargement de fichiers vers Cloud Storage et envoie des notifications push. Le package prend également en charge le rendu côté serveur et les fonctionnalités hors ligne. Vous pouvez facilement importer chaque module individuel pour gérer les fonctionnalités requises dans votre application. Toute la documentation est disponible sur la page GitHub de la bibliothèque

6. ng2-file-upload

La gestion des téléchargements de fichiers dans une application d’une seule page n’est pas une tâche amusante. Ce serait formidable si une bibliothèque externe pouvait gérer le téléchargement de fichiers dans votre application Web. Valon-software, le fabricant de ngx-bootstrap, vous a couvert avec ng2-file-upload, une bibliothèque qui facilite le téléchargement de fichiers.

La bibliothèque prend en charge la fonctionnalité de glisser-déposer en plus de la bonne ancienne implémentation de sélection de fichiers. Il fournit une classe utilitaire ( FileUploader ) qui gère les différentes méthodes de téléchargement de fichier. Il fournit également des événements pour surveiller la progression du téléchargement de fichier, ainsi que les erreurs et succès lors du téléchargement.

La bibliothèque est activement maintenue et compte près de 2 k étoiles sur Github .

 ng2 -file-upload "title =" ng2-file-upload "/></p data-recalc-dims=

7. Matériel angulaire 2

La liste ne serait pas complète sans mentionner une bibliothèque qui implémente les spécifications de conception de matériau de Google. Matière angulaire 2 est un Bibliothèque de composants créée par l’équipe Angular. Elle contient un ensemble de composants qui implémentent les spécifications de la conception de matériaux, allant des boutons aux boîtes de dialogue, en passant par les feuilles de fond, etc .. Elle propose des thèmes entièrement personnalisables et un riche ensemble de composants pouvant être utilisés pour créer rapidement une Angular Material 2 contient près de 40 composants, plus de composants en cours de développement et quatre thèmes prédéfinis.

Commencez avec Angular Material 2 en consultant leur documentation ou GitHub page. [19659003]  Matériau angulaire-2 "title =" Matériau angulaire-2 "/></p data-recalc-dims=

8. ngrx / store

La gestion des états dans les petites applications n’est pas vraiment compliquée et peut être facilement gérée au sein de composants individuels. Toutefois, lorsqu’il est nécessaire de partager des données entre plusieurs composants, il est nécessaire de disposer d’un système de gestion d’état approprié. NgRx propose des bibliothèques réactives optimisées pour Angular. Il offre une déclaration réactive pour Angular dans un paquet appelé ngrx / store. Ce paquetage utilise les technologies RxJS pour offrir une gestion d’état similaire à celle de Redux . Le magasin permet aux développeurs d'écrire des applications cohérentes et performantes dans un environnement contrôlé par l'État. Très similaire à Redux la bibliothèque ngrx / store utilise Action, Réducteurs, Sélection et Stockage pour gérer le flux de données dans les applications Angular. Commencez par utiliser ngrx / store en suivant les étapes répertoriées dans la documentation de la bibliothèque .

9. Cloudinary Angular SDK

Cloudinary est une plate-forme Web SaaS permettant de gérer des ressources multimédias sur des applications mobiles et Web. Il fournit des services pour le téléchargement, le stockage, la manipulation et la livraison de contenus multimédias. Cloudinary propose un SDK pour Angular pouvant être utilisé dans les applications Angular pour le redimensionnement et la conversion d'images. Le SDK peut également être utilisé pour afficher différentes tailles d’images sur différents écrans. Il facilite la livraison des ressources vidéo et image à partir du stockage de Cloudinary.

Visitez le site Web de Cloudinary pour en savoir plus sur la gestion de bout en bout des ressources multimédias. Le SDK peut être trouvé ici sur GitHub .

10. ng2-pdf-viewer

ng2-pdf-viewer est une bibliothèque permettant d'afficher et d'interagir avec les fichiers PDF sur une application Web. La bibliothèque fournit un composant pour le rendu des documents PDF. Le composant peut également être utilisé pour effectuer des opérations sur le fichier PDF sélectionné, par exemple: redimensionnement, rotation, recherche dans le document, etc. Vous pouvez restituer des fichiers localement ou créer un lien vers un document externe.

Visitez leur page de documentation officielle ou leur page sur GitHub .

19659038] 11. ngx-charts

Lors de l'utilisation de données dans une application Web, une visualisation des données s'impose, d'où la nécessité d'une bibliothèque de visualisation de données capable de gérer diverses formes de personnalisation lors du rendu. ngx-charts est assez intéressant car leurs diagrammes reposent principalement sur l'utilisation d'Anngular pour animer des SVG, ce qui offre plus de rapidité et de flexibilité, car la bibliothèque a été optimisée pour une utilisation dans Angular.

Il utilise également d3 pour les fonctions mathématiques, les échelles et les axes, etc. Il est livré avec dix jeux de couleurs ou plus tout en rendant les graphiques entièrement personnalisables en utilisant CSS. Visitez leur page de démonstration pour afficher les différents thèmes et combinaisons de couleurs disponibles, ainsi que leur page GitHub pour commencer à utiliser la bibliothèque. La bibliothèque a recueilli près de 3 000 étoiles sur GitHub et est activement maintenue.

 ngrx-charts "title =" ngrx-charts "/></p data-recalc-dims=

12. Ng-seed / universal

Cette superbe bibliothèque a Le couteau suisse de tous les développeurs angulaires devrait contenir de nombreuses fonctionnalités:

  • ngx-meta: pour manipuler les balises META, les balises de titre et l’amélioration du référencement.
  • ngx-cache : pour la gestion des données à l'échelle de l'application.
  • ngx-auth: pour la gestion de l'authentification basée sur JWT

. Il est livré avec quelques autres packages permettant de gérer le rendu côté serveur, le chargement différé, la gestion des états et les configurations Webpack. [19659003] Clonez le référentiel sur GitHub et suivez les instructions pour commencer.

13. Augury

Lors de la création d’applications Web, les outils de développement DevTools jouent un rôle important dans le processus de développement. , diagnostiquer et éditer des applications Web. Dans les applications les plus courantes, DevTools vous permet uniquement d’interagir avec le produit final de votre code, ce qui signifie que vos composants angulaires, vos directives, etc. ont été convertis en JavaScript, HTML et CSS.

Augury, en tant qu’extension de navigateur, vous permet de déboguer et de visualiser votre Application angulaire dans son état pré-compilé. Avec Augury, vous pouvez inspecter vos composants et vous assurer qu’ils fonctionnent comme ils le devraient. Augury fonctionne mieux avec les cartes source, assurez-vous donc de générer des cartes source pour une meilleure expérience d’utilisation d’Augury.

Vous pouvez télécharger l’extension pour Chrome ou Firefox . Visitez leur page GitHub si vous souhaitez contribuer ou soulever des questions.

14. ngx-moment

Moment.js est une bibliothèque d’utilitaires permettant de manipuler le temps (pas ce que vous pensez). Il fournit un ensemble de fonctions permettant d'analyser, de formater, de valider, etc., à l'aide de JavaScript. ngx-moment s'appuie sur la bibliothèque Moment.js, fournissant des pipes angulaires à utiliser dans les composants. Elle contient de nombreux tuyaux pour les fonctions fournies par Moment.js, éliminant ainsi efficacement les frais généraux liés à l'importation des fonctions dans chaque composant à utiliser.

La bibliothèque est activement maintenue et est relativement facile à utiliser. Visitez la page GitHub et parcourez la documentation pour commencer.

15. ngx pipes

Angois.js était amusant, il contenait un ensemble de pipes pour transformer les données avant le rendu. Les filtres sont ce qu'ils s'appelaient dans Angular.js. Eh bien, pour des raisons de performances, les versions angulaires les plus récentes n'incluent pas les canaux de filtrage ou les listes de commande. Angular pipes est une bibliothèque contenant un ensemble de tuyaux utiles à utiliser dans votre projet Angular. Il contient des canaux permettant d'effectuer des opérations telles que: rogner, inverser, faire correspondre et numériser des chaînes, plumer, mélanger et ordonner des tableaux.

Il est bien documenté et facile à intégrer. La mise en route devrait être un jeu d’enfant et, bientôt, vous pourrez commencer à en faire plus avec les pipes. Consultez la documentation ou leur page GitHub pour commencer.

16. Angular Epic Spinners

Lorsqu'il est question d'interactivité sur une page Web, vous devez penser à avertir les utilisateurs lorsque des processus qui ne leur sont pas visibles sont en cours. Le moment venu, vous devez afficher un indicateur de chargement. Certains sites ont des indicateurs de chargement personnalisés pour leur application, mais si vous préférez avoir un ensemble de filateurs facilement disponibles, cette bibliothèque de filateurs devrait être votre choix.

Angular Epic Spinners est construit sur la bibliothèque de disques épiques, avec des composants angulaires pour chaque composant disponible dans la bibliothèque. Chaque composant peut être importé en tant que module individuel et rendu n'importe où dans votre application. Vous pouvez sélectionner l'un des 20 indicateurs disponibles dans la bibliothèque. Vous pouvez afficher la page de démonstration ou aller directement à la page GitHub .

 angular-epic-spinners "title =" angular-epic-spinners "/> [19659063] 17. Apollo Angular</h2 data-recalc-dims=

GraphQL est un langage de requête pour les API et un environnement d’exécution permettant de répondre aux requêtes faites avec des données, permettant aux développeurs de demander les données dont ils ont besoin dans des domaines spécifiques de leur application. Le client Apollo est une bibliothèque utilisée pour données provenant de points de terminaison GraphQL Apollo possède différentes bibliothèques clientes pour la consommation de données sur le front-end – des bibliothèques existent pour React Angular, Vue, etc.

Apollo Angular est une bibliothèque client conçue pour la consommation de GraphQL par les applications Angular. Apollo Angular est agnostique par rapport à tout routeur utilisé dans l’application. Il prend également en charge le rendu côté serveur. La page de documentation est bien écrite avec des exemples adéquats pour vous aider à démarrer.

Résumé

Les gens évitent parfois d’utiliser l’extérieur bibliothèques dans leurs applications au cours du développement. Bien que cela soit acceptable dans certains cas, des bibliothèques externes peuvent aider à réduire considérablement le temps de développement. De nombreuses bibliothèques auraient pu réaliser tout ce qui vous posait problème au cours du développement. La tâche consiste à trouver la bonne bibliothèque qui convient à vos applications et à vous assurer qu'elle remplit son objectif. Happy coding.

Pour plus d'informations sur la création d'excellentes applications Web

Vous souhaitez en savoir plus sur la création d'excellentes applications Web? Tout commence avec Kendo UI – la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.

En savoir plus sur le Kendo UI

Testez gratuitement le Kendo UI





Source link