Το Angular, διάδοχος του AngularJS, είναι μια πλατφόρμα ανάπτυξης για την κατασκευή εφαρμογών για κινητά και επιτραπέζιους υπολογιστές χρησιμοποιώντας TypeScript ή / και JavaScript και άλλες γλώσσες. Το Angular είναι δημοφιλές για τη δημιουργία ιστοσελίδων μεγάλου όγκου και υποστηρίζει web, mobile web, εγγενές κινητό και εγγενείς εφαρμογές για επιτραπέζιους υπολογιστές.
Η ομάδα ανάπτυξης πυρήνα Angular χωρίζεται μεταξύ υπαλλήλων της Google και μιας ισχυρής κοινότητας. δεν πρόκειται να φύγει σύντομα. Εκτός από τις δικές της εκτεταμένες δυνατότητες, η πλατφόρμα Angular διαθέτει ένα ισχυρό εξωτερικό οικοσύστημα: Αρκετά εξέχοντα IDE υποστηρίζουν το Angular, διαθέτει τέσσερις βιβλιοθήκες δεδομένων, υπάρχουν μισές δωδεκάδες χρήσιμα εργαλεία και πάνω από δώδεκα σύνολα συστατικών UI και υπάρχουν δεκάδες Γωνιακά βιβλία και μαθήματα. Το 2015, όταν απονεμήθηκε το AngularJS ένα βραβείο Bossie, εξήγησα ότι πρόκειται για ένα μοντέλο JavaScript-AJAX, ό, τιδήποτε (MVW) που επεκτείνει το HTML με σήμανση για δυναμικές προβολές και αμφίδρομη σύνδεση δεδομένων. Το Angular είναι ιδιαίτερα καλό για την ανάπτυξη εφαρμογών ιστού μιας σελίδας και τη σύνδεση φορμών HTML με μοντέλα και ελεγκτές JavaScript. Το νέο Angular είναι γραμμένο σε TypeScript αντί για JavaScript, το οποίο έχει πολλά οφέλη, όπως θα εξηγήσω.
Το περίεργο μοτίβο "μοντέλο-προβολή-οτιδήποτε" μοτίβο είναι μια προσπάθεια να συμπεριληφθούν τα πρότυπα μοντέλου-προβολής-ελεγκτή (MVC), μοντέλου-προβολής-μοντέλου (MVVM) και μοντέλου-προβολής-παρουσιαστή (MVP) κάτω από ένα μόνικερ. Οι διαφορές μεταξύ αυτών των τριών στενά σχετιζόμενων μοτίβων είναι τα είδη των πραγμάτων που οι προγραμματιστές λατρεύουν να διαφωνούν έντονα. οι Angular προγραμματιστές αποφάσισαν να εξαιρεθούν από τη συζήτηση.
Βασικά, το Angular συγχρονίζει αυτόματα δεδομένα από τη διεπαφή χρήστη (προβολές σε AngularJS και πρότυπα σε Angular 2 και άνω) με τα αντικείμενα JavaScript (μοντέλο) μέσω αμφίδρομης σύνδεσης δεδομένων. Για να σας βοηθήσει να διαμορφώσετε την εφαρμογή σας καλύτερα και να διευκολύνετε τη δοκιμή, η Angular διδάσκει στο πρόγραμμα περιήγησης πώς να κάνει την εξάρτηση και την αντιστροφή του ελέγχου. Η νέα γωνιακή (έκδοση 2 και άνω) αντικαθιστά τις προβολές και τους ελεγκτές με στοιχεία και υιοθετεί τυπικές συμβάσεις, οι οποίες διευκολύνουν την κατανόησή τους και επιτρέπει στους προγραμματιστές να επικεντρωθούν στην ανάπτυξη μονάδων και τάξεων ECMAScript 6. Με άλλα λόγια, το Angular 2 είναι μια συνολική επανεγγραφή του AngularJS που προσπαθεί να εφαρμόσει τις ίδιες ιδέες με καλύτερο τρόπο. Τα πρότυπα γωνιακής προβολής, τα οποία έχουν μια αρκετά απλή σύνταξη, συγκεντρώνονται σε JavaScript που είναι καλά βελτιστοποιημένη για τις σύγχρονες μηχανές JavaScript. Ο νέος δρομολογητής εξαρτημάτων στο Angular 2 μπορεί να κάνει διαχωρισμό κώδικα (τεμπέλης φόρτωση) για να μειώσει την ποσότητα του κώδικα που παραδίδεται για την απόδοση μιας προβολής.
Λήψη Ξεκινήστε με το Angular Κατεβάστε αυτό το Angular φροντιστήριο σε βολική μορφή PDFΓιατί γωνιακό; Και πότε δεν είναι καλή επιλογή;
Η επιλογή ενός πλαισίου JavaScript για μια εφαρμογή ιστού είναι το είδος της διαδικασίας που πυροδοτεί θρησκευτικούς πολέμους μεταξύ των προγραμματιστών. Δεν είμαι εδώ για να προσηλυτίσω το Angular, αλλά θέλω να γνωρίζετε τα πλεονεκτήματα και τα μειονεκτήματά του. Στην ιδανική περίπτωση, πρέπει να επιλέξετε το κατάλληλο πλαίσιο για την εφαρμογή σας, λαμβάνοντας υπόψη τις δεξιότητες στον οργανισμό σας και τα πλαίσια που χρησιμοποιείτε σε άλλες εφαρμογές. Σε γενικές γραμμές, το Angular έχει καλά εργαλεία και είναι κατάλληλο για πραγματικά μεγάλα έργα υψηλής κυκλοφορίας. Το Angular, ως πλήρης επανεγγραφή από το AngularJS, σχεδιάστηκε από το μηδέν για χρήση σε κινητές συσκευές και για υψηλή απόδοση. Όπως και ο προκάτοχός του, κάνει δέσμευση δεδομένων εύκολα και καλά.
Η γωνιακή χρησιμοποιεί ένα μοτίβο στοιχείων ιστού, αλλά όχι καθ 'εαυτά τα στοιχεία Ιστού. Δεν είναι το Πολυμερές, το οποίο δημιουργεί πραγματικά Στοιχεία Ιστού, αν και μπορείτε να χρησιμοποιήσετε Πολυμερή Στοιχεία Ιστού σε γωνιακές εφαρμογές, αν το επιθυμείτε. Το Angular χρησιμοποιεί μοτίβα αντιστροφής του ελέγχου (IoC) και της έγχυσης εξάρτησης (DI) και διορθώνει ορισμένα προβλήματα με την εφαρμογή του AngularJS αυτών.
Το Angular χρησιμοποιεί οδηγίες και στοιχεία που συνδυάζουν λογική με σήμανση HTML. Μια σχολή σκέψης λέει ότι η ανάμιξη της λογικής με την παρουσίαση είναι μια βασική αμαρτία. Μια άλλη σχολή σκέψης λέει ότι η δήλωση όλων των προγραμμάτων από ένα μέρος καθιστά ευκολότερη την ανάπτυξη και την κατανόηση. Αυτό είναι ένα ζήτημα που θα πρέπει να αποφασίσετε μόνοι σας, καθώς έχω βρεθεί σε διαφορετικές πλευρές της ερώτησης για διαφορετικά έργα.
Το Angular έχει ορισμένα ζητήματα τεκμηρίωσης, συχνά προβλήματα συμβατότητας προς τα πίσω και πολλές ιδέες για να μάθει ένας νέος προγραμματιστής. Από την άλλη πλευρά, η Angular έχει ένα τεράστιο οικοσύστημα που καλύπτει τα κενά στην τεκμηρίωση της Angular με εκπαιδευτικά προγράμματα, βίντεο και βιβλία τρίτων.
Σχετικά με το TypeScript
Το Angular υλοποιείται σε TypeScript, ένα υπερσύνολο τύπου JavaScript που μεταφέρεται σε JavaScript. Γενικά, οι εφαρμογές TypeScript είναι ευκολότερο να διατηρηθούν σε κλίμακα παραγωγής από το JavaScript. Η απλή διαδικασία προσδιορισμού του κατά πόσον οι τύποι σας είναι σωστοί κατά τη μεταγλώττιση εξαλείφει μια μεγάλη κατηγορία κοινών σφαλμάτων JavaScript και η γνώση των τύπων επιτρέπει στους συντάκτες, τα εργαλεία και τα IDE να είναι πιο χρήσιμα με την ολοκλήρωση κώδικα, την αναδιαμόρφωση και τον έλεγχο κώδικα.
Τυχαίνει να είμαι μεγάλος θαυμαστής του TypeScript. Θεωρώ ότι είναι πολύ πιο παραγωγικό να δουλεύω σε ένα μεγάλο έργο TypeScript παρά να δουλεύω σε ένα μεγάλο έργο JavaScript. Με το JavaScript, ποτέ δεν ξέρω αν τα σφάλματα παραμένουν στον κώδικα που περιμένουν να με δαγκώσουν, ανεξάρτητα από το πόσο συχνά τρέχω το JSHint. Με το TypeScript, τουλάχιστον όταν έχω προσθέσει τους προαιρετικούς τύπους, τάξεις, ενότητες και διεπαφές, αισθάνομαι πολύ πιο ασφαλής.
Ξεκινήστε: Εγκαταστήστε κώδικα γωνιακού, TypeScript και Visual Studio
Με αυτά τα λόγια, ας εγκαταστήσουμε το λογισμικό και ξεκινήστε.
Εγκαταστήστε το Node.js και το NPM
Πριν κάνετε οτιδήποτε άλλο, πρέπει να εγκαταστήσετε το Node.js και το NPM, τον διαχειριστή πακέτων Node, επειδή βασίζονται σε μεγάλο μέρος της εγκατάστασης και των εργαλείων του Angular. Για να μάθετε εάν είναι εγκατεστημένες και αν ναι, ποιες εκδόσεις είναι εγκατεστημένες, μεταβείτε σε μια γραμμή εντολών κονσόλας ή τερματικού και πληκτρολογήστε τις ακόλουθες δύο εντολές:
$ node -v $ npm -v
Στον υπολογιστή μου, η αναφερόμενη έκδοση Node.js είναι v6.9.5 και η έκδοση NPM είναι 3.10.10. Αυτές είναι οι τρέχουσες εκδόσεις μακροπρόθεσμης υποστήριξης αυτήν τη στιγμή, όπως μπορώ να πω από το να κοιτάξω στο //nodejs.org/. Εάν οι εκδόσεις σας είναι τρέχουσες, μπορείτε να μεταβείτε στην επόμενη ενότητα. Εάν δεν εντοπιστεί καμία εντολή ή κάποια έκδοση δεν είναι ενημερωμένη, θα πρέπει να εγκαταστήσετε τις τρέχουσες εκδόσεις. Οι εκδόσεις μου είναι τρέχουσες επειδή πρόσφατα επανεγκαταστήσαμε τον κόμβο, όπως φαίνεται στο παρακάτω στιγμιότυπο οθόνης. Η εγκατάσταση τόσο του Node.js όσο και του NPM είναι θέμα περιήγησης στο nodejs.org, πατώντας το πράσινο κουμπί LTS και ακολουθώντας τις οδηγίες.
Μόλις ολοκληρώσετε την εγκατάσταση, ελέγξτε ξανά τις εκδόσεις για να βεβαιωθείτε ότι έχουν ενημερωθεί πραγματικά. Ξέρω ότι η επανάληψη του ελέγχου ακούγεται παρανοϊκή, αλλά ένας καλός προγραμματιστής χρειάζεται μια υγιή δόση παράνοιας για την αποφυγή σφαλμάτων και οι ματαιωμένες εγκαταστάσεις δεν είναι ασυνήθιστες.
1. Εγκαταστήστε το γωνιακό
Υπάρχουν δύο τρόποι εγκατάστασης και χρήσης του Angular. Θα σας δείξω πρώτα τη μέθοδο διεπαφής γραμμής εντολών (CLI), για διάφορους λόγους. Το πρώτο είναι ότι ταιριάζει καλύτερα με τον τρόπο που μου αρέσει να δουλεύω. Το δεύτερο είναι ότι το CLI δημιουργεί μια πιο ολοκληρωμένη εφαρμογή εκκίνησης από το QuickStart seed. Το τρίτο είναι ότι το βήμα εκκαθάρισης στις οδηγίες σπόρου QuickStart φαίνεται ότι μπορεί να προκαλέσει καταστροφή εάν χρησιμοποιηθεί σε λάθος χρόνο ή σε λάθος κατάλογο.
Περιηγηθείτε στο //angular.io/ και κάντε κλικ σε ένα από τα τρία κουμπιά Έναρξη. Όλοι πηγαίνουν στο ίδιο μέρος, το Angular QuickStart.
Διαβάστε αυτήν τη σελίδα και μη διστάσετε να δοκιμάσετε το παράδειγμα QuickStart στο Plunker μέσω του συνδέσμου μετά το πρώτο μπλοκ κώδικα. Μόλις νομίζετε ότι μπορείτε να ακολουθήσετε το @Συστατικό λειτουργία διακοσμητή και η έκφραση σύνδεσης γωνιακής παρεμβολής {{όνομα}}, κάντε κλικ στον σύνδεσμο CLI QuickStart στα αριστερά. Μην ανησυχείτε πάρα πολύ για τον τρόπο εφαρμογής της διακόσμησης και της δέσμευσης παρεμβολών: Θα φτάσουμε σε αυτό.
1α. Εγκατάσταση και δοκιμή Angular-CL
Θα ακολουθήσουμε τις οδηγίες για τη ρύθμιση του περιβάλλοντος ανάπτυξης CLI. Το πρώτο βήμα είναι να εγκαταστήσετε το Angular και το CLI του παγκοσμίως npm:
$ npm install -g @ angular / cli
Εάν παρακολουθείτε προσεκτικά καθώς προχωρά η εγκατάσταση, θα δείτε μια σειρά από προϋποθέσεις και εργαλεία εγκατεστημένα πριν από το Angular και το CLI του. Εάν υπάρχουν προειδοποιήσεις, μην ανησυχείτε για αυτές. Εάν υπάρχουν σφάλματα, ίσως χρειαστεί να τα διορθώσετε. Έχω δει μόνο προειδοποιήσεις. Είναι ασφαλές να επανεγκαταστήσετε το Angular CLI όποτε θέλετε.
Το επόμενο βήμα είναι να δημιουργήσετε ένα νέο έργο με το Angular CLI. Έβαλα το δικό μου σε έναν κατάλογο που ονομάζεται Work κάτω από το φάκελο του οικιακού χρήστη.
$ cd work $ ng νέα εφαρμογή μου
Όπως σημειώνουν οι οδηγίες, η δημιουργία της νέας εφαρμογής Angular διαρκεί λίγα λεπτά. Είναι μια καλή στιγμή για να ετοιμάσετε ένα ωραίο φλιτζάνι τσάι ή καφέ.
Θα δείτε στο στιγμιότυπο οθόνης ότι έλεγξα ξανά την έκδοση TypeScript (tsc -v) μετά την εγκατάσταση του Angular CLI. Ναι, ήταν λίγο παρανοϊκό. Και ναι, είναι καλή ιδέα να το κάνετε επίσης. Εάν δεν έχετε ήδη εγκαταστήσει το TypeScript, ας το φροντίσουμε τώρα:
$ npm εγκατάσταση –g δακτυλογραφημένη
Σχεδόν φτάσαμε. Στη συνέχεια, μπείτε στον νέο κατάλογο και εξυπηρετήστε την εφαρμογή.
$ cd my-app $ ng προβολή
Όπως θα σας πει ο διακομιστής, ακούει στη θύρα 4200. Επομένως, ανοίξτε μια καρτέλα προγράμματος περιήγησης στο // localhost: 4200 και θα δείτε την εικόνα στα αριστερά.
Το υπόλοιπο της σελίδας CLI QuickStart σας καθοδηγεί να αλλάξετε την ιδιότητα τίτλου και το CSS της. Μη διστάσετε να το κάνετε με οτιδήποτε άλλο προγραμματισμός συντάκτης (δεν ένας επεξεργαστής κειμένου!) τυχαίνει να έχετε εγκαταστήσει ή να περιμένετε μέχρι να εγκαταστήσετε το Visual Studio Code αργότερα. Το παράθυρο του προγράμματος περιήγησης θα ενημερώνεται αυτόματα κάθε φορά που αποθηκεύετε, καθώς ο διακομιστής παρακολουθεί τον κώδικα και ενημερώνει για αλλαγές.
Όταν τελειώσετε με τον διακομιστή, πατήστε Control-C στο παράθυρο τερματικού για να τερματίσετε τη διαδικασία.
1β. Εγκαταστήστε τον σπόρο Angular QuickStart
Μόνο Κάντε αυτό το βήμα εάν έχετε παραλείψει το Βήμα 1α. Εάν το κάνετε και τα δυο βήματα, αυτή η εγκατάσταση θα κάνει μέρος της εγκατάστασης CLI και θα πρέπει να το επαναλάβετε εάν θέλετε να το χρησιμοποιήσετε ξανά. Οι οδηγίες για την εγκατάσταση του σπόρου QuickStart προσφέρουν δύο επιλογές για την έναρξη της διαδικασίας: λήψη του σπόρου και αποσυμπίεση, ή εναλλακτικά κλωνοποίηση του σπόρου, ως εξής:
$ git clone //github.com/angular/quickstart.git γρήγορη εκκίνηση
Όποια και αν επιλέξετε για τη λήψη του κωδικού, τα επόμενα βήματα είναι τα ίδια:
$ cd γρήγορη εκκίνηση
(ή ό, τι ονομάσατε το φάκελο)
Εγκατάσταση $ npmΈναρξη $ npm
ο εγκατάσταση npm το βήμα κάνει ουσιαστικά το ίδιο πράγμα με το $ npm install -g @ angular / cli βήμα στην έκδοση CLI της εγκατάστασης, εκτός από το ότι εγκαθιστά το TypeScript και το κάνει δεν εγκαταστήστε το Angular CLI, καθώς αυτό δεν περιλαμβάνεται στη λίστα εξαρτήσεων στο package.json. Στην πραγματικότητα, εάν το Angular CLI είναι ήδη εγκατεστημένο, αυτό το σενάριο θα απεγκαταστήστε το.
ο έναρξη npm το βήμα τρέχει αυτό το σενάριο:
"start": "ταυτόχρονα \" npm run build: watch \ "\" npm run serve \ ""
Για να το επεκτείνει αυτό, τα σενάρια build: watch and serve είναι:
"build: watch": "tsc -p src / -w"
και
"serve": "lite-server -c = bs-config.json"
Το ανέφερα αυτό tsc είναι ο μεταγλωττιστής TypeScript; ο -Π Η επιλογή ορίζει τον κατάλογο έργου για μεταγλώττιση και το -β Η επιλογή λέει για παρακολούθηση αρχείων εισαγωγής.
ο έναρξη npm Το βήμα (η εκτέλεση των δύο σεναρίων ταυτόχρονα) θα κάνει ουσιαστικά το ίδιο πράγμα με το ng σερβίρετε βήμα στην έκδοση CLI της εγκατάστασης, εκτός από το ότι είναι πιθανό να επιλέξει μια διαφορετική θύρα, καθώς θα φορτώσει αυτόματα τη σελίδα που προβάλλει στο προεπιλεγμένο πρόγραμμα περιήγησής σας και η σελίδα θα μοιάζει με την εικόνα στα αριστερά.
Όταν ολοκληρώσετε την αναπαραγωγή με την εφαρμογή Angular QuickStart, απλώς πατήστε Ctrl + C ή κλείστε το παράθυρο τερματικού για να τερματίσετε τη διαδικασία. Μπορείτε να το ξεκινήσετε ξανά επιστρέφοντας στον κατάλογο και εκτελώντας ng σερβίρετε.
Το επόμενο (προαιρετικό) βήμα στις οδηγίες σπόρου QuikStart είναι αυτό που με κάνει νευρικό: Σας λέει να διαγράψετε τα μη απαραίτητα αρχεία χρησιμοποιώντας rm -rf σε MacOS ή δελ στα Windows. Εάν αποφασίσετε να το κάνετε αυτό, τουλάχιστον ελέγξτε ξανά ότι βρίσκεστε στον σωστό κατάλογο πριν απενεργοποιήσετε το σενάριο που αντιγράψατε από τον ιστότοπο τεκμηρίωσης. Μην το δοκιμάσετε αφού ξεκινήσετε να προσθέτετε αρχεία στο έργο.
Ανεξάρτητα από το αν ακολουθήσατε τις οδηγίες σπόρου CLI ή QuickStart, το επόμενο βήμα σας θα είναι να εξερευνήσετε τον πηγαίο κώδικα ενός γωνιακού έργου. Για το σκοπό αυτό, ας εγκαταστήσουμε ένα πρόγραμμα επεξεργασίας με γνώση της γωνίας.
2. Εγκαταστήστε τον Visual Studio Code
Η σελίδα Angular πόρων προτείνει τρία IDE: IntelliJ IDEA, Visual Studio Code και WebStorm. Χρησιμοποιώ και τα τρία, αλλά για τους σκοπούς αυτής της άσκησης το Visual Studio Code είναι η καλύτερη επιλογή επειδή είναι δωρεάν και ανοιχτού κώδικα. Περιηγηθείτε στην αρχική σελίδα του Visual Studio Code και κατεβάστε την τρέχουσα σταθερή έκδοση για την πλατφόρμα σας και, στη συνέχεια, εγκαταστήστε το πακέτο.
Μόλις εγκατασταθεί ο Visual Studio Code, εκτελέστε τον και ανοίξτε τον κατάλογο που διατηρεί το βασικό σας έργο. Στο Mac μου, το έργο που δημιουργήθηκε από το CLI βρίσκεται στο ~ / work / my-app και ο σπόρος είναι στο ~ / work / quickstartmaster. Η τοποθεσία σας θα ποικίλλει ανάλογα με το αν κάνατε την εγκατάσταση CLI ή την εγκατάσταση σπόρου και τις επιλογές που κάνατε σχετικά με τους καταλόγους στόχων τους. Το δέντρο προέλευσης θα πρέπει να μοιάζει με αυτό:
Το Visual Studio Code υποστηρίζει το TypeScript έξω από το κουτί, οπότε δεν υπάρχει τίποτα άλλο για εγκατάσταση. Εάν θέλετε να εγκαταστήσετε άλλες γλώσσες αργότερα, είναι εύκολο να το κάνετε στον πίνακα "Επεκτάσεις", που εμφανίζεται εύκολα κάνοντας κλικ στο κάτω εικονίδιο πάνω αριστερά. Πληκτρολογήστε το όνομα της γλώσσας ή του εργαλείου που θέλετε στο πλαίσιο αναζήτησης στο επάνω μέρος του πίνακα επεκτάσεων. Μπορείτε να επιστρέψετε στην Εξερεύνηση αρχείων κάνοντας κλικ στο επάνω εικονίδιο πάνω αριστερά.
