Για πολύ καιρό συνέδεσα το παλιό JavaScript με τη λέξη "γκέτο". Ποτέ δεν έχω δει τόσο μεγάλο όγκο προσεγγίσεων ανάπτυξης και τη χρόνια εχθρότητα της κοινότητας στη χρήση δοκιμασμένων στο χρόνο μεθόδων σχεδιασμού. Χρειάστηκαν πολλά χρόνια για να αρχίσουν να διαπερνούν αυτό το σκοτεινό βασίλειο ακτίνες φωτός που ονομάζονται πλαίσια.

Ζητήματα JavaScript

Η γλώσσα αρχικά τοποθετήθηκε ως απλή και για να προσελκύσουν με κάποιο τρόπο την προσοχή των επαγγελματιών προγραμματιστών, προσπάθησαν να προσελκύσουν τη σύνταξή της στη μεγάλη Java, αλλά αυτή η πρακτική δεν έφερε θετικά αποτελέσματα. ΣΕ JavaScriptΞέσπασε χάος και για αρκετή ώρα γινόταν μια πραγματική βακκαναλία. Οι επαγγελματίες δεν βιάζονταν να χρησιμοποιήσουν ένα αμφίβολο νέο προϊόν και οι αρχάριοι με ροζ γυαλιά δεν σκέφτηκαν πολύ την ποιότητα του κώδικα. Ως αποτέλεσμα, η γλώσσα μετατράπηκε σε ένα εργαλείο δεύτερης κατηγορίας, κατάλληλο για τη συγγραφή αδέξιων πραγμάτων που θα μπορούσαν κατά κάποιο τρόπο να ζωντανέψουν τις σελίδες εκείνης της εποχής.

Μήπως όμως το πρόβλημα είναι μόνο στην έλλειψη επαγγελματιών; Άλλωστε, αργά ή γρήγορα, οι πράσινοι νέοι που κόβουν από τον ώμο πρέπει να αποκτήσουν εμπειρία και να μετατραπούν σε προχωρημένους δασκάλους της τέχνης τους. Φυσικά και όχι. Οι λόγοι βρίσκονται στην ίδια τη γλώσσα και τα αρχιτεκτονικά της προβλήματα. Ανάπτυξη JavaScriptμπορεί να συγκριθεί με τους αγώνες Formula 1 - τα σπορ αυτοκίνητα αναπτύσσουν ταχύτητα τζετ, αλλά είναι εξαιρετικά αναξιόπιστα. Ασυγχώρητα λίγος χρόνος δαπανήθηκε για τη δημιουργία της γλώσσας. Ας προσθέσουμε εδώ μια ξαφνική αλλαγή στην έννοια του έργου (αρχικά JavaScriptσχεδιάστηκε ως λειτουργική γλώσσα) και στο τέλος παίρνουμε αυτό που πήραμε. Η σύνταξη προκαλεί σύγχυση κατά τόπους, η απρόβλεπτη κατάσταση ορισμένων τελεστών, οι ατελείωτες αποχρώσεις με την αδύναμη πληκτρολόγηση, τα προβλήματα με το εύρος των μεταβλητών και ένα σωρό άλλα ελαττώματα που μπορούν να αναστατώσουν την ψυχή των ανθρώπων που έχουν συνηθίσει να εργάζονται με κανονικές γλώσσες.

Ο πρώτος που τόλμησε να αναπτύξει πραγματικά το αδέξιο JavaScript, έγινε John Resig. Είδε την αόρατη χάρη στο άσχημο παπάκι και τόλμησε να λύσει ένα από τα σημαντικότερα προβλήματα εκείνης της εποχής: να βάλει τέλος στην ατελείωτη ξαναγραφή του ίδιου κώδικα. Εκείνη την εποχή, δημιουργούσε έναν ιστότοπο για την εταιρεία Brand Logic και γνώριζε από πρώτο χέρι τις αποχρώσεις της JavaScript.

Αποτέλεσμα του ζήλου του ήταν η πρώτη κυκλοφορία της βιβλιοθήκης jQuery. Έπρεπε να λύσει όχι μόνο το πρόβλημα ενός κωδικού μίας χρήσης, αλλά και να επιτύχει τουλάχιστον κάποια συμβατότητα μεταξύ των προγραμμάτων περιήγησης. Η σύνταξη JavaScript δεν έχει μείνει απαρατήρητη. Η βιβλιοθήκη κατέστησε δυνατή τη μείωση πολλών τερατωδών κατασκευών και έγινε ένα είδος συντακτικής ζάχαρης. Με κάθε νέα έκδοση, η βιβλιοθήκη βελτιωνόταν και ενσωμάτωνε νέες δυνατότητες. Σήμερα το jQuery είναι ένα αναπόσπαστο εργαλείο για κάθε προγραμματιστή ιστού και είναι ήδη προβληματικό να φανταστεί κανείς έναν σύγχρονο ιστότοπο χωρίς τη χρήση του (ή εναλλακτικές).

Λοιπόν, τότε άρχισε η διασκέδαση. Το jQuery έδειξε ότι η JavaScript είναι ικανή για πολλά και ίσως αυτό ήταν που χρησίμευσε ως ένα είδος κλωτσιού για πολλούς παίκτες ιστού. Άρχισαν να αντιμετωπίζουν τη γλώσσα πιο επιεικώς και να προσπαθούν να την αναπτύξουν με κάθε δυνατό τρόπο. Απλώς δείτε το παράδειγμα της Google, η οποία μας έδωσε τον ταχύτερο κινητήρα JavaScript V8. Χάρη σε αυτόν, κατέστη δυνατή η δημιουργία βαριών εφαρμογών js. Οι νέες προοπτικές που άνοιξαν έχουν γίνει ευλογία για τη δημιουργία θεμελιωδώς νέων τεχνολογιών που βασίζονται σε JavaScript. Αρκεί να κατονομάσουμε Node.JSκαι γίνεται αμέσως σαφές ότι σήμερα JavaScriptπολύ περισσότερο από μια γλώσσα σεναρίου. Σήμερα, είναι έτοιμος να αναλάβει όλα τα στάδια δημιουργίας μιας εφαρμογής (εξαρτήματα πελάτη και διακομιστή) χωρίς να καταφύγει σε βοηθητικά εργαλεία.

Πλαίσια JavaScript

