Πίνακας συνεργασίας AngularJS με το Socket.io

Περιεχόμενο

• 01. Ο διακομιστής
• 02. Τα γυμνά οστά
• 03. Δηλώστε τις εξαρτήσεις σας
• 04. Συνδέστε το Socket.io
• 05. Ξεκινήστε τους κινητήρες σας!
• 06. Μερικές ειλικρινείς σκέψεις πριν προχωρήσουμε
• 07. Ο πελάτης
• 08. Τα γυμνά οστά
• 09. Δημιουργία κολλώδους σημείωσης
• 10. Εμφάνιση των αυτοκόλλητων σημειώσεων
• 11. Διαγραφή κολλώδους σημείωσης
• 12. Ενημέρωση κολλώδους σημείωσης
• 13. Μετακίνηση κολλώδους νότας
• 14. Το μπόνους
• 15. Συμπέρασμα
• Σας άρεσε αυτό; Διαβάστε αυτά!

• Απαιτείται γνώση: Ενδιάμεση JavaScript
• Απαιτεί: Node.js, NPM
• Ώρα έργου: 2 ώρες

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

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

Επίσης, σας ενθαρρύνω να τραβήξετε τον κωδικό από το λογαριασμό μου στο GitHub για να το ακολουθήσετε. Ο καλός φίλος μου Brian Ford έχει επίσης έναν εξαιρετικό σπόρο Socket.io, στον οποίο βασίζω ορισμένες από τις αρχικές μου ιδέες.

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

01. Ο διακομιστής

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

Θα δημιουργήσουμε έναν διακομιστή Node.js με Express και Socket.io. Ο λόγος που χρησιμοποιούμε το Express είναι ότι παρέχει έναν ωραίο μηχανισμό για τη δημιουργία ενός διακομιστή στατικών στοιχείων στο Node.js. Το Express διαθέτει πολλές εκπληκτικές δυνατότητες, αλλά, σε αυτήν την περίπτωση, θα το χρησιμοποιήσουμε για να διαιρέσουμε την εφαρμογή καθαρά μεταξύ του διακομιστή και του πελάτη.

(Λειτουργώ με την υπόθεση ότι έχετε εγκαταστήσει το Node.js και το NPM. Μια γρήγορη αναζήτηση στο Google θα σας δείξει πώς να τα εγκαταστήσετε εάν δεν το κάνετε.)

02. Τα γυμνά οστά

Έτσι, για να χτίσουμε τα γυμνά οστά του διακομιστή, πρέπει να κάνουμε μερικά πράγματα για να ξεκινήσουμε.

// app.js

// Α'1
var express = απαιτείται («express»),
app = express ();
διακομιστής = απαιτείται («http»). createServer (app),
io = απαιτείται ('socket.io'). listen (διακομιστής);

// Α2
app.configure (λειτουργία () {
app.use (express.static (__ dirname + ’/ public’));
});

// Α.3
server.listen (1337);

Α.1 Δηλώνουμε και τεκμηριώνουμε τις μονάδες Node.js, ώστε να τις χρησιμοποιούμε στην εφαρμογή μας. Δηλώνουμε το Express, δημιουργούμε το Express και στη συνέχεια δημιουργούμε έναν διακομιστή HTTP και στέλνουμε την παρουσία Express σε αυτό. Και από εκεί δημιουργούμε το Socket.io και το λέμε να παρακολουθεί την παρουσία του διακομιστή μας.

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

A.3 Ξεκινάμε τον διακομιστή και του λέμε να ακούει στη θύρα 1337.

Μέχρι στιγμής αυτό ήταν αρκετά ανώδυνο και γρήγορο. Πιστεύω ότι έχουμε λιγότερες από 10 γραμμές στον κώδικα και έχουμε ήδη έναν λειτουργικό διακομιστή Node.js. Προς τα εμπρός!

03. Δηλώστε τις εξαρτήσεις σας

