Quelle est la console angulaire et pourquoi vous devriez vous en soucier

Angular Console est un outil open source très utile qui peut être utilisé par tous les développeurs Angular. Découvrez pourquoi dans ce guide pas à pas sur l'utilisation de la console angulaire.

De nos jours, un nouveau terme est soudainement discuté entre développeurs angulaires – Console angulaire. Vous pourriez avoir un ami qui vous posera des questions sur Angular Console.

Dans cet article, nous verrons ce qu'est la console angulaire et comment elle peut être utile aux développeurs angulaires.

Bien qu'elle ait été introduite en août 2018, il y a encore des développeurs qui ne connaissent pas cet outil génial, qui est gratuit et open source. L’intention est de présenter cet outil au plus grand nombre de développeurs angulaires que possible

Veuillez noter que cet outil s’applique non seulement aux débutants, mais à tous les niveaux de développeurs angulaires, y compris les experts.

Il diffère de la CLI angulaire

Si nous nous basons sur son nom, nous pourrions penser que la console angulaire n'est rien d'autre que la CLI angulaire. Mais ce n'est pas le cas. En termes simples, c’est l’interface utilisateur de la CLI angulaire.

Définition de la console angulaire

Je reviens maintenant à la question principale: Angular Console est un produit de bureau développé par Nrwl [qui est une interface graphique pour notre CLI angulaire.

Ainsi, il:

• est une application de bureau multiplate-forme gratuite
• qui permet aux développeurs de travailler avec des espaces de travail angulaires de la CLI
• de la CLI et le met dans l'interface graphique
• Nous aide à passer moins de temps à se souvenir des commandes de la CLI et à plus de temps pour être productif
• Conserve toutes les commandes principales telles que ng, build, start, serve, à portée de clic

In my développement quotidien, je connais la peine de me souvenir des commandes de la CLI. De plus, certaines personnes n’aiment pas regarder tout le temps un écran de console noir. Donc, Angular Console est la meilleure solution à tous ces problèmes.

Comment installer Angular Console

Jusque-là, vous avez peut-être acquis une compréhension de base de Angular Console, mais nous en apprenons davantage lorsque nous pratiquons. pouvez installer la console angulaire.

Vous pouvez installer l’extension console angulaire pour le code Visual Studio directement à partir du marché de Microsoft ou télécharger pour Windows, Mac ou Unix directement à partir du site https: // angularconsole .com / .

Lors du téléchargement, il peut demander son consentement pour autoriser l’accès, comme indiqué ci-dessous:

Comment utiliser la console angulaire [19659009] Il est très facile d’utiliser Angular Console, surtout si vous avez passé beaucoup de temps à utiliser Angular CLI. Je pense que vous trouverez la console plus simple.

Dès que vous aurez terminé le téléchargement, l’écran ci-dessous apparaîtra, qui apparaîtra. montre deux manières de commencer – soit créer un nouvel espace de travail à partir de rien, soit op en projets existants.

Créer un espace de travail

Permet de créer un nouvel espace de travail. Une fois que vous avez commencé à créer un nouvel espace de travail, un formulaire apparaît dans lequel vous devez fournir les informations relatives à votre nouveau projet:

Étape 4 est facultatif. Vous pouvez définir certaines configurations, par exemple si vous souhaitez utiliser IVY (un aperçu optionnel IVY de l'opt-in sera disponible avec Angular 8), si vous souhaitez ignorer «l'installation par npm». vous voulez ignorer l'initialisation de git, etc. Par défaut, il définit la valeur sur false.

Sans la console angulaire, nous besoin de fournir ces informations sous la forme de commandes CLI.

Lorsque vous cliquez sur Créer, il commence à créer l'espace de travail, y compris l'installation des dépendances à partir de package.json en exécutant «npm install».

Jusqu'à présent, nous avons écrit 0 commandes et notre application est déjà créée avec tous les éléments requis. Vraiment génial.

Voici à quoi ça ressemble quand l'espace de travail est créé:

Opérations communes à portée de clic

Si vous êtes un développeur angulaire, alors vous êtes peut-être au courant du nombre de fois où nous utilisons “ng build” ou “ng serve” au cours d'une journée, et le faire à chaque fois à partir d'une console noire peut en être ennuyeux.

une meilleure solution avec Angular Console: il suffit de cliquer sur les boutons et le tour est joué.

La beauté de Angular Console réside dans le fait qu’elle prend en charge des tâches très mineures et les rend configurables. Par exemple, j’ai cliqué sur le bouton «Construire». demande quel environnement nous voulons utiliser, si nous voulons utiliser le compilateur “Ahead of Time” (AOT), etc. :

Si je le souhaite, il sélectionnera la configuration en production, tout comme Angular 6 +.

Générer, Tâches, Extensions

À l'aide de la console Angular, vous pouvez générer du code, exécuter des tâches ks, et utilise des extensions, qui sont des boutons verticaux principaux.

Générer du code

Encore une fois, chaque fois que nous voulons ajouter toute nouvelle composante ou classe ou quoi que ce soit avec CLI, nous devons nous rappeler quelques commandes. Mais en utilisant la console angulaire, nous pouvons le faire aussi facilement.

Ci-dessous se trouvent les éléments de la liste de ceux que vous pouvez générer avec Console:

. Il faut fournir quelques détails généralement classés dans les champs "Important" et "Facultatif". Après quelques clics de souris, un nouveau code sera ajouté à l'application sans utiliser aucun IDE ou CLI.

Execute Tasks

Vous pouvez exécuter presque toutes les tâches importantes comme ng, démarrer, construire, tester, etc. en un seul clic:

Certains d'entre eux sont des scripts package.json, tandis que d'autres sont des scripts liés à des projets.
En dehors de cela, il contient également de jolis graphismes pour tous les événements. Par exemple, j'ai exécuté la commande test, qui ouvrait le navigateur à:

Installer des extensions

Avec Angular Console, vous pouvez également installer extensions en un seul clic.

Voici quelques exemples d’extensions par défaut:

Vous pouvez voir ici notre Progress Kendo UI

Par exemple, si vous souhaitez ajouter l’extension kendo-angular-popup, cliquez simplement sur l’extension, puis dans la fenêtre suivante, cliquez sur «Ajouter», ce qui ajoutera l’extension Kendo UI dans votre application:

Notez qu'elle sera soumise à une version d'essai si vous ne disposez pas d'une interface utilisateur Kendo. licence mentionnée ici: https://www.npmjs.com/package/@progress/kendo-angular-popup

Vous trouverez tous les packages Progress npm ici: https: // www.n pmjs.com/~progress[19659064unsetReçudestâchesexécutées

Une autre fonctionnalité intéressante de Angular Console est qu'il affiche toutes les tâches récemment exécutées dans presque toutes les fenêtres du bas, comme vous pouvez le voir ci-dessous:

Cette fenêtre vous permet de réexécuter la tâche ou de la supprimer. Vous pouvez également voir le journal complet avec toutes les tâches particulières.

Cela fera partie de Angular Soon

retour à la question, pourquoi un développeur angulaire devrait se soucier de cet outil.

Bien que cet outil ne soit actuellement pas développé par l'équipe angulaire actuelle, il fera bientôt partie des outils angulaires, car l'équipe de Nrwl travaille en étroite collaboration avec l'équipe angulaire. l’équipe pour transférer les responsabilités de la console angulaire à l’équipe angulaire.Nous sommes donc certains que la console angulaire restera très longtemps.

Il s’agit également d’un projet open source, vous pouvez donc contribuer à ce projet génial ici: https://github.com/nrwl/angular-console .

J'espère que ça aide!

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

Vous souhaitez en savoir plus sur la création d'applications Web exceptionnelles 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 Kendo UI