Για να αντικαταστήσετε βιβλιοθήκες όπως jQueryστον κόσμο JavaScriptΆρχισαν να φτάνουν τα πλαίσια που εφαρμόζουν το δημοφιλές μοτίβο MVC (MVVM, MVP, κ.λπ.). Τα πλαίσια άρχισαν να φέρνουν μια νέα κουλτούρα ανάπτυξης και εναλλακτικές απόψεις για πράγματα που καθιερώθηκαν στο μυαλό των προγραμματιστών. Όλο και περισσότερα ερωτήματα άρχισαν να προκύπτουν σχετικά με τη χρήση μοτίβων που έχουν αποδειχθεί στον κόσμο του μεγαλύτερου προγραμματισμού και το αξίωμα άρχισε τελικά να ταιριάζει στο μυαλό των προγραμματιστών js: "Δεν μπορείτε να αναμίξετε τη λογική με την παρουσίαση".

Τα πλεονεκτήματα των πλαισίων, σε σύγκριση με την εφεύρεση των δικών σας «φορτηγών πτωμάτων», είναι ορατά με γυμνό μάτι. Ένα από τα πιο σημαντικά, κατά τη γνώμη μου, είναι η απαλλαγή από τον κώδικα ρουτίνας που εκτείνεται από έργο σε έργο. Το πλαίσιο παρέχει στους προγραμματιστές το πλαίσιο της μελλοντικής εφαρμογής και μια λύση στα προβλήματα που αντιμετωπίζονται στα περισσότερα έργα. Για παράδειγμα, ο προγραμματιστής δεν χρειάζεται να σκεφτεί πώς να λάβει δεδομένα από τον πελάτη και να τα μεταφέρει στον διακομιστή, γιατί ό,τι είναι απαραίτητο πιθανότατα εφαρμόζεται από τους συντάκτες του πλαισίου. Αντίθετα, ο προγραμματιστής ενθαρρύνεται να επικεντρωθεί στη λειτουργικότητα της δικής του εφαρμογής.

Ένα άλλο σημαντικό πλεονέκτημα όλων των πλαισίων θα είναι η τυποποίηση της κωδικοποίησης. Εάν ένας προγραμματιστής αποφασίσει να χρησιμοποιήσει ένα έτοιμο πλαίσιο στο έργο του, τότε πρέπει να είναι έτοιμος να ακολουθήσει τις εντολές του. Αυτό σημαίνει ότι πρέπει να αφιερώσει χρόνο για να διαβάσει τους κανόνες μία φορά και να είναι σίγουρος ότι ο κώδικας μπορεί αργότερα να τροποποιηθεί από άλλους προγραμματιστές χωρίς κανένα πρόβλημα. Θα είναι ευκολότερο για έναν νέο προγραμματιστή να κατανοήσει μια καλά τεκμηριωμένη δομή (ειδικά αν έχει ήδη εμπειρία με αυτήν τη λύση) παρά να κατανοήσει το αρχικό ποδήλατο κάποιου.

Το μοτίβο σχεδιασμού MVC που βασίζεται στα περισσότερα σύγχρονα πλαίσια έχει αποδειχθεί καλά και έχει πλέον γίνει διαθέσιμο στον κόσμο της JavaScript. Φυσικά, δεν υπάρχει κάποια ιδιαίτερη καινοτομία ή επανάσταση σε αυτό το γεγονός. Κάθε προηγμένος προγραμματιστής μπορεί να σχεδιάσει μια εφαρμογή ακολουθώντας αυτό το μοτίβο χωρίς κανένα πλαίσιο. Ωστόσο, το «μπορώ» και το «απαιτεί» είναι διαφορετικά πράγματα. Λαμβάνοντας υπόψη ότι στην κοινότητα JS όλοι βάζουν ένα σιδερένιο μπουλόνι σε προηγμένες τεχνικές εδώ και πολύ καιρό, η απαίτηση χρήσης ενός μοτίβου από την πλευρά του πλαισίου θα είναι πολύ χρήσιμη.

Angular JS

Το έργο είναι σχετικά νέο. Παρουσιάστηκε για πρώτη φορά το 2009. Κατά τη διάρκεια αυτής της περιόδου, κυκλοφόρησαν αρκετές εκδόσεις και δημιουργήθηκε μια πυκνή κοινότητα γύρω από το προϊόν. Η επιτυχία του έργου καθορίστηκε σε μεγάλο βαθμό από τη μητρική του, την Google. Οι geeks αντιμετωπίζουν τις εκδόσεις της καλής εταιρείας με ιδιαίτερο τρόμο, ειδικά όταν πρόκειται για εργαλεία για προγραμματιστές. Το ίδιο συνέβη και αυτή τη φορά. Δεν θα μπω σε τεχνικές λεπτομέρειες, αλλά μάλλον θα σας πω αμέσως γιατί το έργο με προσέλκυσε προσωπικά.

Είναι εξαιρετικά απλό

