Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.

Το Angular είναι ένα ισχυρό πλαίσιο JavaScript για τη δημιουργία εφαρμογών μιας σελίδας. Η Google ανέπτυξε το λογισμικό και το διατηρεί δίπλα σε παγκόσμιους συνεργάτες.

Όπως και το React, μπορείτε να χρησιμοποιήσετε το Angular για να δημιουργήσετε μια ποικιλία εφαρμογών διεπαφής, συμπεριλαμβανομένων συστημάτων ιστού, κινητών και επιτραπέζιων υπολογιστών. Ορισμένες βιομηχανίες προτιμούν το Angular επειδή είναι ολοκληρωμένο και σταθερό.

Ας μάθουμε περισσότερα για το Angular κλωνοποιώντας ένα έργο από το GitHub και εκτελώντας το τοπικά.

Προϋποθέσεις για Κλωνοποίηση

Σε αντίθεση με άλλα πλαίσια, η κλωνοποίηση και η εκτέλεση μιας εφαρμογής Angular είναι απλή. Θα κλωνοποιήσετε ένα έργο GitHub. Πριν ξεκινήσετε, βεβαιωθείτε ότι πληροίτε τις ακόλουθες απαιτήσεις:

  • Θα πρέπει να έχετε εγκατεστημένη μια σταθερή έκδοση του Node.js. Αν όχι, μάθε πώς να εγκαταστήσετε το Nodejs στο Ubuntu ή εγκαταστήστε το Nodejs στα Windows.
    • instagram viewer
  • Θα έπρεπε έχετε εγκαταστήσει το Git.
  • Θα πρέπει να έχετε λογαριασμό GitHub.

1. Εγκαταστήστε το Node Package Manager

Node Package Manager (npm) είναι ένα αποθετήριο λογισμικού για πακέτα JavaScript. Το npm διαθέτει CLI (Διασύνδεση γραμμής εντολών) που εκτελεί διάφορες εργασίες. Μπορείτε να χρησιμοποιήσετε το CLI για λήψη, εγκατάσταση και ανάπτυξη λογισμικού.

Όταν εγκαθιστάτε το Node.js, συνοδεύεται από ένα πακέτο npm. Για να ελέγξετε τις εκδόσεις των πακέτων Node.js και npm, εκτελέστε τα ακόλουθα στο τερματικό:

Για να ελέγξετε την εγκατεστημένη έκδοση του Node.js, εκτυπώστε την έκδοση με την ακόλουθη εντολή:

κόμβος --εκδοχή

Μπορείτε να ελέγξετε την έκδοση του npm χρησιμοποιώντας την ίδια επιλογή:

npm --εκδοχή

2. Εγκαταστήστε το Angular CLI

Μπορείτε να χρησιμοποιήσετε το Angular CLI για να εκτελέσετε διάφορες εργασίες ανάπτυξης. Οι εργασίες περιλαμβάνουν τη δημιουργία εφαρμογών, τη δοκιμή και την ανάπτυξη. Για να εγκαταστήσετε το Angular CLI, εκτελέστε την ακόλουθη εντολή:

$ npm εγκατάσταση -g @γωνιώδης/cli

Για να ελέγξετε την έκδοση Angular CLI, εκτελέστε την εντολή:

$ ng έκδοση

3. Βρείτε ένα έργο στο GitHub

Θα κλωνοποιήσετε το Giphy-Replica έργο από το GitHub:

Μεταβείτε στο πράσινο κουμπί με την ετικέτα Κώδικας. Κάντε κλικ σε αυτό για να εμφανιστεί μια αναπτυσσόμενη λίστα. Αντιγράψτε τον σύνδεσμο HTTP ή SSH. Κάποιο από αυτά τα δύο θα κάνει.

4. Κλωνοποιήστε το έργο τοπικά

Αρχικά, δημιουργήστε έναν φάκελο και ονομάστε τον Angular-Clone. Θυμηθείτε να μεταβείτε στον φάκελο με την ακόλουθη εντολή:

cd Angular-Κλώνος

Στη συνέχεια, εκτελέστε το git κλώνος εντολή για να αντιγράψετε το έργο στον φάκελό σας.

git κλώνος https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

Στη συνέχεια, ελέγξτε τον φάκελο Angular-Clone για να δείτε εάν ο κλώνος Giphy-Replica βρίσκεται μέσα. Τρέξιμο ls για να εμφανίσετε τα περιεχόμενα του φακέλου:

ls

Μεταβείτε στον φάκελο:

CD Giphy-Replica

Σε αυτό το σημείο, μπορείτε να επιθεωρήσετε τα αρχεία του έργου σε ένα πρόγραμμα επεξεργασίας κώδικα της επιλογής σας ή να τα προβάλετε μέσω της διεπαφής ιστού GitHub.

5. Εγκαταστήστε τα πακέτα npm

Πρέπει να εγκαταστήσετε όλα τα πακέτα και τις εξαρτήσεις από το κλωνοποιημένο έργο για να το εκτελέσετε. Για να εγκαταστήσετε τα πακέτα, εκτελέστε:

npm εγκαθιστώ

Εάν συναντήσετε αναφορές ευπάθειας, διορθώστε τις με:

Διόρθωση ελέγχου npm

6. Ανοίξτε το έργο σε ένα πρόγραμμα περιήγησης

Τώρα έχετε όλες τις απαιτήσεις για να εκτελέσετε το έργο, μπορείτε να το εκτελέσετε και να το ανοίξετε σε ένα πρόγραμμα περιήγησης. Ξεκινήστε χτίζοντας και εξυπηρετώντας το έργο:

ng σερβίρετε

Στη συνέχεια ανοίξτε http://localhost: 4200/ σε ένα πρόγραμμα περιήγησης για να δείτε το έργο.

Μπορείτε να χρησιμοποιήσετε το Angular CLI που ανοίγει αυτόματα το έργο σε ένα πρόγραμμα περιήγησης:

$ ng σερβίρω -ο

Αυτή η εντολή δημιουργεί την εφαρμογή, εκκινεί τον διακομιστή και παρακολουθεί τα αρχεία για ενημερώσεις.

Στο πρόγραμμα περιήγησής σας, θα πρέπει να δείτε τον ιστότοπο Giphy-Replica:

Γιατί να κλωνοποιήσουμε ένα Angular Project;

Αντί να ξεκινήσετε ένα έργο από την αρχή, μπορείτε να κλωνοποιήσετε ένα από το GitHub. Η κλωνοποίηση ενός έργου ανοιχτού κώδικα και η τροποποίηση του για δική σας χρήση εξοικονομεί χρόνο από την έναρξη ενός έργου από την αρχή. Μπορείτε επίσης να συνεισφέρετε οποιεσδήποτε χρήσιμες αλλαγές στο upstream έργο, εάν είναι σχετικό.

Ψηφίστηκε ως το τέταρτο πιο δημοφιλές πλαίσιο front-end το 2021, το Angular συνεχίζει να εκπλήσσει με κάθε κυκλοφορία. Έρχεται με εξαιρετικά πακέτα που υποστηρίζουν την ανάπτυξη μονοσέλιδων εφαρμογών. Χρησιμοποιήστε αυτό το εξαιρετικό πλαίσιο για να δημιουργήσετε εφαρμογές παγκόσμιας κλάσης.