Un guide d'installation et de configuration d'angle sous Windows en quelques étapes simples – Bien installer son serveur

Dans cet article, vous apprendrez à configurer Angular CLI dans votre machine Windows et à l'utiliser pour créer des fonctions / tâches d'angle réel.

Comme vous pouvez le voir, Angular est couramment utilisé pour créer des SPA (fonctionnalités de page Web unique). Angular est un framework en demande, open source et à la mode pour améliorer les outils 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 nombreuses. Angular vous donne un accès complet pour profiter de tous les sous-packages tels que le routage, les appels Async, la sécurité, etc.

Introduction – Ce que vous voulez apprendre

Dans ce blog, nous allons rassembler la mise en page d'Angular sur Windows Home. Lorsque l'article est terminé, vous percevez la bonne façon de –

• Configurez Node / npm sur votre ordinateur.
• Utilisez et configurez Angular CLI globalement.
• Exécutez les instructions de la CLI angulaire.
• Créez une zone de travail préliminaire pour l'appareil.
• Exécutez l'outil Angular dans le navigateur.

Nous supposons que vous connaissez peut-être déjà les améliorations de base sur Internet ainsi que HTML, CSS et JavaScript. (dans ce cas, continuez dans tous les autres cas, nous vous recommandons fortement de les apprendre d'abord plutôt que de sauter dans Angular).

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

• Machine de Windows à la maison
• Bonne connexion Internet
• Compte personnel Windows avec tous les droits de configuration / admin, à la place, vous pouvez éventuellement configurer n'importe quel package librement.

PS: lorsque vous travaillez avec Angular, les données de Manuscrit est agréable à avoir, mais ce n'est tout simplement pas obligatoire.

Une alerte rapide sur Node.js

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

Node.js est à nouveau un environnement d'exécution JavaScript open-source et multiplateforme qui vous permet d'exécuter du code JavaScript en extérieur dans un navigateur Web (sur Page Serveur). Node.js est responsable de la gestion et de la configuration de toutes les dépendances npm sur votre outil Angular. Il fournit les bibliothèques nécessaires pour exécuter l'entreprise angulaire. Node.js agit comme un environnement d'exécution pour tout outil Angular qui utilise des serveurs sur localhost. Pour obtenir des conseils sur des données supplémentaires sur Node.js 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 domestique.

Vous pouvez éventuellement configurer n'importe quel modèle, tanière cadeau une ou le dernier modèle lisse, selon votre désir. Cliquez simplement sur le bouton pour télécharger le package sur votre ordinateur.

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

nœud -v

ou

nœud - - modèle

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

Noeud Som.js agit comme un environnement de temps de conduite pour l'appareil, similairement NPM (node bundle supervisor) est utilisé comme dispositif de gestion des dépendances pour tout le monde JavaSoutils de cript. NPM nous permettra de charger les bibliothèques requises pour tout outil angulaire; à occurrence jQuery, carrés d'angle, angle http, bootstrap et bien plus encore.

Vous pouvez découvrir un certain nombre de packages disponibles dans la boutique npm ici.

Observateur: quand vous ont mettre dans Node.js il va configurer NPM mécaniquement dans votre machine, et Vous pouvez éventuellement confirmer le modèle que vous utilisez en utilisant la commande ci-dessous.

npm  -v

Angle CLI– Qu'est-ce que c'est et plein informations

Plus tôt dans les premiers jours d'Angular, les constructeurs avaient l'habitude de créer une structure complète, des informations sur le package Web, de construire le cours, etc. pour toute entreprise à partir de zéro, ce qui prenait beaucoup de temps et de temps. Pour faciliter la tâche du développeur, le personnel angulaire vous offre un appareil facile à utiliser appelé Angle CLI.

Parce que l'identification suggère que la CLI (interface de ligne de commande) fournit à une personne (développeur) une interface agréable au lieu d'exécuter éventuellement des instructions pour rendre votre vie d'amélioration plus facile et plus rapide.

Angular CLI est livré avec une variété d'instructions qui peuvent être obtenues de la création d'une toute nouvelle entreprise, à la création de pièces, à la création d'un fichier de configuration de routage, aux fournisseurs et bien plus encore.

Mettre en place une stratégie pour la CLI angulaire

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

npm  configurer -g @ angle /cli 

place -g signifie que la CLI est installée globalement sur votre ordinateur, ce qui signifie que vous pourrez peut-être créer ou exécuter n'importe quelle commande de la CLI n'importe où sur votre ordinateur. OLorsque vous exécutez la commande ci-dessus, la CLI sera probablement insérée dans votre ordinateur, et Vous pouvez éventuellement confirmer le modèle inséré à l'aide de la commande suivante:

modèle ng 

Si vous souhaitez en savoir plus sur les instructions de la CLI angulaire, vous pouvez demander conseil à ce blog qui contient un certain nombre d'instructions à utiliser.

Faites un pari en utilisant la CLI angulaire

Créons maintenant notre toute première entreprise Angular à l'aide de la CLI angulaire. Ouvrez la fenêtre du terminal et entrez la commande ci-dessous sur votre machine.

ng nouveau bonjour le monde

Voici notre préfixe CLI, de nouveaux moyens que nous créons une toute nouvelle entreprise, et bon monde est notre entreprise. Vous pourrez peut-être choisir n'importe quelle pièce d'identité dont vous avez besoin.

Après avoir exécuté cette commande, vous découvrirez la structure globale de l'entreprise dans l'entrée au lieu d'exécuter cette commande. Le répertoire des entreprises sera probablement quelque chose comme celui ci-dessous dans l'image –

Structure Angular Venture

Le fichier principal à rendre lors de l'utilisation de cet outil sera probablement index.html comme courant dans src dossier.

• src le dossier contient des informations d'approvisionnement pour l'outil de niveau racine.
• actifs le dossier contient tous les éléments statiques tels que les images, les polices, etc.
• node_modules Ce dossier est créé lorsque vous conduisez npm installer par guide des paquets (npm) et il inclut toutes les dépendances de l'entreprise ou autres troisième se réunissent modules requis pour l’entreprise.
• e2e le dossier contient tout le code d'approvisionnement associé à Check Occurrences.You peut le personnaliser selon vos besoins.
• LISEZMOI.md le fichier est utilisé comme documentation pour l'application.
• Package.json csur les chiffres npm dépendances qui peut être trouvé pour activités dans la zone de travail avec des variations spécifiques.

Pour plus d'informations sur les pièces / service et le code de fourniture, vous pourrez peut-être découvrir ce lien. Courir le utilitaire

un avec la technologie de configuration d'utilitaire angulaire utilisant CLI, il est il est temps de faire fonctionner l'appareil au niveau national. La CLI angulaire arrives avec plein chaîne d'outils/ instructions pour l'événement avec les fonctions frontales de votre machine.

Exécutez la commande suivante sur le terminal (accédez à la fiche d'entreprise si vous ne vous trouvez pas dans la fiche).

ng servir 

ou

ng servir  --ouvert 

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

ng servecommand servira votre outil sur le serveur localhost, que vous pouvez vérifier en accédant à votre navigateur avec l'URL ci-dessous http: // localhost: 4200 /. Vous pouvez personnaliser le port selon vos besoins.

Accès à l'interface Internet angulaire

La commande ng server pourrait prendre une quelques secondess pour exécuter votre outil, et Dès qu'il est terminé, il est préférable de consulter un site Internet à peu près comme le suivant.

Et nous sommes atteints!

Maintenant, vous pouvez également apporter des modifications au modèle de pièce par défaut qui est app.part.html.

En outre, vous pouvez générer une variété d'informations sur les pièces / service / routage en utilisant les instructions CLI en fonction de vos besoins et en continuant à apprendre.

Conclusion

Sur ce blog vous l'avezve être enseignét –

• Qu'est-ce que Node / NPM et comment le configurer et l'utiliser,
• Wle chapeau est bordé CLI et comment l'utiliser après l'avoir mis Windows machine,
• Apprendre créer une Nouveau UNEActivité normale à partir de zéro à l'aide de la commande CLIs et lancez-le.

À présent cette tu peux avoir des bras primaires–sur données pour commencer avec un Outil d'angle, ytu peux commencer explorer les ajouts angulaires.

Si vous avez des questions ou des doutes concernant ce journal Web, vous pouvez nous le dire dans la section commentaires ci-dessous…nous pouvons être extraune heureux que cela vous aide!