Έχει αρκετά χαμηλό εμπόδιο εισόδου σε σύγκριση με πολλές παρόμοιες λύσεις. Η τεκμηρίωση είναι ελαφρώς ασυνεπής. Φαίνεται να είναι καλά δομημένο, υπάρχουν παραδείγματα κώδικα, αλλά ορισμένα πράγματα καλύπτονται εξαιρετικά κακώς. Θα πρέπει να τα αντιμετωπίσετε μόνοι σας μελετώντας τον πηγαίο κώδικα ή σχόλια από συναδέλφους στο εργαστήριο. Για παράδειγμα, οι δυσκολίες κατανόησης του τρόπου λειτουργίας του πεδίου εφαρμογής θα εξαλειφθούν από τα σχόλια του Misko Hevery στο StackOverflow και παρακολουθώντας το βίντεο " AngularJS. Βέλτιστες πρακτικές"(http://goo.gl/UYG6Q).

Δηλωτική προσέγγιση

Οι προγραμματιστές απομακρύνθηκαν από την παραδοσιακή ιδέα: Η HTML είναι ο εχθρός και πρέπει να τον πολεμήσουμε" Αντίθετα, αποφάσισαν να επεκτείνουν φυσικά τη γλώσσα σήμανσης εισάγοντας πρόσθετες οδηγίες.

Δοκιμές

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

Εκφράσεις

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

2 + 1 = {{2+1}}

θα είναι "2+1=3".

Οδηγίες Angular.JS

Οι οδηγίες είναι ένα από τα βασικά χαρακτηριστικά. Επιτρέπουν στον προγραμματιστή να περιγράψει τη συμπεριφορά μεμονωμένων στοιχείων και να επεκτείνει τη σύνταξη HTML. Το Angular έρχεται μόνο με ένα βασικό σύνολο οδηγιών. Ωστόσο, κανείς δεν μας εμποδίζει να το επεκτείνουμε με τις δικές μας εξελίξεις. Οι οδηγίες που έχουν δημιουργηθεί σωστά μπορούν να χρησιμοποιηθούν σε άλλα έργα. Ορισμένοι προγραμματιστές εξασκούνται ακόμη και να κάνουν τις συλλογές στοιχείων τους δημόσια διαθέσιμες. Ένα εντυπωσιακό παράδειγμα αυτού είναι η ομάδα AngularUI, η οποία έχει κυκλοφορήσει και διατηρεί περίπου είκοσι έτοιμα προς χρήση στοιχεία.

Δεν είναι τυχαίο που είπα ότι οι οδηγίες είναι μία από τις βασικές δυνατότητες. Οι αρχάριοι προγραμματιστές συχνά αγνοούν αυτήν την ιδέα και αρχίζουν να γίνονται έξυπνοι με τον δικό τους τρόπο - αλλάζοντας απευθείας το DOM. Σε καμία περίπτωση δεν πρέπει να γίνει αυτό. Γιατί; Πρώτον, αυτό λένε οι ιερές εντολές και δεύτερον, ο προγραμματιστής στερείται καλούδια όπως επαναχρησιμοποιήσιμη χρήση της δουλειάς του, απλή συντήρηση κώδικα κ.λπ.

Πεδίο εφαρμογής, απόδοση και μύθοι

Μπορείτε να βρείτε πολλές αρνητικές απόψεις για την απόδοση της Angular. Σύμφωνα με ορισμένες δηλώσεις, η απόδοση του πλαισίου δεν είναι αρκετά καλή και δεν είναι κατάλληλη για σοβαρές εφαρμογές. Για παράδειγμα, μπορείτε συχνά να βρείτε παραδείγματα των οποίων οι συντάκτες αποδεικνύουν την ακαταλληλότητα του πλαισίου για την επεξεργασία πολλών δεκάδων χιλιάδων αντικειμένων. " Το γωνιακό σας επιβραδύνει με το προηγμένο δέσιμο του!» - φωνάζουν ένθερμοι αντίπαλοι. Με την προσεκτικότερη εξέταση των παραδειγμάτων, γίνεται προφανές ότι το πρόβλημα είναι τραβηγμένο και οι συντάκτες τους δεν μπήκαν στον κόπο να διαβάσουν πλήρως την τεκμηρίωση και το υποστηρικτικό υλικό από το επίσημο ιστολόγιο.

Για να καταρρίψουμε οριστικά τους μύθους σχετικά με την απόδοση, ας δούμε το εύρος της μυστηριώδους οντότητας. Το Scope δεν είναι μοντέλο και δεν έχει νόημα να προσπαθήσουμε να το φτιάξουμε. Τίποτα καλό δεν θα βγει από αυτό. Το εγχειρίδιο Angular δηλώνει ξεκάθαρα ότι ένα μοντέλο σημαίνει οποιαδήποτε σειρά δεδομένων και το πεδίο εφαρμογής μπορεί να περιέχει μια αναφορά στο μοντέλο. Δεν χρειάζεται να ωθήσετε όλα τα δεδομένα από το μοντέλο στο πεδίο εφαρμογής. Ναι, σε ένα τέτοιο πλαίσιο είναι βολικό να τα χειριστείτε, αλλά εκτός από φρένα δεν θα έχετε κανένα όφελος. Όλα τα παραπάνω δεν πρέπει να θεωρηθούν ως κοινός τρόπος αντιμετώπισης και δικαιολογία από την πλευρά των προγραμματιστών της Angular. Αυτό είναι αρχιτεκτονική και πρέπει να ληφθεί υπόψη. Επιπλέον, μην ξεχνάτε το μοτίβο MVVM. Εκτός από την παραδοσιακή οντότητα «μοντέλο», διακρίνει την «προβολή μοντέλου» και σε αυτή την περίπτωση, το πεδίο εφαρμογής είναι μια προβολή μοντέλου, που σημαίνει ότι πρέπει να περιέχει τα δεδομένα που πρέπει να εμφανιστούν.

Αποδεικνύεται ότι οι επιθέσεις στην παραγωγικότητα γωνιώδηςως επί το πλείστον άσχετο. Σε κάθε περίπτωση, στα παραδείγματα που αναφέρθηκαν παραπάνω. Εντάξει, ένας μύθος καταρρίφθηκε. Αλλά τα προβλήματα μπορούν να συμβούν (θεωρητικά) σε πιο μέτριους όγκους. Ορισμένοι προγραμματιστές ισχυρίζονται ότι μπορεί να προκύψουν επιβραδύνσεις όταν το εύρος δεν περιέχει ούτε περισσότερα ούτε λιγότερα, αλλά 2000-3000 αντικείμενα. Τι να κάνετε με αυτό το επιχείρημα; Έχω ήδη δώσει μια μερική απάντηση - δεν χρειάζεται να ωθήσουμε στο πεδίο εφαρμογής κάτι που δεν χρειάζεται να εμφανίζεται αυτή τη στιγμή. Σοβαρά, δεν μπορώ να φανταστώ μια εργασία που θα μπορούσε να απαιτεί την εμφάνιση τόσων πολλών αντικειμένων σε μια σελίδα. Εδώ, είτε ένα σφάλμα έχει εισχωρήσει στην αρχιτεκτονική της εφαρμογής, είτε ο προγραμματιστής ερμηνεύει εσφαλμένα το πρόβλημα που επιλύεται.

Γιατί πολλές χιλιάδες στοιχεία μπορούν να προκαλέσουν σοβαρά προβλήματα απόδοσης; Λοιπόν, προς Θεού, σε ποιον αιώνα ζούμε; Μπορούν πραγματικά μερικές χιλιάδες αντικείμενα να γίνουν σοβαρό πρόβλημα για έναν σύγχρονο υπολογιστή; Στην πραγματικότητα, όλα είναι κάπως πιο περίπλοκα από έναν μεγάλο αριθμό αντικειμένων. Ο λόγος βρίσκεται στον τρόπο που λειτουργεί το δέσιμο. Κατά τη διάταξη του προτύπου, οι οδηγίες δημιουργούν τους λεγόμενους παρατηρητές ( $ρολόι). Οι παρατηρητές ειδοποιούν οδηγίες σχετικά με αλλαγές ιδιοτήτων, ώστε με τη σειρά τους να ενημερώνουν έγκαιρα τις τιμές των στοιχείων στο DOM. Αυτή η λειτουργία εκτελείται συχνά, επομένως εάν υπάρχει μεγάλος αριθμός αντικειμένων στο πεδίο εφαρμογής, η επιβράδυνση θα είναι αναπόφευκτη.

Φόρτωση μιας γωνιακής εφαρμογής

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

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

injector, θα αποτελέσει ένα παγκόσμιο πεδίο εφαρμογής στο πλαίσιο του μοντέλου εφαρμογής μας.

Το angular θα ξεκινήσει την επεξεργασία του δέντρου DOM, ξεκινώντας από το στοιχείο στο οποίο δηλώθηκε η οδηγία ngApp. Κατά τη διάρκεια αυτής της διαδικασίας, θα δημιουργηθούν όλες οι δεσμεύσεις που βρέθηκαν και οι οδηγίες που ανακαλύφθηκαν θα εκτελεστούν.

Μόλις ολοκληρωθεί η λήψη, ξεκινά η πραγματική παρακολούθηση όλων των δεσμεύσεων. Εάν προκύψουν οποιαδήποτε συμβάντα (για παράδειγμα, ένα απλό κλικ του ποντικιού, εισαγωγή κειμένου), τότε το angular θα ενημερώσει αμέσως την προβολή και τις συνδέσεις.

Φύλλο ToDo. Διατηρούμε τις εργασίες υπό στενή επίβλεψη

Σκέφτηκα για πολύ καιρό ποιο θα ήταν το καλύτερο παράδειγμα προς επίδειξη. γωνιώδης. Για να είμαι ειλικρινής, στην αρχή είχα μια μεγαλειώδη ιδέα να δημιουργήσω μια ώριμη επέκταση για το πρόγραμμα περιήγησης Google Chrome, ικανή να αλληλεπιδρά με διάφορες υπηρεσίες της καλής εταιρείας. Αλλά, δυστυχώς, δεν μπόρεσα να διορθώσω πλήρως όλες τις προγραμματισμένες λειτουργίες. Κάτι δεν λειτουργούσε συνεχώς και ήταν λάθη. Ως αποτέλεσμα, αποφάσισα να εξετάσω ένα κλασικό παράδειγμα - τη δημιουργία ενός φύλλου ToDo και κάποια μέρα, με την άδεια του επεξεργαστή στήλης, θα γράψω ένα ξεχωριστό άρθρο σχετικά με την ανάπτυξη επεκτάσεων για το Google Chrome.

Αρχικά, ας διατυπώσουμε το πρόβλημα. Τι είναι ένα τυπικό φύλλο ToDo; Πρώτα απ 'όλα, αυτή είναι μια λίστα εργασιών που πρέπει να ολοκληρωθούν σε μια συγκεκριμένη χρονική στιγμή. Κάθε εργασία είναι ένα ξεχωριστό στοιχείο που έχει τουλάχιστον δύο ιδιότητες: όνομα (περιγραφή εργασίας) και κατάσταση.

Εκτέλεση

Έδωσα μέρος του κώδικα παρουσίασης στην πρώτη καταχώριση και μπορείτε πάντα να λάβετε την πλήρη έκδοση από το δίσκο μας. Οποιαδήποτε γωνιακή εφαρμογή ξεκινά με μια δήλωση οδηγίας ngApp. Σημειώστε ότι στον κωδικό το όνομα των οδηγιών είναι γραμμένο με παύλα, αλλά στη βοήθεια και στο κείμενο εμφανίζονται μαζί. Για την οδηγία ngApp, μπορείτε να καθορίσετε ένα πρόσθετο χαρακτηριστικό - το όνομα της λειτουργικής μονάδας που θα φορτωθεί όταν αρχικοποιηθεί η εφαρμογή. Προς το παρόν, ας αφήσουμε αυτήν την ερώτηση ανοιχτή και ας καθορίσουμε ως το όνομα της ενότητας todomvc. Παρακάτω δίνω μια περιγραφή μιας φόρμας με ένα μόνο πεδίο. Ο χρήστης θα εισαγάγει μια νέα εργασία σε αυτήν και όταν κάνει κλικ στο κουμπί "Υποβολή", θα αποσταλεί στη γενική λίστα.

Η οδηγία θα βοηθήσει στη διεκπεραίωση του συμβάντος αποστολής δεδομένων που έχουν εισαχθεί στη φόρμα ngΥποβολή. Σας επιτρέπει να δεσμεύσετε μια ενέργεια που θα εκτελεστεί όταν υποβάλλονται δεδομένα από τη φόρμα. Στην περίπτωσή μας, αυτή η ενέργεια θα είναι η μέθοδος ελεγκτή addTodo(). Το σώμα της μεθόδου θα περιγράφει τον κώδικα που προσθέτει μια νέα εργασία στο μοντέλο. Το ίδιο το κείμενο της εργασίας θα εισαχθεί στο πεδίο εισαγωγής για το οποίο καθορίζω την οδηγία ngModel, δημιουργώντας έτσι μια αμφίδρομη σύνδεση με το μοντέλο οθόνης.

Τώρα ας ρίξουμε μια ματιά στην έξοδο από το μοντέλο. Κάθε νέα εργασία πλαισιώνεται με μια ετικέτα li, το οποίο περιλαμβάνει στοιχεία ελέγχου: αλλαγή κατάστασης, επεξεργασία ή διαγραφή. Η λειτουργικότητα αυτών των κουμπιών υλοποιείται με τον ίδιο τρόπο που χρησιμοποιήθηκε για την προσθήκη νέων εργασιών. Με μία μόνο διαφορά, αντί για την οδηγία ngSubmit, χρησιμοποιείται ngΚάντε κλικ(επεξεργαζόμαστε ένα κλικ στο κουμπί) ή ngDblΚλικ(διπλό κλικ).

Δεδομένου ότι όλες οι εργασίες που εισάγονται αποθηκεύονται σε έναν πίνακα, πρέπει να τον διασχίσουμε διαδοχικά. Αυτή η λειτουργία δεν απαιτεί τη χρήση βρόχων, αρκεί να χρησιμοποιήσετε την οδηγία ngRepeat. Ως χαρακτηριστικά, πρέπει να καθορίσει μια συλλογή προς διέλευση και μια μεταβλητή που θα λαμβάνει έναν δείκτη στο επόμενο στοιχείο σε κάθε επανάληψη.

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

Το τελευταίο πράγμα που χρειάζεται εξήγηση είναι η κατασκευή filter:statusFilter. Εδώ το φίλτρο είναι μια ενσωματωμένη συνάρτηση που σας επιτρέπει να φιλτράρετε δεδομένα από τον πίνακα todos που αντιστοιχεί στην τιμή της μεταβλητής statusFilter (η τιμή της θα αλλάξει στον ελεγκτή).

Ελεγκτής

Στη δεύτερη λίστα, παρείχα μια περιγραφή του ελεγκτή, το βασικό μέρος του παραδείγματός μας. Ο ελεγκτής σε γωνιακό είναι σχεδιασμένος ως κανονικός JavaScript-λειτουργίες. Για παράδειγμα: συνάρτηση MyController().

Μπορούμε να δηλώσουμε έναν ελεγκτή τόσο στο σώμα της ίδιας της σελίδας (όπου έχουμε την προβολή) όσο και σε ξεχωριστό αρχείο. Η δεύτερη μέθοδος είναι προτιμότερη, γιατί σας επιτρέπει να διαχωρίσετε τη λογική από την παρουσίαση (θυμηθείτε τη θεωρία του μοτίβου MVC) και να απλοποιήσετε την υποστήριξη εφαρμογών στο μέλλον.

Είναι αλήθεια ότι όταν τοποθετούμε τον ελεγκτή σε ξεχωριστό αρχείο, πρέπει με κάποιο τρόπο να αναφέρουμε γωνιώδης, ότι στο πλαίσιο της εφαρμογής μας είναι απαραίτητη η χρήση του συγκεκριμένου ελεγκτή. Η οδηγία ngApp αντιμετωπίζει αυτό το ζήτημα. Ως πρόσθετο χαρακτηριστικό, δέχεται το όνομα της λειτουργικής μονάδας που θα φορτωθεί όταν αρχικοποιηθεί η εφαρμογή. Μια ενότητα στο Angular είναι μια συλλογή από υπηρεσίες, οδηγίες, φίλτρα και διάφορες βοηθητικές πληροφορίες που μπορούν να χρησιμοποιηθούν για τη διαμόρφωση εγχυνών. Για το παράδειγμά μας, προσδιορίζω το "todomvc" ως λειτουργική μονάδα και περιγράφω τη δημιουργία του στο αρχείο app.js:

Var todomvc = angular.module("todomvc", );

Μετά από αυτό, στο πλαίσιο αυτής της ενότητας μπορούμε να περιγράψουμε τον ελεγκτή μας, που είναι αυτό που κάνω με την κατασκευή:

Todomvc.controller("TodoCtrl", συνάρτηση TodoCtrl($scope, $location, todoStorage)

Ας το χωρίσουμε σε κομμάτια:

todomvc– όνομα μονάδας (θυμηθείτε την οδηγία ngApp και το αρχείο app.js).

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

συνάρτηση TodoCtrl($scope, $location, todoStorage) – μια συνάρτηση που ορίζει τον ελεγκτή Περνάμε ως παραμέτρους:

$πεδίο. Το πεδίο εφαρμογής που δημιουργείται όταν δηλώνεται μια οδηγία ngΕλεγκτής;

$location. Μια υπηρεσία σχεδιασμένη να λειτουργεί με μια διεύθυνση URL που έχει εισαχθεί στη γραμμή διευθύνσεων του προγράμματος περιήγησης.

todoStorage. Μια αυτογραμμένη υπηρεσία που δημιουργήθηκε για να αλληλεπιδρά με τον τοπικό χώρο αποθήκευσης.

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

Τακτοποιήσαμε τη δήλωση του ελεγκτή. Τώρα ας δούμε το εσωτερικό του. Στην πρώτη γραμμή δηλώνω το μοντέλο ( todos), που είναι ένας κανονικός πίνακας. Θα αποθηκεύσει όλες τις εργασίες που έχει προσθέσει ο χρήστης. Για να λάβετε τη λίστα εργασιών που εμφανίζεται αυτήν τη στιγμή στην προβολή, απλώς αποκτήστε πρόσβαση στην ιδιότητα todos V πεδίο εφαρμογής. Ωστόσο, θα πρέπει να μας ενδιαφέρουν όχι μόνο τα τρέχοντα δεδομένα, αλλά και τα προηγουμένως αποθηκευμένα δεδομένα σε τοπική αποθήκευση, τα οποία μπορούμε να αποκτήσουμε μέσω της υπηρεσίας todoStorage που περιέγραψα. Μετά από αυτούς τους χειρισμούς, απολύτως όλα τα δεδομένα θα βρίσκονται στο μοντέλο.

Έχοντας σχηματίσει το μοντέλο, καταχωρώ μια συνάρτηση επανάκλησης που θα ενεργοποιηθεί όταν αλλάξουν τα περιεχόμενα του μοντέλου μας. Στο Angular αυτός ο μηχανισμός εκτελείται χρησιμοποιώντας τη μέθοδο $ρολόι. Πρέπει να περάσει ως παράμετροι:

την τιμή που πρέπει να τηρηθεί·

μια συνάρτηση που καλείται όταν αλλάζει η τιμή που μεταβιβάζεται ως πρώτη παράμετρος.

ένα σημάδι της ανάγκης σύγκρισης ενός αντικειμένου.

Στο σώμα της συνάρτησης που θα κληθεί όταν αλλάξουν τα περιεχόμενα του μοντέλου, ορίζω μόνο μία μέθοδο - todoStorage.put(todos) . Είναι υπεύθυνο για την αποθήκευση της λίστας εργασιών στην τοπική αποθήκευση.

Λίγο πιο κάτω στο κείμενο της δεύτερης καταχώρισης μπορείτε να δείτε ένα παρόμοιο κόλπο. Μόνο αυτή τη φορά πρέπει να παρακολουθείτε για αλλαγές στη γραμμή διευθύνσεων. Η εμφάνιση της παραμέτρου "ενεργή" σημαίνει ότι είναι απαραίτητο να εγκαταστήσετε ένα φίλτρο που εμφανίζει μόνο μη ολοκληρωμένες εργασίες στον χρήστη. Λοιπόν, εάν το url περιέχει την παράμετρο " ολοκληρώθηκε το", τότε κάνουμε την αντίθετη λειτουργία - αποκρύπτουμε τις μη ολοκληρωμένες εργασίες και εμφανίζουμε τις ολοκληρωμένες.

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

Δοκιμές

Το Writing Tests αποτελεί αναπόσπαστο μέρος της ανάπτυξης μιας εφαρμογής χρησιμοποιώντας το Angular. Υπάρχουν όλα όσα χρειάζεστε για να γράψετε και να εκτελέσετε δοκιμές, και τώρα θα το δείτε χρησιμοποιώντας ένα πραγματικό παράδειγμα. Δεν θα πάω μακριά, αλλά απλώς θα παράσχω μέρος του κώδικα που δοκιμάζει τον ελεγκτή με τα απαραίτητα σχόλια για την κατανόηση. Μπορείτε να μάθετε όλες τις λεπτομέρειες από την τεκμηρίωση.

Αντί για συμπέρασμα

Σίγουρα, αποδείχθηκε μια υψηλής ποιότητας και ενδιαφέρουσα λύση που αξίζει να χρησιμοποιήσετε στα έργα σας. Η Google κατάφερε για άλλη μια φορά να μας εκπλήξει με την κυκλοφορία ενός καλά μελετημένου προϊόντος. Δεν μπορεί να ειπωθεί ότι αποδείχθηκε τέλειος, αλλά κατάφερε να αντιμετωπίσει τα καθήκοντα που του είχαν ανατεθεί και αυτό είναι το πιο σημαντικό. Σε αυτό το σημείο, βιάζομαι να πάρω την άδεια μου και σας εύχομαι να δείτε διαφορετικά τον κόσμο της ανάπτυξης JS.

Λίστα 1. Προβολή

…

((todo.title))

…

Καταχώριση 2. Ελεγκτής στο Angular.JS

todomvc.controller("TodoCtrl", συνάρτηση TodoCtrl($scope, $location, todoStorage) ( var todos = $scope.todos = todoStorage.get(); $scope.$watch("todos", συνάρτηση () ( todoStorage. put(todos); διαδρομή === "/ολοκληρώθηκε") (ολοκληρώθηκε: true ) : null ) $scope.addTodo = συνάρτηση () ( if (!$scope.newTodo.length) ( return; ) todos.push( ( title: $scope.newTodo, συμπληρωμένο: false )) $scope.newTodo = "");

Λίστα 3. Δοκιμή του κωδικού ελεγκτή

//Περιγράψτε ένα σύνολο δοκιμών (μπορεί να είναι ένθετα) //Η πρώτη παράμετρος είναι το όνομα της ομάδας δοκιμής και η δεύτερη //συνάρτηση με δοκιμές describe("Δοκιμή του ελεγκτή", συνάρτηση () ( //Μεταβλητές για αλληλεπίδραση με τον ελεγκτή //και το εύρος var ctrl , scope //πριν από την εκτέλεση της δοκιμής, φορτώστε // το module todomvc beforeEach(module("todomvc")) rootScope) ( scope = $rootScope.$new(); ctrl = $controller("TodoCtrl", ($scope: scope)) //καθορίστε μια νέα δοκιμή χρησιμοποιώντας τη συνάρτηση it //except σας επιτρέπει να ορίσετε τις προσδοκίες που θα ελεγχθεί //στη δοκιμή it('η τιμή πρέπει να είναι null', συνάρτηση () ( expect(scope.editedTodo).toBeNull(); )); (αναμένεται(εύρος.todos.length).toBe(0); ));

Πώς να μάθετε το Angular.JS

επίσημη τεκμηρίωση (http://goo.gl/uLYIh). Έκαναν μεγάλη προσπάθεια για να το συντάξουν και θα είναι υπεραρκετό για το πρώτο εύκολο κολύμπι.

δωρεάν μάθημα βίντεο από το egghead (http://www.egghead.io/). Τη στιγμή της σύνταξης, αυτό ήταν ίσως το μεγαλύτερο μάθημα βίντεο για τη χρήση του Angular.JS. Ο συγγραφέας καλύπτει τα θέματα της βιβλιοδεσίας, τη χρήση ελεγκτών/φίλτρων, τη δοκιμή και πολλά άλλα. κλπ. Υπάρχουν 42 βιντεομαθήματα.

εισαγωγικά μαθήματα στο CodeSchool (http://goo.gl/YXBGA). Παρά τον μεγάλο αριθμό μαθημάτων βίντεο για διάφορους κλάδους κωδικοποίησης, το Angular.JS δεν αγγίζεται σχεδόν καθόλου. Υπάρχουν μόνο δύο βίντεο, αλλά σίγουρα αξίζει να τα δείτε.

wiki στο έργο docs.angularjs.ru (http://goo.gl/20lCB). Το έργο ξεκίνησε στα τέλη Απριλίου του τρέχοντος έτους και στοχεύει στη συλλογική μετάφραση της επίσημης τεκμηρίωσης. Τα παιδιά δεν έχουν ακόμη έναν πλήρη ιστότοπο, επομένως δημοσιεύουν τα ολοκληρωμένα μέρη της μετάφρασης στο wiki του δημοφιλούς ιστότοπου φιλοξενίας έργων GitHub. Τη στιγμή της συγγραφής αυτών των γραμμών, το ποσοστό μεταφρασμένου υλικού έχει φτάσει το 22%. Είναι πολύ πιθανό η μετάφραση της τεκμηρίωσης να είναι έτοιμη μέχρι τη στιγμή της δημοσίευσης του περιοδικού.

άρθρο «Εργαστήριο AngularJS - Ανάπτυξη ενός Διοικητικού Πάνελ», που δημοσιεύτηκε στο Habré (http://goo.gl/BLSvA, http://goo.gl/eSpBk);

επίσημος λογαριασμός Twitter (http://goo.gl/TyLM0). Εδώ μπορείτε πάντα να μάθετε τα τελευταία νέα και να βρείτε συνδέσμους για τα πιο πρόσφατα εγχειρίδια.

υπέροχο άρθρο σχετικά με τα μοντέλα στο angular.js (http://goo.gl/V0U2C)

Αδέρφια στο πνεύμα

Πτήση(http://goo.gl/kf5dV) είναι ένα νέο έργο από την ομάδα του Twitter. Το προηγούμενο πρότζεκτ τους (Twitter Bootstrap) εξακολουθεί να απολαμβάνει τις δάφνες του και, προφανώς, αργά ή γρήγορα θα συμμετάσχει και η Flight. Επιπλέον, υπάρχει κάτι που μας αρέσει: η προσέγγιση συνιστωσών. δεν απαιτεί την επιλογή μιας συγκεκριμένης προσέγγισης για την εμφάνιση δεδομένων. Βασίζεται σε ένα μοντέλο συμβάντων (για επικοινωνία μεταξύ στοιχείων), υποστήριξη λειτουργικών μίξεων και άλλα χρήσιμα καλούδια.

Σπονδυλική στήλη(http://backbonejs.org) - η βιβλιοθήκη θα ενδιαφέρει τους φανατικούς λάτρεις του jQuery που έχουν βαρεθεί να περιηγούνται σε τόνους μη δομημένου κώδικα js. Το Backbone θα βοηθήσει στην αποκατάσταση της τάξης και στην ανακούφιση τεχνητά πολύπλοκων λύσεων.

CanJS(http://canjs.com/) είναι ένα από τα πιο ελαφριά και απλά πλαίσια js που έχουν αναγνωριστεί για την απλοποίηση της ανάπτυξης εφαρμογών web. Εκτός κουτιού, το CanJS λειτουργεί καλά με δημοφιλείς βιβλιοθήκες JS jQuery, Zepto, Mootols, Yui, Dojo.

Χόβολη(http://emberjs.com/) – πλαίσιο mvc με χαμηλό όριο εισόδου. Η λειτουργικότητα είναι πιο φτωχή από αυτή του Backbone, αλλά είναι πολύ πιο εύκολο για τους αρχάριους να το καταλάβουν. Μεταξύ των κύριων πλεονεκτημάτων, αξίζει να τονιστεί η παρουσία λειτουργικότητας που απλοποιεί τις συνήθεις λειτουργίες. Πολλά πράγματα απαιτούν λιγότερο κώδικα για να γραφτεί από, ας πούμε, το Backbone.

KnockoutJS(http://knockoutjs.com/) – προωθεί το μοντέλο MVVM, μπορεί να υπερηφανεύεται για την εξαιρετική εφαρμογή βιβλιοδεσιών, την καλή απόδοση και τις χαμηλές απαιτήσεις για βιβλιοθήκες τρίτων.

Τρόπος εντοπισμού σφαλμάτων σε μια εφαρμογή Angular

Κατά την ανάπτυξη στο Angular, θα χρειαστείτε σίγουρα ένα πρόσθετο εργαλείο εντοπισμού σφαλμάτων. Ευτυχώς, ένα τέτοιο εργαλείο έχει ήδη δημιουργηθεί και είναι διαθέσιμο ως επέκταση για το Google Chrome. Ονομάζεται Angular JS Batarag και μετά την εγκατάσταση από το Google Play, η επέκταση ενσωματώνεται στα Developers Tools ως πρόσθετο gadget. Το Batarag θα σας επιτρέψει να προβάλετε την ιεραρχία των πεδίων, τα περιεχόμενά τους και, εάν θέλετε, να αλλάξετε τις τιμές απευθείας από την κονσόλα. Μπορείτε να λάβετε πιο λεπτομερείς πληροφορίες από το βίντεο που είναι διαθέσιμο στη σελίδα επέκτασης στο Google Play.

Angular 4/6, μια πλήρως επανασχεδιασμένη συνέχεια του πλαισίου JavaScript AngularJS. Επανασχεδιασμένο από την αρχή από την Google, το Angular 2/4/6 παρέχει προηγμένες δυνατότητες για τη δημιουργία εφαρμογών μιας σελίδας, όπως δηλωτικά πρότυπα, αμφίδρομη σύνδεση δεδομένων, υποστήριξη TypeScript και ένεση εξάρτησης. Αντί για τους τυπικούς ελεγκτές της αρχιτεκτονικής MVC, το Angular 2/4 χρησιμοποιεί πλέον στοιχεία. Αυτή η ενημέρωση είναι κατάλληλη τόσο για κινητά όσο και για προγραμματιστές ιστού.

Ακροατήριο:Ο οδηγός προορίζεται για προγραμματιστές που θέλουν να μάθουν τα βασικά του Angular 6 και τις έννοιες προγραμματισμού του, καθώς και για όσους αναζητούν «κάτι νέο» για τον εαυτό τους. Περιγράφει τα στοιχεία Angular 6 με παραδείγματα.

Ελάχιστες δεξιότητες:Βασικές γνώσεις JavaSctipt. Και επίσης, καλό θα ήταν να γνωρίζετε τις σχετικές τεχνολογίες HTML, CSS, AJAX, AngularJS κ.λπ.

Τι είναι το Angular;

Γωνιακό 6είναι μια πλατφόρμα που απλοποιεί την ανάπτυξη διαδικτυακών εφαρμογών. Το Angular 6 συνδυάζει δηλωτικά πρότυπα, έγχυση εξάρτησης, ολοκληρωμένα εργαλεία από άκρο σε άκρο και ήδη εφαρμοσμένες βέλτιστες πρακτικές για την επίλυση προβλημάτων οποιασδήποτε πολυπλοκότητας. Γωνιακό 6σας επιτρέπει να δημιουργείτε όχι μόνο εφαρμογές web αλλά και προγράμματα για φορητές συσκευές και επιτραπέζιους υπολογιστές.

Δομή μαθημάτων Angular 6 στα Ρωσικά (angular.io):

1. Φροντιστήριο
   1. "Hero Editor"
   2. Εμφάνιση λίστας
   3. Master/Detail Components
   4. Υπηρεσίες
   5. Δρομολόγηση
2. Βασικά
   1. Αρχιτεκτονική
   2. Στοιχεία και Πρότυπα
   3. Έντυπα
   4. Παρατηρητές & RxJS
   5. Ενότητες (NgModules)
   6. Ενεση εξάρτησης
   7. Πελάτης HTTP
   8. Δρομολόγηση και πλοήγηση
   9. Κινουμένων σχεδίων
   10. Δοκιμές
   11. Σκονάκι
3. Τεχνικοί
   1. Διεθνοποίηση (i18n)
   2. Γωνιακές γλωσσικές υπηρεσίες
   3. Ασφάλεια/Προστασία Εφαρμογών Angular
   4. Εγκατάσταση και ανάπτυξη
   5. Υπάλληλοι υπηρεσιών
   6. Απόδοση από την πλευρά του διακομιστή (Angular SSR)

Δομή μαθημάτων Angular 2 στα ρωσικά (σημείο εκμάθησης):

• Θέμα: Γωνιακό 4
• Ώρα βίντεο: 21:58
• Δυσκολία: φως

Σε αυτό το σεμινάριο, θα γνωρίσετε το Angular 4. Αρχικά, θα μάθετε πώς διαφέρουν τα Angular 1, Angular 2 και Angular 4 και τι αξίζει να μάθετε.

Μάθημα 2: Δημιουργία στοιχείου στο Angular 4

• Θέμα: Γωνιακό 4
• Ώρα βίντεο: 16:23
• Δυσκολία: φως

Σε αυτό το σεμινάριο, θα μάθετε πώς δημιουργούνται τα στοιχεία στο Angular 4 και πώς αλληλεπιδρούν μεταξύ τους.

Μάθημα 3. Καταχώριση στοιχείων στο Angular 4

• Θέμα: Γωνιακό 4
• Ώρα βίντεο: 10:46
• Δυσκολία: φως

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

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

Επίσης σε αυτό το μάθημα θα μάθετε πώς να συνδέετε στοιχεία με παραμέτρους, πώς να μεταβιβάζετε παραμέτρους από γονικά στοιχεία σε θυγατρικά.

Μάθημα 4. Διακομιστής και υπηρεσίες στο Angular 4

• Θέμα: Γωνιακό 4
• Ώρα βίντεο: 23:16
• Δυσκολία: φως

Σε αυτό το μάθημα θα μάθετε για 2 οντότητες του Angular 4 - υπηρεσίες και μια τάξη για εργασία με αιτήματα ajax.

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

Μετά από αυτό, θα εμφανίσουμε όλα τα δεδομένα στο πρότυπο και θα δείτε επίσης τις λεπτές λεπτομέρειες αυτής της διαδικασίας.

Μάθημα 5. Angular 4 Directives

• Θέμα: Γωνιακό 4
• Ώρα βίντεο: 15:25
• Δυσκολία: φως

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

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

Μάθημα 6. Σωλήνες στο Angular 4: δημιουργία φίλτρου

• Θέμα: Γωνιακό 4
• Ώρα βίντεο: 11:24
• Δυσκολία: φως

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

Για να γίνει αυτό, θα χρειαστεί να εξετάσουμε περαιτέρω την έννοια της «αμφίδρομης σύνδεσης δεδομένων» χρησιμοποιώντας το Angular Model.

Μάθημα 7. Δρομολόγηση στο Angular 4: δημιουργία σελίδων

• Θέμα: Γωνιακό 4
• Ώρα βίντεο: 15:33
• Δυσκολία: φως

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

Θα δημιουργήσουμε 2 διαδρομές - για την κύρια σελίδα και για τη σελίδα ρυθμίσεων. Στη συνέχεια, θα δημιουργήσουμε 2 στοιχεία, αλλά όχι μόνοι μας, αλλά χρησιμοποιώντας το εργαλείο Angular CLI, προκειμένου να επιταχύνουμε τη διαδικασία.

Μετά από αυτό, θα δημιουργήσουμε μια γραμμή πλοήγησης για άμεση εναλλαγή σελίδων.

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

Μια μεγάλη ποικιλία χρήσιμων πόρων που θα σας βοηθήσουν να δημιουργήσετε ένα σχέδιο για την εκμάθηση του Angular 2.

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

Εάν έχετε το θάρρος και την επιθυμία να μάθετε μόνοι σας, τότε η επίσημη ιστοσελίδα της Angular είναι το καλύτερο μέρος για να ξεκινήσετε. Για σύγκριση, μπορείτε να δείτε τους άλλους πόρους σε αυτήν την ανάρτηση για μια ευκολότερη εισαγωγή στην ανάπτυξη Angular2.

Egghead Screencasts

Φαίνεται ότι το Egghead είναι ένας από τους λίγους εκπαιδευτικούς πόρους που καλύπτει λεπτομερώς την ανάπτυξη εφαρμογών Angular2. Μέχρι τη στιγμή που γράφεται αυτό το άρθρο, το Egghead προσφέρει 29 διαφορετικές εκπομπές οθόνης Angular2 και μόνο 3 από αυτές πληρώνονται. Έως και 26 δωρεάν εκπομπές οθόνης Angular2 στο Egghead.

Αξίζει να ξεκινήσετε να μελετάτε ένα θέμα με πολύ δωρεάν υλικό. Ρίξτε μια ματιά στη σελίδα Angular2 Egghead για εκπομπές οθόνης που καλύπτουν τα βασικά.

βίντεο YouTube

Δεν είναι μυστικό ότι υπάρχουν πολλά σκουπίδια στο YouTube. Αλλά υπάρχει πολύ απίστευτο υλικό εκεί. Το κύριο πράγμα είναι να ξέρετε πώς να το βρείτε. Η κοινότητα του Angular2 έχει συγκεντρώσει εξαιρετικά εκπαιδευτικά βίντεο για την εκμάθηση του Angular 2 από την αρχή.

Αν προτιμάτε οπτική μάθηση και δεν θέλετε να πληρώσετε, αναζητήστε εκπαιδευτικά βίντεο στο YouTube.

Ακολουθούν μερικά ενδιαφέροντα βίντεο για να ξεκινήσετε:

Εάν κανένας από αυτούς τους πόρους δεν είναι κατάλληλος, προτείνω να ελέγξετε τη λίστα των προτεινόμενων πόρων. Το αγαπημένο μου είναι το Angular2 Learning, χωρισμένο σε βιβλία/βίντεο και θέματα/θέματα όπως έλεγχος ταυτότητας και δρομολόγηση.

Η σελίδα GitHub που διατηρεί ο Jeff Cunningham περιέχει πολλούς εκπαιδευτικούς πόρους Angular2. Δημιουργήθηκε για το Angular 1.x, αλλά στη συνέχεια άλλαξε κατεύθυνση σε Angular2.

Μια άλλη δωρεάν προτεινόμενη λίστα είναι η Angular Education, που βρίσκεται στο GitHub. Αυτή η λίστα χωρίζεται σε θέματα που περιέχουν συνδέσμους προς βίντεο και άρθρα. Ενημερώνεται συχνά, συμπεριλαμβανομένων νέων βιβλίων όπως το Angular2 in Action, που έχει προγραμματιστεί για δημοσίευση το 2017.

Ένας άλλος ιστότοπος που αξίζει να επισκεφτείτε είναι το Angular2.com. Αυτό είναι ένα αποθετήριο μαθησιακών πόρων: άρθρα, σχολικά βιβλία και βίντεο. Ενώ αυτός ο ιστότοπος λειτουργεί ως προτεινόμενο στοιχείο λίστας, το Learn Angular2.com δημοσιεύει τα μαθήματά του.

Το περιεχόμενο κειμένου ενημερώνεται περιοδικά, επομένως ελέγχετε τις πηγές.