Περιεχόμενο
- 01. Εκτελέστε έναν έλεγχο έκδοσης
- 02. Εγκατάσταση γωνιακού
- 03. Δημιουργήστε ένα σκελετό έργου
- 04. Διαφορική φόρτιση καλωδίωσης
- 05. ... και δείτε τα αποτελέσματα
- 06. Δημιουργήστε έναν εργαζόμενο στο Διαδίκτυο
- 07. Εξερευνήστε τον κωδικό
- 08. Ρύθμιση σκαλωσιάς
- 09. Μην ανησυχείτε για την έλλειψη κατασκευαστή
- 10. Εκτελέστε μια μικρή εκτέλεση μεταγλώττισης
- 11. ... και βρείτε την έξοδο
- 12. Μπείτε στη δουλειά
- 13. Εξερευνήστε τον Ivy
- 14. Δοκιμάστε τροποποιημένη επεξεργασία ng
- 15. Απολαύστε βελτιωμένη μετεγκατάσταση
- 16. Εξερευνήστε τον έλεγχο του χώρου εργασίας
- 17. Επιταχύνετε τη διαδικασία
- 18. Αποφύγετε το περπάτημα νεκρό
- 19. Κοιτάξτε το αρχείο καταγραφής αλλαγών
Το Angular 8 είναι η τελευταία έκδοση του Google's Angular - ένα από τα καλύτερα πλαίσια JavaScript. Σε αυτό το άρθρο, θα εξετάσουμε τι είναι ιδιαίτερο για το Angular 8 και θα σας δείξουμε πώς να ξεκινήσετε. Πρώτον, μια σύντομη ματιά στο τι συνέβη με το πλαίσιο μέχρι στιγμής.
Η εισαγωγή της Angular οδήγησε σε αλλαγή παραδείγματος στην ανάπτυξη ιστού: ενώ οι περισσότερες βιβλιοθήκες περιορίστηκαν στην παροχή υποστήριξης σε προγραμματιστές με σχετικά περιορισμένο αρχιτεκτονικό αντίκτυπο, η ομάδα προγραμματιστών της Angular πήγε προς την άλλη κατεύθυνση. Το προϊόν τους σας αναγκάζει να χρησιμοποιήσετε μια συγκεκριμένη αρχιτεκτονική, με αποκλίσεις που κυμαίνονται από δύσκολη έως εμπορικά άσκοπη. Στην πραγματικότητα, οι περισσότεροι γωνιακοί κώδικες περνούν από μια σχετικά περίπλοκη αλυσίδα εργαλείων μεταφοράς πριν φτάσει ποτέ στο πρόγραμμα περιήγησης.
Λόγω της τεράστιας επιτυχίας της Angular, τόσο εντός όσο και εκτός της Google Inc, η ανάπτυξη σταθεροποιήθηκε - σε γενικές γραμμές. Αυτό σημαίνει ότι οι αλλαγές σφαλμάτων κώδικα είναι λίγες, ενώ οι εξαμηνιαίες αναβαθμίσεις επικεντρώνονται στην προσαρμογή του πλαισίου στις αλλαγές στο τοπίο περιήγησης στο Web.
Στην περίπτωση του Angular 8, για παράδειγμα, αναπτύσσεται ένας νέος μεταγλωττιστής JavaScript (αν και εξακολουθεί να είναι πειραματικά). Βελτιστοποιεί τον δημιουργημένο κώδικα συμβατότητας ώστε να είναι σημαντικά μικρότερος και γρηγορότερος σε βάρος παλαιότερων προγραμμάτων περιήγησης. Επιπλέον, η υποστήριξη Web Worker είναι ενσωματωμένη για να αυξήσει την ικανότητα επεξεργασίας της Angular. Εν ολίγοις, υπάρχουν πολλά να δούμε - οπότε ας βυθίσουμε αμέσως.
Εάν προτιμάτε να σχεδιάσετε έναν ιστότοπο χωρίς κωδικό, δοκιμάστε έναν από αυτούς τους εύχρηστους δημιουργούς ιστότοπων. Και για να κάνετε τα πράγματα πιο ομαλά, αποκτήστε τη σωστή υπηρεσία φιλοξενίας ιστού σας.
01. Εκτελέστε έναν έλεγχο έκδοσης
Η αλυσίδα εργαλείων της Angular ζει μέσα στο περιβάλλον NodeJS. Από αυτό το γράψιμο, απαιτείται Node.js 10.9 ή καλύτερο - εάν βρεθείτε σε παλαιότερη έκδοση, επισκεφθείτε τον ιστότοπο Node.js και λάβετε μια αναβάθμιση. Ο παρακάτω κώδικας δείχνει την κατάσταση έκδοσης σε αυτό το μηχάνημα.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Εγκατάσταση γωνιακού
Η αλυσίδα εργαλείων της Angular βρίσκεται σε ένα βοηθητικό πρόγραμμα γραμμής εντολών που ονομάζεται ng. Μπορεί να εγκατασταθεί μέσω του γνωστού NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng έκδοση
Προσέξτε να απαντήσετε στην ερώτηση που εμφανίζεται στην παρακάτω εικόνα.
Η απομάκρυνση πληροφοριών έκδοσης από το εργαλείο είναι αρκετά δύσκολη - όχι μόνο η σύνταξη είναι μοναδική, αλλά και η έξοδος είναι επίσης ρητή (βλ. Εικόνα παρακάτω).
03. Δημιουργήστε ένα σκελετό έργου
ng δημιουργεί το Γωνιακό ικρίωμα για εμάς. Στα ακόλουθα βήματα, θέλουμε να προσθέσουμε δρομολόγιο και να χρησιμοποιήσουμε το Sass για μετακίνηση CSS. Εάν η ανάπτυξη αποτύχει για κάποιο λόγο, αδειάστε τον κατάλογο εργασίας και κάντε επανεκκίνηση ng με δικαιώματα superuser.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng νέα workertest
04. Διαφορική φόρτιση καλωδίωσης
Η νέα έκδοση του Angular βελτιστοποιεί τον κώδικα συμβατότητας προς τα πίσω για μειωμένο αντίκτυπο - ένα αρχείο που ονομάζεται λίστα προγραμμάτων περιήγησης σας επιτρέπει να αποφασίσετε ποια προγράμματα περιήγησης θα υποστηρίζονται. Ανοιξε λίστα προγραμμάτων περιήγησης και αφαιρέστε τη λέξη δεν μπροστά από το IE 9 έως το IE11.
. . . > 0,5% τελευταίες 2 εκδόσεις Ο Firefox ESR δεν είναι νεκρός IE 9-11 # Για υποστήριξη IE 9-11, καταργήστε το "not".
05. ... και δείτε τα αποτελέσματα
Παραγγείλετε μια συλλογή του έργου, μεταβείτε στο φάκελο διανομής και εκκαθαρίστε τα αρχεία χάρτη που δεν χρειάζεστε.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Ζητήστε το δέντρο για να δείτε τα αποτελέσματα - ng δημιουργεί πολλές εκδόσεις διαφόρων αρχείων κώδικα (δείτε την παρακάτω εικόνα).
06. Δημιουργήστε έναν εργαζόμενο στο Διαδίκτυο
Οι εργαζόμενοι στον Ιστό επιτρέπουν στο JavaScript να εισέλθει στο τελευταίο όριο των εγγενών εφαρμογών: μαζικά παράλληλη επεξεργασία εργασιών. Με το Angular 8, ένας web εργαζόμενος μπορεί να δημιουργηθεί απευθείας από την άνεση του ng βοηθητικό πρόγραμμα γραμμής εντολών.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng create web-worker myworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) ΕΝΗΜΕΡΩΣΗ tsconfig.app.json (236 bytes ) ΕΝΗΜΕΡΩΣΗ angular.json (3640 bytes)
07. Εξερευνήστε τον κωδικό
ngΗ παραγωγή είναι πιθανό να φαίνεται εκφοβιστική με την πρώτη ματιά. Άνοιγμα του αρχείου src / app / myworker.worker.ts σε έναν επεξεργαστή κώδικα της επιλογής αποκαλύπτει κώδικα που πρέπει να γνωρίζετε καλά από το Εργάτης Ιστού προσδιορισμός. Κατ 'αρχήν, ο εργαζόμενος λαμβάνει μηνύματα και τα επεξεργάζεται ανάλογα με τις ανάγκες.
/// referensi lib = "webworker" /> addEventListener ("message", ({data}) => {const response = "εργαζόμενη απόκριση σε $ {data}"; postMessage (απόκριση);});
08. Ρύθμιση σκαλωσιάς
Οι γωνιακές εφαρμογές αποτελούνται από στοιχεία. Η απόλυση του εργαζόμενου στο Διαδίκτυο γίνεται καλύτερα μέσα Συστατικό App, το οποίο επεκτείνεται για να συμπεριλάβει έναν ακροατή για το OnInit Εκδήλωση. Προς το παρόν, θα εκπέμπει μόνο πληροφορίες κατάστασης.
εισαγωγή {Component, OnInit} από το "@ angular / core"; @Component ({...}) Κλάση εξαγωγής AppComponent υλοποιεί το OnInit {title = «workertest»; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Μην ανησυχείτε για την έλλειψη κατασκευαστή
Οι έμπειροι προγραμματιστές TypeScript αναρωτιούνται γιατί ο κώδικάς μας δεν χρησιμοποιεί τον κατασκευαστή που παρέχεται από τη γλώσσα προγραμματισμού. Ο λόγος για αυτό είναι ότι ngOnInit είναι ένα συμβάν κύκλου ζωής που πυροδοτείται κάθε φορά που λαμβάνει χώρα ένα συμβάν αρχικοποίησης - αυτό δεν χρειάζεται να συσχετιστεί με την επίκληση τάξης.
10. Εκτελέστε μια μικρή εκτέλεση μεταγλώττισης
Σε αυτό το σημείο, το πρόγραμμα είναι έτοιμο να εκτελεστεί. Θα το εκτελέσουμε από τον διακομιστή στο εσωτερικό του ng, η οποία μπορεί να γίνει επίκληση μέσω της εντολής υπηρεσίας. Μια τακτοποιημένη πτυχή αυτής της προσέγγισης είναι ότι το πρόγραμμα εντοπίζει αλλαγές και ανασυνθέτει το έργο εν κινήσει.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Ρίξτε μια ματιά στο σχήμα για να το δείτε σε δράση στην παρακάτω εικόνα.
11. ... και βρείτε την έξοδο
ng σερβίρετε putputs τη διεύθυνση του τοπικού διακομιστή ιστού, που είναι συνήθως http: // localhost: 4200 /. Ανοίξτε την ιστοσελίδα και ανοίξτε τα εργαλεία προγραμματιστή για να δείτε την έξοδο κατάστασης. Εχε στο νου σου οτι console.log εξάγει δεδομένα στην κονσόλα του προγράμματος περιήγησης και αφήνει ανέπαφη την κονσόλα της παρουσίας NodeJS.
12. Μπείτε στη δουλειά
Σε αυτό το σημείο, δημιουργούμε μια παρουσία του εργαζομένου και του παρέχουμε ένα μήνυμα. Τα αποτελέσματά του εμφανίζονται στη συνέχεια στην κονσόλα του προγράμματος περιήγησης.
if (typeof Worker! == "undefined") {// Δημιουργία νέου const pekerja = new Worker ('./ myworker.worker', {type: 'module'}); worker.onmessage = ({data}) => {console.log (η σελίδα έλαβε μήνυμα: $ {data } '); }; worker.postMessage («γεια»); } αλλιώς {console.log ("Χωρίς υποστήριξη εργαζομένων"); }
13. Εξερευνήστε τον Ivy
Οι μελλοντικές εκδόσεις του Angular θα χρησιμοποιούν έναν πιο προηγμένο μεταγλωττιστή, οδηγώντας σε ακόμη μικρότερες προβολές. Ενώ το προϊόν δεν έχει τελειώσει ακόμη, ένας σκελετός με κισσό μπορεί να αναπαραχθεί μέσω ng νέο έργο κισσού - ενεργοποίηση-κισσός. Εναλλακτικά, αλλάξτε τις ρυθμίσεις μεταγλωττιστή όπως φαίνεται στο απόσπασμα.
"angularCompilerOptions": {"enableIvy": true}
Μια προειδοποίηση: Ο Ivy οδηγεί σε εκπληκτικές μειώσεις μεγέθους, αλλά δεν είναι δωρεάν. Το προϊόν δεν έχει ακόμη σταθεροποιηθεί, επομένως δεν συνιστάται η χρήση του σε παραγωγικά περιβάλλοντα.
14. Δοκιμάστε τροποποιημένη επεξεργασία ng
Γωνιακό ng Το εργαλείο γραμμής εντολών χρησιμοποίησε εσωτερικά σενάρια για κάποιο χρονικό διάστημα. Το Angular 8 αυξάνει το ante στο οποίο μπορείτε τώρα, επίσης, να χρησιμοποιήσετε αυτήν την εγκατάσταση για να εκτελέσετε τις δικές σας εργασίες καθώς η εφαρμογή σας έχει συναρμολογηθεί και καταρτιστεί.
"αρχιτέκτονας": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Μια τακτοποιημένη εφαρμογή του ng Τα σενάρια περιλαμβάνουν απευθείας μεταφόρτωση εφαρμογών σε υπηρεσίες cloud. Το αποθετήριο Git παρέχει ένα χρήσιμο σενάριο που μεταφορτώνει την εργασία σας σε έναν λογαριασμό Firebase.
15. Απολαύστε βελτιωμένη μετεγκατάσταση
Οι προγραμματιστές που μετανάστευσαν μακριά από το Angular 1.x, επίσης γνωστό ως AngularJS, είχαν ένα αρκετά μεγάλο μέρος των ζητημάτων που οδήγησαν τον πλοηγό να λειτουργεί σωστά σε «συνδυασμένες» εφαρμογές. Η νέα υπηρεσία ενοποιημένης τοποθεσίας στοχεύει να κάνει αυτή τη διαδικασία πιο ομαλή.
16. Εξερευνήστε τον έλεγχο του χώρου εργασίας
Τα μεγάλα έργα επωφελούνται από την ικανότητα να αλλάζουν δυναμικά τη δομή του χώρου εργασίας. Αυτό γίνεται μέσω του νέου Workspace API που εισήχθη στο Angular 8.0 - το απόσπασμα που συνοδεύει αυτό το βήμα παρέχει μια γρήγορη επισκόπηση της συμπεριφοράς.
Η συνάρτηση async καταδεικνύει () {const host = χώρους εργασίας. createWorkspaceHost (νέο NodeJsSyncHost ()); const χώρο εργασίας = αναμονή χώρων εργασίας. readWorkspace («διαδρομή / προς / χώρο εργασίας / κατάλογος /», κεντρικός υπολογιστής); const project = workspace.projects. λήψη («my-app»); const buildTarget = project.targets. λήψη («build») buildTarget.options.optimization = true; περιμένετε χώρο εργασίας.writeWorkspace (χώρος εργασίας, κεντρικός υπολογιστής); }
17. Επιταχύνετε τη διαδικασία
Η δημιουργία μεγάλων βάσεων κώδικα JavaScript γίνεται κουραστική. Οι μελλοντικές εκδόσεις του AngularJS θα χρησιμοποιούν το σύστημα κατασκευής Google Bazel για να επιταχύνουν τη διαδικασία - δυστυχώς, κατά τη στιγμή της σύνταξης δεν ήταν έτοιμη για πρώτη φορά.
18. Αποφύγετε το περπάτημα νεκρό
Παρόλο που η Google μεριμνά ιδιαίτερα ώστε να μην σπάσει τον κώδικα, ορισμένες λειτουργίες πρέπει απλώς να καταργηθούν, καθώς δεν χρειάζονται πλέον. Ελέγξτε αυτήν τη λίστα αποσβέσεων για να μάθετε περισσότερα σχετικά με τις δυνατότητες που πρέπει να αποφεύγετε.
19. Κοιτάξτε το αρχείο καταγραφής αλλαγών
Όπως πάντα, ένα άρθρο δεν μπορεί ποτέ να κάνει δικαιοσύνη σε μια ολόκληρη κυκλοφορία. Ευτυχώς, αυτό το αρχείο καταγραφής αλλαγών παρέχει μια λεπτομερή λίστα με όλες τις αλλαγές - σε περίπτωση που αισθάνεστε ποτέ να ελέγχετε τον παλμό μιας δυνατότητας που σας αρέσει ιδιαίτερα.
Έχετε πολλά αρχεία έτοιμα για μεταφόρτωση στον ιστότοπό σας; Δημιουργήστε αντίγραφα ασφαλείας στο πιο αξιόπιστο cloud storage.
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο δημιουργικό περιοδικό web design Σχεδιαστής ιστοσελίδων.