// πακέτα.json
{
"name": "γωνιακή πλακέτα",
"περιγραφή": "Συμβούλιο συνεργασίας AngularJS",
"έκδοση": "0.0.1-1",
"ιδιωτικό": αληθινό,
"εξαρτήσεις": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Ένα από τα ωραιότερα χαρακτηριστικά του NPM είναι η δυνατότητα δήλωσης των εξαρτήσεων σας στο a πακέτα.json αρχείο και στη συνέχεια να τα εγκαταστήσετε αυτόματα μέσω εγκατάσταση npm στη γραμμή εντολών.

04. Συνδέστε το Socket.io

Έχουμε ήδη ορίσει τις βασικές δυνατότητες που θέλουμε στην εφαρμογή και γι 'αυτό πρέπει να ρυθμίσουμε το πρόγραμμα ακρόασης συμβάντων Socket.io και ένα κατάλληλο κλείσιμο για να χειριστούμε το συμβάν για κάθε λειτουργία.

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

io.sockets.on («σύνδεση», λειτουργία (υποδοχή) {
socket.on («createNote», συνάρτηση (δεδομένα) {
socket.broadcast.emit («onNoteCreated», δεδομένα);
});

socket.on («updateNote», λειτουργία (δεδομένα) {
socket.broadcast.emit («onNoteUpdated», δεδομένα);
});

socket.on («deleteNote», συνάρτηση (δεδομένα) {
socket.broadcast.emit («onNoteDeleted», δεδομένα);
});

socket.on («moveNote», συνάρτηση (δεδομένα) {
socket.broadcast.emit («onNoteMoved», δεδομένα);
});
});

Από εδώ προσθέτουμε ακροατές createNote, ενημέρωσηΣημείωση, Διαγραφή Σημείωση και moveNote. Και στη λειτουργία επανάκλησης, μεταδίδουμε απλώς το συμβάν που συνέβη έτσι ώστε κάθε πελάτης που ακούει να μπορεί να ειδοποιηθεί ότι συνέβη το συμβάν.

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

05. Ξεκινήστε τους κινητήρες σας!

Τώρα που έχουμε καθορίσει τις εξαρτήσεις μας και ρυθμίσαμε την εφαρμογή Node.js με εξουσία Express και Socket.io, είναι πολύ απλό να ξεκινήσετε τον διακομιστή Node.js.

Πρώτα εγκαθιστάτε τις εξαρτήσεις σας Node.js όπως:

εγκατάσταση npm

Και μετά ξεκινάτε τον διακομιστή ως εξής:

κόμβος app.js

Και μετά! Μεταβείτε σε αυτήν τη διεύθυνση στο πρόγραμμα περιήγησής σας. Μπαμ!

06. Μερικές ειλικρινείς σκέψεις πριν προχωρήσουμε

Είμαι κυρίως ένας προγραμματιστής frontend και αρχικά φοβήθηκα λίγο να συνδέσω έναν διακομιστή Node.js στην εφαρμογή μου. Το τμήμα AngularJS ήταν ένα γρήγορο, αλλά διακομιστή JavaScript; Ουρά της ανατριχιαστικής μουσικής από μια ταινία τρόμου.

Όμως, ήμουν απολύτως αποφασισμένος να ανακαλύψω ότι θα μπορούσα να δημιουργήσω έναν στατικό διακομιστή ιστού σε λίγες γραμμές κώδικα και σε μερικές ακόμη γραμμές χρησιμοποιήστε το Socket.io για να χειριστείτε όλα τα συμβάντα μεταξύ των προγραμμάτων περιήγησης. Και εξακολουθούσε να είναι απλώς JavaScript! Για λόγους επικαιρότητας, καλύπτουμε μόνο μερικά χαρακτηριστικά, αλλά ελπίζω ότι μέχρι το τέλος του άρθρου θα δείτε ότι είναι εύκολο να κολυμπήσετε - και το βαθύ άκρο της πισίνας δεν είναι τόσο τρομακτικό.

07. Ο πελάτης

Τώρα που έχουμε τη σταθερή βάση μας με τον διακομιστή μας, ας προχωρήσουμε στο αγαπημένο μου μέρος - τον πελάτη! Θα χρησιμοποιούμε AngularJS, jQueryUI για το draggable μέρος και Twitter Bootstrap για μια βάση στυλ.

08. Τα γυμνά οστά

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

Κάθε εφαρμογή AngularJS πρέπει να είναι bootstrap με τουλάχιστον έναν ελεγκτή που υπάρχει και έτσι είναι γενικά όπου ξεκινώ πάντα.

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

// public / index.html
html ng-app = "app">

Ξέρω ότι θα χρειαστώ τουλάχιστον έναν ελεγκτή και έτσι θα το αποκαλέσω χρησιμοποιώντας ng-ελεγκτής και την εκχώρηση ιδιοκτησίας του MainCtrl.

body ng-controller = "MainCtrl"> / body>

Τώρα λοιπόν βρισκόμαστε σε επαφή με μια ενότητα που ονομάζεται εφαρμογή και ένα όνομα ελεγκτή MainCtrl. Ας προχωρήσουμε και να τα δημιουργήσουμε τώρα.

Η δημιουργία μιας ενότητας είναι αρκετά απλή. Το ορίζετε καλώντας angular.module και να του δώσουμε ένα όνομα. Για μελλοντική αναφορά, η δεύτερη παράμετρος ενός κενού πίνακα είναι όπου μπορείτε να κάνετε ένεση υπομονάδων για χρήση στην εφαρμογή. Είναι εκτός του πεδίου αυτού του σεμιναρίου, αλλά είναι βολικό όταν η εφαρμογή σας αρχίζει να αναπτύσσεται σε πολυπλοκότητα και ανάγκες.

// δημόσια / js / collab.js
var app = angular.module («app», []);

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

app.controller («MainCtrl», συνάρτηση (εύρος $) {});

Θα ολοκληρώσουμε επίσης τη λειτουργία Socket.io σε ένα πρίζα υπηρεσία έτσι ώστε να μπορούμε να ενσωματώσουμε αυτό το αντικείμενο και να μην το αφήσουμε να αιωρείται στον παγκόσμιο χώρο ονομάτων.

app.factory («socket», λειτουργία ($ rootScope) {});

Και ενώ είμαστε σε αυτό, πρόκειται να δηλώσουμε μια οδηγία που ονομάζεται κολλώδης Σημείωση που πρόκειται να χρησιμοποιήσουμε για να ενσωματώσουμε τη λειτουργικότητα της κολλώδους σημείωσης.

app.directive («stickyNote», λειτουργία (υποδοχή) {});

Ας αναθεωρήσουμε λοιπόν τι έχουμε κάνει μέχρι τώρα. Έχουμε κάνει bootstrap την εφαρμογή χρησιμοποιώντας ng-εφαρμογή και δήλωσε τον ελεγκτή εφαρμογών μας σε HTML. Ορίσαμε επίσης τη λειτουργική μονάδα και δημιουργήσαμε το MainCtrl ελεγκτή, το πρίζα υπηρεσία και το κολλώδης Σημείωση διευθυντικός.

09. Δημιουργία κολλώδους σημείωσης

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

app.controller («MainCtrl», λειτουργία ($ εύρος, υποδοχή) {// B.1
$ lingkop.notes = []; // Β.2

// Εισερχόμενα
socket.on («onNoteCreated», συνάρτηση (δεδομένα) {// B.3
$ lingkop.notes.push (δεδομένα);
});

// Εξερχόμενος
$ lingkop.createNote = συνάρτηση () {// B.4
var σημείωση = {
id: new Date (). getTime (),
τίτλος: «Νέα σημείωση»,
σώμα: «Σε εκκρεμότητα»
};

$ lingkop.notes.push (σημείωση);
socket.emit («createNote», σημείωση);
};

B.1 Το AngularJS έχει ενσωματωμένο ένα χαρακτηριστικό έγχυσης εξάρτησης, οπότε εγχύουμε ένα εύρος $ αντικείμενο και το πρίζα υπηρεσία. ο εύρος $ Το αντικείμενο χρησιμεύει ως ViewModel και είναι βασικά ένα αντικείμενο JavaScript με ορισμένα γεγονότα ενσωματωμένα σε αυτό για να επιτρέπουν αμφίδρομη δημιουργία δεδομένων.

B.2 Δηλώνουμε τον πίνακα στον οποίο θα χρησιμοποιήσουμε για να δεσμεύσουμε την προβολή.

B.3 Προσθέτουμε έναν ακροατή για το onNoteCreated εκδήλωση στο πρίζα υπηρεσία και ωθώντας το ωφέλιμο φορτίο του συμβάντος στο $ lingkup.notes πίνακας.

B.4 Δηλώσαμε α createNote μέθοδος που δημιουργεί μια προεπιλογή Σημείωση αντικείμενο και το ωθεί στο $ lingkup.notes πίνακας. Χρησιμοποιεί επίσης το πρίζα υπηρεσία για να εκπέμψει το createNote συμβάν και περάστε το νέα σημείωση αντικείμενο μαζί.

Τώρα που έχουμε μια μέθοδο για να δημιουργήσουμε τη σημείωση, πώς την ονομάζουμε; Αυτή είναι μια καλή ερώτηση! Στο αρχείο HTML, προσθέτουμε την ενσωματωμένη οδηγία AngularJS ng-κλικ στο κουμπί και μετά προσθέστε το createNote μέθοδος κλήσης ως τιμή χαρακτηριστικού.

κουμπί id = "createButton" ng-click = "createNote ()"> Δημιουργία σημείωσης / κουμπιού>

Ώρα για μια γρήγορη ανασκόπηση του τι έχουμε κάνει μέχρι τώρα. Προσθέσαμε έναν πίνακα στο εύρος $ αντικείμενο στο MainCtrl που θα κρατήσει όλες τις σημειώσεις για την εφαρμογή. Προσθέσαμε επίσης ένα createNote μέθοδος στο εύρος $ αντικείμενο να δημιουργήσετε μια νέα τοπική νότα και μετά να μεταδώσετε τη σημείωση στους άλλους πελάτες μέσω του πρίζα υπηρεσία. Προσθέσαμε επίσης ένα πρόγραμμα ακρόασης εκδηλώσεων στο πρίζα υπηρεσία, ώστε να μπορούμε να γνωρίζουμε πότε άλλοι πελάτες έχουν δημιουργήσει μια σημείωση, ώστε να μπορούμε να την προσθέσουμε στη συλλογή μας.

10. Εμφάνιση των αυτοκόλλητων σημειώσεων

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

Οι οδηγίες και οι περιπλοκές τους είναι ένα τεράστιο θέμα, αλλά η σύντομη έκδοση είναι ότι παρέχουν έναν τρόπο επέκτασης στοιχείων και χαρακτηριστικών με προσαρμοσμένη λειτουργικότητα. Οι οδηγίες είναι εύκολα το αγαπημένο μου μέρος για το AngularJS επειδή σας επιτρέπει να δημιουργήσετε ουσιαστικά ένα ολόκληρο DSL (Domain Specific Language) γύρω από την εφαρμογή σας σε HTML.

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

Σας προτείνω να ρίξετε μια ματιά στην τεκμηρίωση AngularJS για να δείτε ολόκληρες τις λίστες ιδιοτήτων που μπορείτε να ορίσετε στο αντικείμενο ορισμού οδηγίας.

app.directive («stickyNote», λειτουργία (υποδοχή) {
var linker = συνάρτηση (εύρος, στοιχείο, attrs) {};

var controller = function ($ εύρος) {};

ΕΠΙΣΤΡΟΦΗ {
περιορισμός: «A», // Γ.1
link: linker, // Γ.2
ελεγκτής: ελεγκτής, // C.3
πεδίο εφαρμογής: {// Γ.4
σημείωση: ’=’,
ondelete: «&»
}
};
});

Γ.1 Μπορείτε να περιορίσετε την οδηγία σε έναν συγκεκριμένο τύπο στοιχείου HTML. Τα δύο πιο συνηθισμένα είναι στοιχείο ή χαρακτηριστικό, το οποίο δηλώνετε ότι χρησιμοποιείτε μι και ΕΝΑ αντίστοιχα. Μπορείτε επίσης να το περιορίσετε σε μια τάξη CSS ή ένα σχόλιο, αλλά αυτά δεν είναι τόσο συνηθισμένα.

Γ.2 Η λειτουργία συνδέσμου είναι όπου τοποθετείτε όλο τον κωδικό χειρισμού DOM. Υπάρχουν μερικές εξαιρέσεις που έχω βρει, αλλά αυτό ισχύει πάντα (τουλάχιστον το 99% του χρόνου). Αυτός είναι ένας θεμελιώδης βασικός κανόνας του AngularJS και γι 'αυτό το έχω τονίσει.

Γ.3 Η λειτουργία ελεγκτή λειτουργεί ακριβώς όπως ο κύριος ελεγκτής που ορίσαμε για την εφαρμογή, αλλά το εύρος $ αντικείμενο που περνάμε είναι συγκεκριμένο για το στοιχείο DOM στο οποίο ζει η οδηγία.

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

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

Ας προσθέσουμε λοιπόν μια κολλώδη σημείωση στο DOM.

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

div sticky-note ng-repeat = "note in Notes" note = "note" ondelete = "deleteNote (id)">
τύπος κουμπιού = "κουμπί" ng-click = "deleteNote (note.id)"> × / κουμπί>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "ενημέρωση Σημείωση (σημείωση)"
> {{note.body}} / textarea>
/ div>

Η ομορφιά του ng-επανάληψη είναι ότι συνδέεται με όποιο πίνακα περνάτε και, όταν προσθέτετε ένα στοιχείο στον πίνακα, το στοιχείο DOM θα ενημερωθεί αυτόματα. Μπορείτε να το κάνετε αυτό ένα βήμα παραπέρα και να επαναλάβετε όχι μόνο τα τυπικά στοιχεία DOM, αλλά και άλλες προσαρμοσμένες οδηγίες. Γι 'αυτό βλέπετε κολλώδης νότα ως χαρακτηριστικό στο στοιχείο.

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

Όταν υπάρχει μια οδηγία, προστίθεται στο DOM και καλείται η λειτουργία σύνδεσης. Αυτή είναι μια τέλεια ευκαιρία για να ορίσετε ορισμένες προεπιλεγμένες ιδιότητες DOM στο στοιχείο. Η παράμετρος στοιχείου στην οποία περνάμε είναι στην πραγματικότητα ένα αντικείμενο jQuery και έτσι μπορούμε να εκτελέσουμε λειτουργίες jQuery σε αυτό.

(Το AngularJS έρχεται στην πραγματικότητα με ένα υποσύνολο του jQuery ενσωματωμένο σε αυτό, αλλά εάν έχετε ήδη συμπεριλάβει την πλήρη έκδοση του jQuery, το AngularJS θα αναβάλει αυτό.)

app.directive («stickyNote», λειτουργία (υποδοχή) {
var linker = συνάρτηση (πεδίο, στοιχείο, attrs) {
// Κάποια μύηση DOM για να το κάνει ωραίο
element.css («αριστερά», «10 εικονοστοιχεία»);
element.css («κορυφή», «50 εικονοστοιχεία»);
element.hide (). fadeIn ();
};
});

Στον παραπάνω κώδικα απλώς τοποθετούμε τη κολλώδη νότα στη σκηνή και την ξεθωριάζουμε.

11. Διαγραφή κολλώδους σημείωσης

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

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

Παρατηρήστε το HTML μέσα στην οδηγία.

τύπος κουμπιού = "κουμπί" ng-click = "deleteNote (note.id)"> × / κουμπί>

Το επόμενο πράγμα που πρόκειται να πω μπορεί να φαίνεται πολύ μακριά, αλλά θυμηθείτε ότι είμαστε στην ίδια πλευρά και θα έχει νόημα μετά την επεξεργασία του. Όταν κάνετε κλικ στο κουμπί στην επάνω δεξιά γωνία της κολλώδους σημείωσης, καλούμε Διαγραφή Σημείωση σχετικά με τον ελεγκτή της οδηγίας και περνώντας στο note.id αξία. Στη συνέχεια, ο ελεγκτής καλεί ondelete, που στη συνέχεια εκτελεί ό, τι έκφραση εντάξαμε σε αυτήν. Μέχρι εδώ καλά? Καλούμε μια τοπική μέθοδο στον ελεγκτή που στη συνέχεια την παραδίδει καλώντας όποια έκφραση ορίστηκε στο απομονωμένο πεδίο. Η έκφραση που καλείται στον γονέα τυχαίνει να καλείται Διαγραφή Σημείωση επισης.

app.directive («stickyNote», λειτουργία (υποδοχή) {
var controller = συνάρτηση (εύρος $) {
$ lingkup.deleteNote = συνάρτηση (id) {
$ lingkop.ondelete ({
id: id
});
};
};

ΕΠΙΣΤΡΟΦΗ {
περιορισμός: «A»,
σύνδεσμος: σύνδεσμος,
ελεγκτής: ελεγκτής,
πεδίο εφαρμογής: {
σημείωση: ’=’,
ondelete: «&»
}
};
});

(Όταν χρησιμοποιείτε απομονωμένο πεδίο έκφρασης, οι παράμετροι αποστέλλονται σε ένα χάρτη αντικειμένων.)

Στο γονικό πεδίο εφαρμογής, Διαγραφή Σημείωση καλείται και κάνει μια αρκετά τυπική διαγραφή χρησιμοποιώντας το angular.forEach βοηθητική λειτουργία για επανάληψη του πίνακα σημειώσεων. Μόλις η λειτουργία χειριστεί την τοπική της επιχείρηση, προχωρά και εκπέμπει την εκδήλωση για τον υπόλοιπο κόσμο να αντιδράσει ανάλογα.

app.controller («MainCtrl», λειτουργία ($ εύρος, υποδοχή) {
$ lingkop.notes = [];

// Εισερχόμενα
socket.on («onNoteDeleted», συνάρτηση (δεδομένα) {
$ lingkup.deleteNote (data.id);
});

// Εξερχόμενος
$ lingkup.deleteNote = συνάρτηση (id) {
var oldNotes = $ lingkup.notes,
newNotes = [];

angular.forEach (oldNotes, λειτουργία (σημείωση) {
εάν (note.id! == id) newNotes.push (σημείωση);
});

$ lingkop.notes = newNotes;
socket.emit («deleteNote», {id: id});
};
});

12. Ενημέρωση κολλώδους σημείωσης

Κάνουμε φανταστική πρόοδο! Μέχρι τώρα ελπίζω ότι αρχίζετε να βλέπετε κάποια μοτίβα από αυτήν την περιοδεία ανεμοστρόβιλου που ακολουθούμε. Το επόμενο στοιχείο στη λίστα είναι η δυνατότητα ενημέρωσης.

Θα ξεκινήσουμε από τα πραγματικά στοιχεία DOM και θα το ακολουθήσουμε μέχρι το διακομιστή και θα επιστρέψουμε στον πελάτη. Πρώτα πρέπει να γνωρίζουμε πότε αλλάζει ο τίτλος ή το σώμα της κολλώδους σημείωσης. Το AngularJS αντιμετωπίζει στοιχεία φόρμας ως μέρος του μοντέλου δεδομένων, ώστε να μπορείτε να συνδέσετε αμφίδρομη δέσμευση δεδομένων σε μια στιγμή. Για να το κάνετε αυτό χρησιμοποιήστε το μοντέλο ng οδηγία και τοποθετήστε την ιδιότητα στην οποία θέλετε να δεσμεύσετε. Σε αυτήν την περίπτωση πρόκειται να χρησιμοποιήσουμε σημείωση. τίτλος και σημείωση αντίστοιχα.

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

input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body}} / textarea>

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

app.directive («stickyNote», λειτουργία (υποδοχή) {
var controller = συνάρτηση (εύρος $) {
$ lingkop.updateNote = συνάρτηση (σημείωση) {
socket.emit («updateNote», σημείωση);
};
};
});

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

var controller = συνάρτηση (εύρος $) {
// Εισερχόμενα
socket.on («onNoteUpdated», συνάρτηση (δεδομένα) {
// Ενημερώστε εάν η ίδια σημείωση
εάν (data.id == $ cakupan.note.id) {

$ lingkop.note.title = data.title;
$ lingkop.note.body = data.body;
}
});
};

13. Μετακίνηση κολλώδους νότας

Σε αυτό το σημείο έχουμε κάνει έναν γύρο γύρω από την παιδική πισίνα CRUD και η ζωή είναι καλή! Ακριβώς για χάρη ενός σαλόνι για να εντυπωσιάσετε τους φίλους σας, θα προσθέσουμε τη δυνατότητα μετακίνησης σημειώσεων στην οθόνη και ενημέρωσης συντεταγμένων σε πραγματικό χρόνο. Μην πανικοβληθείτε - είναι μόνο μερικές ακόμη γραμμές κώδικα. Όλη αυτή η σκληρή δουλειά θα αποδώσει. Υπόσχομαι!

Προσκαλέσαμε έναν ειδικό επισκέπτη, το jQueryUI, στο πάρτι και τα κάναμε όλα για τα draggables. Η προσθήκη της δυνατότητας να σύρετε μια σημείωση τοπικά απαιτεί μόνο μία γραμμή κώδικα. Εάν προσθέσετε element.draggable (); στη λειτουργία σύνδεσης σας θα αρχίσετε να ακούτε το "Eye of the Tiger" του Survivor επειδή μπορείτε πλέον να σύρετε τις σημειώσεις σας.

Θέλουμε να μάθουμε πότε έχει σταματήσει η μεταφορά και να καταγράψουμε τις νέες συντεταγμένες που θα περάσουν. Το jQueryUI δημιουργήθηκε από μερικούς πολύ έξυπνους ανθρώπους, οπότε όταν σταματά η μεταφορά, απλά πρέπει να ορίσετε μια συνάρτηση επανάκλησης για το συμβάν διακοπής. Αρπάζουμε το note.id από το αντικείμενο του πεδίου και τις τιμές αριστερού και πάνω CSS από το ui αντικείμενο. Με αυτήν τη γνώση κάνουμε ό, τι κάναμε καθ 'όλη τη διάρκεια: εκπέμψτε!

app.directive («stickyNote», λειτουργία (υποδοχή) {
var linker = συνάρτηση (πεδίο, στοιχείο, attrs) {
element.draggable ({
διακοπή: λειτουργία (συμβάν, ui) {
socket.emit («moveNote», {
id: lingkup.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on («onNoteMoved», συνάρτηση (δεδομένα) {
// Ενημερώστε εάν η ίδια σημείωση
εάν (data.id == cakupan.note.id) {
element.animate ({
αριστερά: data.x,
κορυφή: data.y
});
}
});
};
});

Σε αυτό το σημείο δεν πρέπει να προκαλεί έκπληξη το γεγονός ότι ακούμε επίσης ένα γεγονός σχετικά με τη μετακίνηση από την υπηρεσία socket. Σε αυτήν την περίπτωση είναι το onNoteMoved συμβάν και εάν η σημείωση είναι ταιριάζει τότε ενημερώνουμε τις αριστερές και τις κορυφαίες ιδιότητες CSS. Μπαμ! Ολοκληρώθηκε!

14. Το μπόνους

Αυτό είναι ένα τμήμα μπόνους που δεν θα συμπεριλάβω αν δεν ήμουν απόλυτα σίγουρος ότι θα μπορούσατε να το επιτύχετε σε λιγότερο από 10 λεπτά. Πρόκειται να αναπτύξουμε σε έναν ζωντανό διακομιστή (εξακολουθώ να εκπλαγώ με το πόσο εύκολο είναι να το κάνουμε).

Πρώτον, πρέπει να εγγραφείτε για μια δωρεάν δοκιμή Nodejitsu. Η δοκιμαστική περίοδος είναι δωρεάν για 30 ημέρες, κάτι που είναι ιδανικό για να βραχεί τα πόδια σας.

Μόλις δημιουργήσετε το λογαριασμό σας, πρέπει να εγκαταστήσετε το πακέτο jitsu, το οποίο μπορείτε να κάνετε από τη γραμμή εντολών μέσω $ npm εγκατάσταση jitsu -g.

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

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

Και, αγαπητοί μου φίλοι, αυτό είναι το μόνο που υπάρχει! Θα λάβετε τη διεύθυνση URL για την εφαρμογή σας από την έξοδο του διακομιστή μόλις αναπτυχθεί και είναι έτοιμη να ξεκινήσει.

15. Συμπέρασμα

Έχουμε καλύψει πολλούς λόγους του AngularJS σε αυτό το άρθρο και ελπίζω να διασκεδάσατε πολύ στη διαδικασία. Νομίζω ότι είναι πραγματικά τακτοποιημένο αυτό που μπορείτε να πετύχετε με το AngularJS και το Socket.io σε περίπου 200 γραμμές κώδικα.

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

Ο Lukas Ruebbelke είναι λάτρης της τεχνολογίας και συν-συγγραφέας του AngularJS in Action for Manning Publications. Το αγαπημένο του πράγμα είναι να κάνει τους ανθρώπους τόσο ενθουσιασμένους για τη νέα τεχνολογία όσο είναι. Διαχειρίζεται την ομάδα χρηστών της εφαρμογής Web Phoenix και έχει φιλοξενήσει πολλούς hackathons με τους συναδέλφους του στο έγκλημα.

Σας άρεσε αυτό; Διαβάστε αυτά!

• Πώς να φτιάξετε μια εφαρμογή
• Οι αγαπημένες μας γραμματοσειρές ιστού - και δεν κοστίζουν ούτε δεκάρα
• Ανακαλύψτε τι ακολουθεί για το Augmented Reality
• Κατεβάστε δωρεάν υφές: υψηλή ανάλυση και έτοιμο για χρήση τώρα