Το Angular είναι ένα πλαίσιο εφαρμογών ιστού ανοιχτού κώδικα που χρησιμοποιεί JavaScript. Σε αντίθεση με ορισμένα άλλα πλαίσια ή γλώσσες προγραμματισμού, πρέπει να ρυθμίσετε τη μεταβλητή περιβάλλοντος στα Windows για να λειτουργήσει αυτό το πλαίσιο. Ως εκ τούτου, πρέπει να μάθουμε πώς να ρυθμίστε το Angular στο VS Code και γράψτε έναν κωδικό επίδειξης, αυτό θα κάνουμε.
Πώς να ρυθμίσετε το Angular στο VS Code
Για να ρυθμίσετε το Angular σε VS Code στον υπολογιστή σας με Windows, πρέπει να ακολουθήσετε τα βήματα που αναφέρονται παρακάτω.
- Εγκαταστήστε τον κώδικα του Visual Studio
- Ρυθμίστε το NodeJS
- Ρυθμίστε τη μεταβλητή περιβάλλοντος
- Εγκαταστήστε το Angular
Ας μιλήσουμε για αυτούς λεπτομερώς.
1] Εγκαταστήστε τον κώδικα του Visual Studio
Για να ξεκινήσετε με το ταξίδι κωδικοποίησης στο Angular βασίλειο, πρέπει να εγκαταστήσουμε τον κώδικα του Visual Studio. Για να κάνετε το ίδιο, πρέπει να πάτε στο code.visualstudio.com και κατεβάστε την εφαρμογή για το περιβάλλον σας. Μόλις γίνει λήψη, μεταβείτε στο Κατεβάστε φάκελο, εκτελέστε το μέσο εγκατάστασης και εγκαταστήστε την εφαρμογή.
2] Ρυθμίστε το NodeJS
Είναι σημαντικό να σημειωθεί ότι ενώ μπορείτε να χρησιμοποιήσετε το VSCode για να επεξεργαστείτε το Angular, δεν μπορείτε να το εκτελέσετε απευθείας μέσα στον επεξεργαστή. Το Angular εκτελείται στην πραγματικότητα μέσα στο NodeJS, το οποίο είναι ένα περιβάλλον JavaScript που αποτελεί μέρος της τοπικής ρύθμισης ανάπτυξης ιστού. Με το NodeJS, μπορείτε να εκτελέσετε το Angular στον τοπικό σας κεντρικό υπολογιστή σε ένα πρόγραμμα περιήγησης ιστού. Κάθε φορά που κάνετε αλλαγές στον Angular κώδικα σας στο VSCode, θα επαναφορτώνεται αυτόματα στο πρόγραμμα περιήγησης, το οποίο είναι γνωστό ως 'hot reload'. Ωστόσο, δεδομένου ότι το Angular εκτελείται στο NodeJS, θα πρέπει πρώτα να εγκαταστήσετε το NodeJS. Μπορείτε να το κάνετε αυτό πηγαίνοντας στο nodejs.org .
Κατά την εγκατάσταση του Node JS για εκτέλεση του Angular, επιλέξτε μια τοποθεσία που είναι εύκολο να θυμάστε, όπως μια απλή και σύντομη διαδρομή. Αυτό θα είναι χρήσιμο εάν χρειαστεί να χρησιμοποιήσετε αργότερα το NodeJS. Έτσι, αντί να εγκαταστήσετε την εφαρμογή σε αρχεία προγράμματος, εγκαταστήστε την στο D:\NodeJS, αν και δεν έχει σημασία.
3] Ρυθμίστε τη μεταβλητή περιβάλλοντος
Στη συνέχεια, πρέπει να ρυθμίσουμε τη μεταβλητή περιβάλλοντος για τα NodeJs προτού προχωρήσουμε και εγκαταστήσουμε το Angular. Για να κάνετε το ίδιο, ακολουθήστε αυτά τα βήματα.
- Πατήστε Win + S, πληκτρολογήστε «Μεταβλητή Περιβάλλοντος» και μετά ανοίξτε το.
- Μόλις τελειώσετε, πρέπει να αντιγράψετε τη θέση του NodeJS. Απλώς για αναφορά, το δικό μας είναι το D:\NodeJS.
- Κάντε κλικ στο Environment Variable.
- Τώρα, επιλέξτε Διαδρομή στην ενότητα Μεταβλητή συστήματος και κάντε κλικ στην Επεξεργασία.
- Κάντε κλικ στο Νέο, επικολλήστε την τοποθεσία και κάντε κλικ στο ΟΚ.
Με αυτόν τον τρόπο, έχετε εισαγάγει τη μεταβλητή NodeJS Environment. Για να ελέγξετε αν λειτουργεί, ανοίξτε Γραμμή εντολών και μετά τρέξε κόμβος – έκδοση. Εάν σας δίνει μια έκδοση, καλό είναι να εγκαταστήσετε το Angular.
4] Εγκαταστήστε το Angular
Αφού δημιουργήσουμε ένα κατάλληλο περιβάλλον με την εγκατάσταση του NodeJS, θα εγκαταστήσουμε το Angular. Ακολουθήστε τα βήματα που αναφέρονται παρακάτω για να κάνετε το ίδιο.
- Ανοιξε Κωδικός Visual Studio.
- Μεταβείτε στη θέση όπου θέλετε να δημιουργήσετε ένα αρχείο Angular χρησιμοποιώντας την εντολή CD ή Change Directory. Έχουμε δημιουργήσει έναν νέο κατάλογο στη μονάδα δίσκου D για να δημιουργήσουμε ένα έργο, δείτε το στιγμιότυπο οθόνης που επισυνάπτεται.
- Για να εγκαταστήσουμε το angular στον φάκελο, πρέπει να εκτελέσουμε την ακόλουθη εντολή.
npm install -g @angular/cli
- Στη συνέχεια, εκτελέστε την ακόλουθη εντολή για να δημιουργήσετε ένα νέο έργο.
ng new foldername
- Τώρα, μπείτε σε αυτόν τον φάκελο χρησιμοποιώντας το 'cd foldername' και ξεκινήστε τον διακομιστή χρησιμοποιώντας του σερβιρίσματος.
Ας ελπίσουμε ότι τώρα μπορείτε να εκτελέσετε το Angular χωρίς προβλήματα.
Ανάγνωση: Πώς να εγκαταστήσετε το JavaScript στο VSCode ?
Αυτή η εντολή δεν είναι διαθέσιμη κατά την εκτέλεση του Angular CLI εκτός χώρου εργασίας
Όταν έτρεξα την εντολή 'ng serve' έλαβα ένα σφάλμα που έλεγε ότι η εντολή δεν ήταν διαθέσιμη. Πολλοί άνθρωποι υποψιάζονται ότι το Angular δεν είναι εγκατεστημένο στο σύστημά τους, ενώ, στην πραγματικότητα, το μόνο πρόβλημα είναι ότι δεν βρίσκεστε στον σωστό κατάλογο. Για να το επιλύσετε, απλώς κάντε «cd» στον κατάλογο όπου βρίσκεται το έργο, όχι τη ρίζα αλλά την πραγματική θέση του έργου. Έτσι, στην αρχή, όταν έτρεξα την εντολή, ήμουν στο AngularProject, που είναι ο ριζικός φάκελος μου, οπότε δεν λειτούργησε. Ωστόσο, λειτούργησε απρόσκοπτα όταν άλλαξα τον κατάλογο σε sampleFolder και έτρεξα την ίδια εντολή.
Μια λύση που θα σας προτείναμε να κάνετε είναι να ανοίξετε την Εξερεύνηση αρχείων, να μεταβείτε στη θέση όπου είναι αποθηκευμένο το έργο σας, να κάνετε δεξί κλικ στην κενή οθόνη και να επιλέξετε Τερματικό > Γραμμή εντολών . Και μετά τρέξε του σερβιρίσματος.
Ανάγνωση: Πώς να κατεβάσετε και να εγκαταστήσετε το Java JDK στα Windows ?
λειτουργία δοκιμής windows 7
Πώς να ρυθμίσετε το Angular έργο στον κώδικα του Visual Studio;
Για να ρυθμίσετε ένα έργο Angular, πρέπει πρώτα να εγκαταστήσετε το NodeJS στον υπολογιστή σας. Μόλις τελειώσετε, πρέπει να διαμορφώσετε τη μεταβλητή περιβάλλοντος και να εγκαταστήσετε το Angular χρησιμοποιώντας το npm εγκατάσταση -g @angular/cli εντολή. Τώρα, προχωρήστε και δημιουργήστε έναν νέο κατάλογο χρησιμοποιώντας του νέου ονόματος φακέλου εντολή, για να μάθετε περισσότερα, ελέγξτε τα βήματα που αναφέρθηκαν προηγουμένως.
Ανάγνωση: Πώς να ρυθμίσετε τον κώδικα VS για το Microsoft C++
Πώς να δημιουργήσετε Angular VSCode;
Το Angular File Generator είναι μια εύχρηστη επέκταση για τον κώδικα του Visual Studio που σας επιτρέπει να δημιουργείτε αρχεία Angular με λίγα μόνο κλικ. Είναι χτισμένο στο Angular CLI και χρησιμοποιεί τα ίδια σχηματικά με το CLI. Επιπλέον, παρέχει μια επιλογή δημιουργίας αρχείων απευθείας από το τερματικό.
Διαβάστε επίσης: Πώς να εγκαταστήσετε την Python σε VS Code .
