Dans cet article, vous apprendrez à configurer Angular CLI sur votre ordinateur de démarrage Windows et à l’utiliser pour créer de véritables fonctions / tâches Angular.

Comme vous le savez, Angular est largement utilisé pour créer des SPA (fonctions de page Web unique). Angular est un framework open source recherché et à la mode pour améliorer les utilitaires Internet de Google, par rapport à toutes les différentes bibliothèques et frameworks tels que ReactJs, VueJs, MithrilJs, etc.

Les explications derrière cela sont multiples. Angular vous donne un accès complet pour utiliser tous les sous-packages tels que le routage, les appels asynchrones, la sécurité, etc.

Introduction – Ce que l’on vous enseigne

Dans ce blog, nous couvrirons la configuration d’Angular sur Windows Home. À la fin de l’article, vous verrez la bonne façon de –

  • Configurez node / npm sur votre ordinateur.
  • Utilisez et configurez Angular CLI globalement.
  • Suivez les instructions de la CLI angulaire.
  • Créez un espace de travail préliminaire pour l’appliance.
  • Exécutez l’utilitaire Angular dans le navigateur.

Nous supposons que vous êtes déjà familiarisé avec les bases de l’amélioration d’Internet avec HTML, CSS et JavaScript. (Dans ce cas, veuillez procéder dans tout autre cas que nous recommandons fortement Apprend ceci premier saut plus tôt que dans Angular).

Dans l’intention de continuer, il est important d’avoir –

  • Machine Windows à la maison
  • Bonne connectivité Web
  • Compte personnel Windows à la maison avec tous les droits de configuration / administrateur, l’endroit où vous pouvez éventuellement configurer librement tous les packages.

PS: lorsque vous travaillez avec des données angulaires de manuscrit est agréable à avoir, mais ce n’est tout simplement pas obligatoire.

Une note rapide sur Node.js.

La toute première chose à insérer est Node.js. (Si déjà là, ignorez cette moitié et passez à la partie suivante de ce blog.)

Node.js est à nouveau un environnement d’exécution JavaScript open source et multiplateforme qui permet d’exécuter du code JavaScript en dehors d’un navigateur (sur le.) Du côté serveur). Node.js est responsable de la gestion et de la configuration de toutes les dépendances npm sur votre utilitaire Angular. Il fournit les bibliothèques nécessaires pour gérer l’entreprise Angular. Node.js sert d’environnement d’exécution pour tout utilitaire Angular qui utilise un serveur sur localhost. Pour plus d’informations sur Node.js, veuillez contacter doc officiels.

Angular nécessite le modèle le plus récent / stable de Node.js pour continuer. Aller à site officiel dans le but de configurer Node.js sur votre ordinateur au niveau national.

Vous pouvez éventuellement configurer n’importe quel modèle, les disponible une ou le dernier modèle stable, selon vos besoins. Cliquez simplement sur le bouton et le package sera téléchargé sur votre ordinateur.

Comment installer Angular sur Windows

Une fois que vous avez téléchargé, cliquez sur les icônes téléchargées et suivez les étapes jusqu’à ce que la configuration soit terminée. Pour vérifier le modèle entré dans Node.js, vous devez utiliser la commande suivante dans une fenêtre de terminal / console. – –

node -v

ou alors

node — — model

Vouloir pour NPM pour l’amélioration de l’angle

Comme un nœud.js sert d’environnement d’exécution pour le périphérique, similar NPM (Node Bundle Supervisor) est utilisé comme dispositif de gestion des dépendances pour tout le monde J.avaS.utilitaire cript. NPM nous permet d’enrôler les bibliothèques requises pour tout utilitaire angulaire;; au Exemple jQuery, Angular-Router, Angular-http, Bootstrap et de nombreux extras.

Vous pourrez peut-être découvrir une variété de packages disponibles dans le enregistrer npm ici.

Regardez: si vous le faites pour avoir mettre en nœud.js, il installera mécaniquement NPM dans votre machine, et Vous pourrez peut-être vérifier le modèle entré à l’aide de la commande suivante.

npm -v

CLI angulaire– De quoi s’agit-il et entièrement meublé informations

Au tout début d’Angular, les constructeurs ont créé des structures complètes, des informations Webpack, construit le cours, etc. à partir de zéro pour chacune de leurs propres entreprises, ce qui était un cours assez long et fastidieux. Pour faciliter la tâche du développeur, le personnel angulaire vous offre l’appareil convivial nommé CLI angulaire.

Étant donné que l’identification suggère que la CLI (interface de ligne de commande) fournit à une personne (développeur) une interface confortable, vous pourrez peut-être suivre les instructions pour rendre votre vie d’amélioration plus facile et plus rapide.

Angular CLI dispose d’une variété d’instructions qui peuvent être utilisées de la création d’une toute nouvelle entreprise à la création de pièces en passant par la création d’un fichier de configuration de routage, par les fournisseurs, et bien plus encore.

Configurer la stratégie CLI angulaire

Pour insérer la CLI angulaire dans votre ordinateur, opdans la fenêtre du terminal et exécutez la commande suivante:

npm set up -g @angular/cli 

Le caractère -g indique que la CLI sera insérée globalement sur votre ordinateur. Cela signifie que vous pouvez potentiellement créer ou exécuter n’importe quelle commande CLI n’importe où sur votre ordinateur. ÖLorsque vous exécutez la commande ci-dessus, la CLI sera probablement entrée dans votre ordinateur. et Vous pourrez peut-être confirmer le modèle saisi avec la commande suivante:

ng model 

Pour en savoir plus sur les instructions de la CLI angulaire, vous pourrez peut-être demander conseil ce blog Cela comprend une variété d’instructions qui doivent être utilisées.

Démarrer une entreprise avec Angular CLI

Construisons maintenant notre première société Angular à l’aide de la CLI angulaire. Ouvrez la fenêtre de votre terminal et entrez la commande suivante sur votre ordinateur.

ng new hello-world

Ici, ng est notre préfixe CLI, nouveau signifie que nous démarrons une toute nouvelle entreprise, et bonjour le monde est notre entreprise. Vous pourrez peut-être choisir l’identité dont vous avez besoin.

Après avoir exécuté cette commande, déterminez la structure globale de votre entreprise à partir de la liste des emplacements où vous exécutez cette commande. Le dossier de l’entreprise sera probablement quelque chose comme celui ci-dessous dans l’image –

Structure d’entreprise angulaire

Le fichier principal à rendre lors de l’exécution de cet utilitaire est probablement index.html src Dossier.

  • src Le dossier contient des informations de livraison pour la société de services publics de niveau racine.
  • possession Le dossier contient tous les objets statiques tels que des photos, des polices, etc.
  • Modules de nœuds Ce dossier est créé lors de son exécution Au dessus du niveau de la mer installer par Superviseur de bundle (Au dessus du niveau de la mer) et inclut toutes ou toutes les dépendances de l’entreprise troisièmement, venez ensemble modules requis pour l’entreprise.
  • e2e Le dossier contient l’intégralité du code de livraison lié à Check Instances.You alors peut le personnaliser selon vos besoins.
  • LISEZMOI.md Le fichier est utilisé comme documentation pour l’application.
  • P.ackage.json configures Au dessus du niveau de la mer Dépendances qui peut être trouvé pour le Entreprises dans la zone de travail avec leurs variations spécifiées.

Vous trouverez plus de détails sur les pièces / service et le code de livraison ce lien. Cours les utilité

un avec la technologie d’installation de l’utilitaire angulaire via CLI, c’est Il est temps de faire fonctionner l’appareil au niveau national. CLI angulaire à venirs avec plein Chaîne d’outils/ Instructions pour le cas des fonctions frontales de votre machine.

Exécutez la commande suivante les Terminal (accédez à la liste des entreprises si vous ne figurez pas dans cette liste.).

ng serve 

ou alors

ng serve --open 

L’option –open (ou simplement -o) ouvre mécaniquement votre navigateur à http: // localhost: 4200 /.

ng servecommand rend votre utilitaire disponible sur le serveur localhost, que vous pouvez vérifier en accédant à votre navigateur à l’url suivante http: // localhost: 4200 /. Vous pourrez peut-être ajuster le port en fonction de vos besoins.

Accès à l’interface Internet angulaire

la commande ng pourrait prendre une quelques secondess pour exécuter votre utilitaire, et Une fois que cela est fait, la meilleure chose à faire est de consulter un site Internet semblable à le suivant.

Et nous sommes atteints!

Vous pouvez maintenant également apporter des modifications au modèle de la pièce standard, qui est app.part.html.

De plus, lors du routage, vous pouvez générer et apprendre de nombreuses informations sur les pièces / service / routage à l’aide des instructions CLI selon vos besoins.

Conclusion

Sur ce blog, vous avez haet être enseignét – –

  • Qu’est-ce que Node / NPM et comment le configurer et l’utiliser?
  • W.Hat est une CLI angulaire et la façon dont vous devriez l’utiliser après l’avoir tapé dans le vôtre W.machine indows,
  • Apprendre à créer une Nouveau UNEngular enterprise à partir de zéro à l’aide de la commande CLIs et démarrez-le.

À présent le Vous pouvez avoir des bras primaires– –au Dates commençant par un Utilitaire d’angle, Y.ou peut commencer Explorez également Angular.

Si vous avez des questions ou des doutes sur ce blog, veuillez nous en informer dans la section commentaires ci-dessousnous pourrions être plusune Je suis heureux que cela vous aide!





Source link

Recent Posts