AngularJS Collaboration Board mit Socket.io

Inhalt

• 01. Der Server
• 02. Die nackten Knochen
• 03. Deklarieren Sie Ihre Abhängigkeiten
• 04. Verdrahten Sie Socket.io
• 05. Starten Sie Ihre Motoren!
• 06. Ein paar offene Gedanken, bevor ich weitermache
• 07. Der Kunde
• 08. Die nackten Knochen
• 09. Erstellen einer Haftnotiz
• 10. Anzeigen der Haftnotizen
• 11. Löschen einer Haftnotiz
• 12. Aktualisieren einer Haftnotiz
• 13. Verschieben einer Haftnotiz
• 14. Der Bonus
• 15. Schlussfolgerung
• Mochte dies? Lese das!

• Erforderliche Kenntnisse: JavaScript für Fortgeschrittene
• Benötigt: Node.js, NPM
• Projektzeit: 2 Stunden

AngularJS eignet sich besonders gut zum Erstellen umfangreicher clientseitiger Anwendungen im Browser. Wenn Sie dem Mix ein wenig Socket.io hinzufügen, werden die Dinge wirklich interessant. In diesem Artikel erstellen wir ein Echtzeit-Collaboration-Board, das AngularJS für die clientseitige Anwendung und Socket.io verwendet, um den Status zwischen allen verbundenen Clients zu teilen.

Lassen Sie uns ein wenig über die Haushaltsführung sprechen, bevor wir anfangen. Ich gehe davon aus, dass Sie ein grundlegendes Verständnis von HTML und JavaScript haben, da ich nicht jede kleine Ecke des Codes abdecken werde. Zum Beispiel werde ich die CSS- und JavaScript-Dateien, die ich im Kopf der HTML-Datei enthalten habe, nicht aufrufen, da dort keine neuen Informationen vorhanden sind.

Außerdem empfehle ich Ihnen, den Code aus meinem GitHub-Konto zu holen, um mitzumachen. Mein guter Freund Brian Ford hat auch einen ausgezeichneten Socket.io-Samen, auf den ich einige meiner ursprünglichen Ideen gestützt habe.

Die vier Hauptfunktionen, die wir im Kollaborationsboard möchten, sind die Möglichkeit, eine Notiz zu erstellen, die Notizen zu lesen, eine Notiz zu aktualisieren, eine Notiz zu löschen und zum Spaß eine Notiz auf dem Board zu verschieben. Ja, das ist richtig. Wir konzentrieren uns auf Standard-CRUD-Funktionen. Ich glaube, dass wir durch die Konzentration auf diese grundlegenden Funktionen genug Code abgedeckt haben, damit Muster entstehen können, damit Sie sie übernehmen und an anderer Stelle anwenden können.

01. Der Server

Wir werden zuerst mit dem Node.js-Server beginnen, da er als Grundlage dient, auf der wir alles andere aufbauen werden.

Wir werden mit Express und Socket.io einen Node.js-Server erstellen. Der Grund, warum wir Express verwenden, ist, dass es einen nützlichen Mechanismus zum Einrichten eines statischen Asset-Servers in Node.js bietet. Express bietet eine Reihe wirklich beeindruckender Funktionen. In diesem Fall werden wir es jedoch verwenden, um die Anwendung sauber zwischen Server und Client zu halbieren.

(Ich gehe davon aus, dass Node.js und NPM installiert sind. Eine schnelle Google-Suche zeigt Ihnen, wie Sie diese installieren können, wenn Sie dies nicht tun.)

02. Die nackten Knochen

Um die nackten Knochen des Servers aufzubauen, müssen wir einige Dinge tun, um den Betrieb aufzunehmen.

// app.js.

// A.1
var express = erfordern (’express’),
app = express ();
server = require (’http’). createServer (app),
io = require (’socket.io’). listen (server);

// A.2
app.configure (function () {
app.use (express.static (__ dirname + ’/ public’));
});

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

A.1 Wir deklarieren und instanziieren unsere Node.js-Module, damit wir sie in unserer Anwendung verwenden können. Wir deklarieren Express, instanziieren Express und erstellen dann einen HTTP-Server und senden die Express-Instanz hinein. Und von dort aus instanziieren wir Socket.io und fordern es auf, unsere Serverinstanz im Auge zu behalten.

A.2 Anschließend weisen wir unsere Express-App an, unser öffentliches Verzeichnis zum Bereitstellen von Dateien zu verwenden.

A.3 Wir starten den Server und weisen ihn an, den Port abzuhören 1337.

Bisher war das ziemlich schmerzlos und schnell. Ich glaube, wir haben weniger als 10 Zeilen im Code und bereits einen funktionierenden Node.js-Server. Weiter!

03. Deklarieren Sie Ihre Abhängigkeiten

// packages.json
{
"name": "angle-collab-board",
"description": "AngularJS Collaboration Board",
"version": "0.0.1-1",
"privat": wahr,
"Abhängigkeiten": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Eine der schönsten Funktionen von NPM ist die Möglichkeit, Ihre Abhängigkeiten in a zu deklarieren packages.json Datei und installieren Sie sie dann automatisch über npm installieren in der Kommandozeile.

04. Verdrahten Sie Socket.io

Wir haben bereits die Kernfunktionen definiert, die wir in der Anwendung wünschen, und müssen daher Socket.io-Ereignis-Listener und einen geeigneten Abschluss einrichten, um das Ereignis für jede Operation zu behandeln.

Im folgenden Code werden Sie feststellen, dass es sich im Wesentlichen um eine Konfiguration von Ereignis-Listenern und Rückrufen handelt. Das erste Ereignis ist das Verbindung Ereignis, mit dem wir unsere anderen Ereignisse in der Schließung verkabeln.

io.sockets.on ('Verbindung', Funktion (Socket) {
socket.on (’createNote’, Funktion (Daten) {
socket.broadcast.emit (’onNoteCreated’, Daten);
});

socket.on (’updateNote’, Funktion (Daten) {
socket.broadcast.emit (’onNoteUpdated’, Daten);
});

socket.on (’deleteNote’, Funktion (Daten) {
socket.broadcast.emit (’onNoteDeleted’, Daten);
});

socket.on (’moveNote’, Funktion (Daten) {
socket.broadcast.emit (’onNoteMoved’, Daten);
});
});

Von hier aus fügen wir Hörer hinzu createNote, updateNote, deleteNote und moveNote. In der Rückruffunktion senden wir einfach, welches Ereignis aufgetreten ist, damit jeder Client, der zuhört, benachrichtigt werden kann, dass das Ereignis aufgetreten ist.

Es gibt einige Dinge, die Sie über die Rückruffunktionen in den einzelnen Ereignishandlern beachten sollten. Erstens, wenn Sie ein Ereignis an alle anderen Personen als den Client senden möchten, der das von Ihnen eingefügte Ereignis ausgegeben hat Übertragung Vor dem emittieren Funktionsaufruf. Zweitens geben wir die Nutzlast der Veranstaltung einfach an die interessierten Parteien weiter, damit sie sie nach eigenem Ermessen verarbeiten können.

05. Starten Sie Ihre Motoren!

Nachdem wir unsere Abhängigkeiten definiert und unsere Node.js-Anwendung mit Express- und Socket.io-Funktionen eingerichtet haben, ist es ganz einfach, den Node.js-Server zu initialisieren.

Zuerst installieren Sie Ihre Node.js-Abhängigkeiten wie folgt:

npm installieren

Und dann starten Sie den Server wie folgt:

Knoten app.js.

Und dann! Sie gehen in Ihrem Browser zu dieser Adresse. Bam!

06. Ein paar offene Gedanken, bevor ich weitermache

Ich bin in erster Linie ein Frontend-Entwickler und war anfangs ein wenig eingeschüchtert, einen Node.js-Server an meine Anwendung anzuschließen. Der AngularJS-Teil war ein Snap, aber serverseitiges JavaScript? Stellt die gruselige Musik aus einem Horrorfilm in die Warteschlange.

Ich war jedoch völlig außer mir, als ich herausfand, dass ich einen statischen Webserver in nur wenigen Codezeilen einrichten und in einigen weiteren Zeilen Socket.io verwenden konnte, um alle Ereignisse zwischen den Browsern zu verarbeiten. Und es war immer noch nur JavaScript! Aus Gründen der Aktualität behandeln wir nur einige Funktionen, aber ich hoffe, dass Sie am Ende des Artikels sehen werden, dass es leicht zu schwimmen ist - und das tiefe Ende des Pools nicht so beängstigend ist.

07. Der Kunde

Nachdem wir unser solides Fundament mit unserem Server aufgebaut haben, gehen wir zu meinem Lieblingsteil über - dem Client! Wir werden AngularJS, jQueryUI für den ziehbaren Teil und Twitter Bootstrap für eine Stilbasis verwenden.

08. Die nackten Knochen

Wenn ich eine neue AngularJS-Anwendung starte, möchte ich aus persönlichen Gründen schnell das absolute Minimum definieren, von dem ich weiß, dass ich anfangen muss, und dann so schnell wie möglich darüber iterieren.

Jede AngularJS-Anwendung muss mit mindestens einem vorhandenen Controller gebootet werden. Daher beginne ich im Allgemeinen immer hier.

Um die Anwendung automatisch zu booten, müssen Sie sie einfach hinzufügen ng-app an den HTML-Knoten, in dem die Anwendung leben soll. In den meisten Fällen ist das Hinzufügen zum HTML-Tag durchaus akzeptabel. Ich habe auch ein Attribut hinzugefügt ng-app um es zu sagen, dass ich die verwenden möchte App Modul, das ich gleich definieren werde.

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

Ich weiß, dass ich mindestens einen Controller benötigen werde, und deshalb werde ich das mit verwenden ng-controller und ihm eine Eigenschaft von zuweisen MainCtrl.

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

Jetzt sind wir also am Haken für ein Modul mit dem Namen App und ein Controller namens MainCtrl. Lassen Sie uns fortfahren und sie jetzt erstellen.

Das Erstellen eines Moduls ist ziemlich einfach. Sie definieren es durch Aufrufen eckiges Modul und ihm einen Namen geben. Zum späteren Nachschlagen können Sie im zweiten Parameter eines leeren Arrays Untermodule zur Verwendung in der Anwendung einfügen. Es liegt außerhalb des Rahmens dieses Lernprogramms, ist jedoch praktisch, wenn Ihre Anwendung an Komplexität und Anforderungen zunimmt.

// public / js / collab.js
var app = angle.module (’app’, []);

Wir werden einige leere Platzhalter in der deklarieren App Modul beginnend mit dem MainCtrl unten.Wir werden diese alle später ausfüllen, aber ich wollte die Grundstruktur von Anfang an veranschaulichen.

app.controller (’MainCtrl’, Funktion ($ scope) {});

Wir werden auch die Socket.io-Funktionalität in a verpacken Steckdose Service, damit wir dieses Objekt kapseln können und es nicht im globalen Namespace herumschweben lassen.

app.factory ("Socket", Funktion ($ rootScope) {});

Und wenn wir schon dabei sind, werden wir eine Richtlinie mit dem Namen deklarieren Haftnotiz dass wir verwenden werden, um die Sticky-Note-Funktionalität in zu kapseln.

app.directive (’stickyNote’, Funktion (Socket) {});

Lassen Sie uns also überprüfen, was wir bisher getan haben. Wir haben die Anwendung mit gebootet ng-app und deklarierte unseren Anwendungscontroller im HTML. Wir haben auch das Anwendungsmodul definiert und das erstellt MainCtrl Controller, die Steckdose Service und die Haftnotiz Richtlinie.

09. Erstellen einer Haftnotiz

Nachdem wir das Grundgerüst der AngularJS-Anwendung eingerichtet haben, werden wir mit dem Aufbau der Erstellungsfunktion beginnen.

app.controller (’MainCtrl’, Funktion ($ scope, socket) {// B.1
$ scope.notes = []; // B.2

// Eingehend
socket.on (’onNoteCreated’, Funktion (Daten) {// B.3
$ scope.notes.push (Daten);
});

// Ausgehend
$ scope.createNote = function () {// B.4
var note = {
id: neues Datum (). getTime (),
Titel: "Neue Notiz",
body: "Ausstehend"
};

$ scope.notes.push (Anmerkung);
socket.emit (’createNote’, Anmerkung);
};

B.1 In AngularJS ist eine Abhängigkeitsinjektionsfunktion integriert, sodass wir a injizieren $ scope Objekt und die Steckdose Bedienung. Das $ scope Das Objekt dient als ViewModel und ist im Grunde ein JavaScript-Objekt, in das einige Ereignisse eingebettet sind, um die bidirektionale Datenbindung zu ermöglichen.

B.2 Wir deklarieren das Array, an das die Ansicht gebunden werden soll.

B.3 Wir fügen einen Listener für das hinzu onNoteCreated Veranstaltung auf der Steckdose Service und Schieben der Ereignisnutzlast in die $ scope.notes Array.

B.4 Wir haben a createNote Methode, die einen Standard erstellt Hinweis Objekt und schiebt es in die $ scope.notes Array. Es verwendet auch die Steckdose Service, um die zu emittieren createNote Veranstaltung und bestehen die neue Notiz Objekt entlang.

Wie nennen wir es nun, da wir eine Methode zum Erstellen der Notiz haben? Das ist eine gute Frage! In der HTML-Datei fügen wir die integrierte AngularJS-Direktive hinzu ng-click auf die Schaltfläche und fügen Sie dann die createNote Methodenaufruf als Attributwert.

button id = "createButton" ng-click = "createNote ()"> Notiz / Schaltfläche erstellen>

Zeit für einen kurzen Überblick über das, was wir bisher getan haben. Wir haben dem Array ein Array hinzugefügt $ scope Objekt in der MainCtrl Hier werden alle Notizen für die Anwendung gespeichert. Wir haben auch eine hinzugefügt createNote Methode auf der $ scope Objekt, um eine neue lokale Notiz zu erstellen und diese Notiz dann über das an die anderen Clients zu senden Steckdose Bedienung. Wir haben auch einen Ereignis-Listener hinzugefügt Steckdose Service, damit wir wissen, wann andere Kunden eine Notiz erstellt haben, damit wir sie unserer Sammlung hinzufügen können.

10. Anzeigen der Haftnotizen

Wir haben jetzt die Möglichkeit, ein Notizobjekt zu erstellen und es zwischen Browsern zu teilen, aber wie zeigen wir es tatsächlich an? Hier kommen Richtlinien ins Spiel.

Direktiven und ihre Feinheiten sind ein großes Thema, aber die kurze Version ist, dass sie eine Möglichkeit bieten, Elemente und Attribute mit benutzerdefinierten Funktionen zu erweitern. Direktiven sind leicht mein Lieblingsteil von AngularJS, da Sie damit im Wesentlichen eine gesamte DSL (Domain Specific Language) um Ihre Anwendung in HTML erstellen können.

Es ist natürlich, dass wir, da wir Haftnotizen für unser Collaboration Board erstellen werden, eine erstellen sollten Haftnotiz Richtlinie. Direktiven werden definiert, indem die Direktivenmethode für ein Modul aufgerufen wird, für das Sie sie deklarieren möchten, und ein Name und eine Funktion übergeben werden, die ein Direktivendefinitionsobjekt zurückgeben. Das Direktivendefinitionsobjekt verfügt über viele mögliche Eigenschaften, die Sie definieren können. Wir werden hier jedoch nur einige für unsere Zwecke verwenden.

Ich empfehle, dass Sie die AngularJS-Dokumentation lesen, um die gesamten Listen der Eigenschaften anzuzeigen, die Sie für das Direktivendefinitionsobjekt definieren können.

app.directive (’stickyNote’, Funktion (Socket) {
var linker = function (scope, element, attrs) {};

var controller = function ($ scope) {};

Rückkehr {
einschränken: 'A', // C.1
link: linker, // C.2
Controller: Controller, // C.3
Geltungsbereich: {// C.4
Hinweis: ’=’,
ondelete: ’&’
}
};
});

C.1 Sie können Ihre Direktive auf einen bestimmten Typ von HTML-Element beschränken. Die beiden häufigsten sind Elemente oder Attribute, die Sie mit deklarieren E. und EIN beziehungsweise. Sie können es auch auf eine CSS-Klasse oder einen Kommentar beschränken, diese sind jedoch nicht so häufig.

C.2 In der Link-Funktion geben Sie Ihren gesamten DOM-Manipulationscode ein. Es gibt einige Ausnahmen, die ich gefunden habe, aber dies ist immer wahr (mindestens 99 Prozent der Zeit). Dies ist eine grundlegende Grundregel von AngularJS und deshalb habe ich sie betont.

C.3 Die Controller-Funktion funktioniert genauso wie der Hauptcontroller, den wir für die Anwendung definiert haben, jedoch der $ scope Das Objekt, das wir übergeben, ist spezifisch für das DOM-Element, auf dem die Richtlinie basiert.

C.4 AngularJS hat ein Konzept des isolierten Geltungsbereichs, mit dem Sie explizit definieren können, wie der Geltungsbereich einer Direktive mit der Außenwelt kommuniziert. Wenn wir den Geltungsbereich nicht deklariert hätten, hätte die Direktive implizit vom übergeordneten Geltungsbereich mit einer Eltern-Kind-Beziehung geerbt. In vielen Fällen ist dies nicht optimal. Indem wir den Geltungsbereich isolieren, verringern wir die Wahrscheinlichkeit, dass die Außenwelt versehentlich und nachteilig den Status Ihrer Richtlinie beeinflusst.

Ich habe die bidirektionale Datenbindung für erklärt Hinweis mit dem = Symbol und ein Ausdruck, der an bindet ondelete mit dem & Symbol. Bitte lesen Sie die AngularJS-Dokumentation, um eine vollständige Erläuterung des isolierten Geltungsbereichs zu erhalten, da dies eines der komplizierteren Themen im Framework ist.

Fügen wir dem DOM also tatsächlich eine Haftnotiz hinzu.

Wie jedes gute Framework bietet AngularJS sofort einige wirklich großartige Funktionen. Eine der handlichsten Funktionen ist ng-wiederholen. Mit dieser AngularJS-Direktive können Sie ein Array von Objekten übergeben und jedes Tag, auf dem es sich befindet, so oft duplizieren, wie sich Elemente im Array befinden. Im folgenden Fall iterieren wir über die Anmerkungen Array und Duplizieren der div Element und seine Kinder für die Länge der Anmerkungen Array.

div Haftnotiz ng-repeat = "Notiz in Notizen" note = "Notiz" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
Eingabe ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

Die Schönheit von ng-wiederholen ist, dass es an jedes Array gebunden ist, das Sie übergeben, und wenn Sie dem Array ein Element hinzufügen, wird Ihr DOM-Element automatisch aktualisiert. Sie können noch einen Schritt weiter gehen und nicht nur Standard-DOM-Elemente, sondern auch andere benutzerdefinierte Anweisungen wiederholen. Deshalb sehen Sie Haftnotiz als Attribut für das Element.

Es gibt zwei weitere Teile des benutzerdefinierten Codes, die geklärt werden müssen. Wir haben den Umfang auf dem isoliert Haftnotizen Richtlinie über zwei Eigenschaften. Der erste ist der verbindungsdefinierte isolierte Bereich auf dem Hinweis Eigentum. Dies bedeutet, dass jedes Mal, wenn sich das Notizobjekt im übergeordneten Bereich ändert, das entsprechende Notizobjekt in der Direktive automatisch aktualisiert wird und umgekehrt. Der andere definierte isolierte Bereich befindet sich auf der ondelete Attribut. Was dies bedeutet ist, dass wann ondelete Wird in der Direktive aufgerufen, wird der Ausdruck in der Direktive aufgerufen ondelete Attribut für das DOM-Element, das die Direktive instanziiert.

Wenn eine Direktive instanziiert wird, wird sie dem DOM hinzugefügt und die Verknüpfungsfunktion wird aufgerufen. Dies ist eine perfekte Gelegenheit, um einige Standard-DOM-Eigenschaften für das Element festzulegen. Der Elementparameter, den wir übergeben, ist tatsächlich ein jQuery-Objekt, sodass wir jQuery-Operationen daran ausführen können.

(AngularJS enthält tatsächlich eine Teilmenge von jQuery, aber wenn Sie bereits die Vollversion von jQuery enthalten haben, wird AngularJS darauf zurückgreifen.)

app.directive (’stickyNote’, Funktion (Socket) {
var linker = Funktion (Bereich, Element, Attribute) {
// Eine DOM-Initiation, um es schön zu machen
element.css ("left", "10px");
element.css ("top", "50px");
element.hide (). fadeIn ();
};
});

Im obigen Code positionieren wir einfach die Haftnotiz auf der Bühne und blenden sie ein.

11. Löschen einer Haftnotiz

Jetzt, da wir eine Haftnotiz hinzufügen und anzeigen können, ist es Zeit, Haftnotizen zu löschen. Beim Erstellen und Löschen von Haftnotizen müssen Elemente aus dem Array hinzugefügt und gelöscht werden, an das die Notizen gebunden sind. Dies liegt in der Verantwortung des übergeordneten Bereichs, dieses Array zu verwalten. Aus diesem Grund erstellen wir die Löschanforderung aus der Direktive heraus, lassen den übergeordneten Bereich jedoch das eigentliche schwere Heben ausführen.

Aus diesem Grund haben wir uns die Mühe gemacht, einen ausdrucksdefinierten isolierten Bereich für die Direktive zu erstellen: Die Direktive konnte das Löschereignis also intern empfangen und zur Verarbeitung an ihr übergeordnetes Element weiterleiten.

Beachten Sie den HTML-Code in der Direktive.

button type = "button" ng-click = "deleteNote (note.id)"> × / button>

Das nächste, was ich sagen werde, scheint ein langer Weg zu sein, aber denken Sie daran, dass wir auf der gleichen Seite sind und es nach der Ausarbeitung Sinn machen wird. Wenn Sie auf die Schaltfläche in der oberen rechten Ecke der Haftnotiz klicken, rufen wir an deleteNote auf dem Controller der Richtlinie und übergeben in der note.id Wert. Der Controller ruft dann an ondelete, Das führt dann den Ausdruck aus, den wir damit verbunden haben. So weit, ist es gut? Wir rufen eine lokale Methode auf dem Controller auf, die sie dann durch Aufrufen des im isolierten Bereich definierten Ausdrucks weitergibt. Der Ausdruck, der auf dem übergeordneten Element aufgerufen wird, wird zufällig aufgerufen deleteNote auch.

app.directive (’stickyNote’, Funktion (Socket) {
var controller = function ($ scope) {
$ scope.deleteNote = Funktion (ID) {
$ scope.ondelete ({
Ich tat
});
};
};

Rückkehr {
einschränken: "A",
Link: Linker,
Controller: Controller,
Umfang: {
Hinweis: ’=’,
ondelete: ’&’
}
};
});

(Bei Verwendung eines ausdrucksdefinierten isolierten Bereichs werden Parameter in einer Objektzuordnung gesendet.)

Im übergeordneten Bereich deleteNote wird aufgerufen und führt eine ziemlich normale Löschung mit dem aus eckig.fürJedes Utility-Funktion zum Durchlaufen des Notes-Arrays. Sobald die Funktion ihr lokales Geschäft abgewickelt hat, sendet sie das Ereignis aus, damit der Rest der Welt entsprechend reagieren kann.

app.controller (’MainCtrl’, Funktion ($ scope, socket) {
$ scope.notes = [];

// Eingehend
socket.on (’onNoteDeleted’, Funktion (Daten) {
$ scope.deleteNote (data.id);
});

// Ausgehend
$ scope.deleteNote = Funktion (ID) {
var oldNotes = $ scope.notes,
newNotes = [];

angle.forEach (oldNotes, function (note) {
if (note.id! == id) newNotes.push (note);
});

$ scope.notes = newNotes;
socket.emit (’deleteNote’, {id: id});
};
});

12. Aktualisieren einer Haftnotiz

Wir machen fantastische Fortschritte! Inzwischen hoffe ich, dass Sie einige Muster sehen, die aus dieser Wirbelsturm-Tour hervorgehen, die wir unternehmen. Das nächste Element in der Liste ist die Aktualisierungsfunktion.

Wir beginnen bei den eigentlichen DOM-Elementen und verfolgen sie bis zum Server und zurück zum Client. Zuerst müssen wir wissen, wann der Titel oder der Text der Haftnotiz geändert wird. AngularJS behandelt Formularelemente als Teil des Datenmodells, sodass Sie die bidirektionale Datenbindung im Handumdrehen verbinden können. Verwenden Sie dazu die ng-Modell Direktive und fügen Sie die Eigenschaft ein, an die Sie binden möchten. In diesem Fall werden wir verwenden note.title und note.body beziehungsweise.

Wenn sich eine dieser Eigenschaften ändert, möchten wir diese Informationen erfassen, um sie weiterzugeben. Dies erreichen wir mit dem ng-change Direktive und verwenden Sie es, um aufzurufen updateNote und übergeben Sie das Notizobjekt selbst. AngularJS führt einige sehr clevere Dirty-Checks durch, um festzustellen, ob der Wert von irgendetwas drin ist ng-Modell hat sich geändert und führt dann den Ausdruck aus, der sich in befindet ng-change.

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

Der Vorteil der Verwendung ng-change ist, dass die lokale Transformation bereits stattgefunden hat und wir nur für die Weiterleitung der Nachricht verantwortlich sind. In der Steuerung updateNote heißt und von dort werden wir das ausstrahlen updateNote Ereignis für unseren Server zur Übertragung an die anderen Clients.

app.directive (’stickyNote’, Funktion (Socket) {
var controller = function ($ scope) {
$ scope.updateNote = function (note) {
socket.emit (’updateNote’, Hinweis);
};
};
});

Und in der Direktivensteuerung hören wir auf die onNoteUpdated Ereignis, um zu wissen, wann eine Notiz von einem anderen Client aktualisiert wurde, damit wir unsere lokale Version aktualisieren können.

var controller = function ($ scope) {
// Eingehend
socket.on (’onNoteUpdated’, Funktion (Daten) {
// Aktualisiere wenn die gleiche Notiz
if (data.id == $ scope.note.id) {

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

13. Verschieben einer Haftnotiz

Zu diesem Zeitpunkt haben wir im Grunde eine Runde um den CRUD Kiddie Pool gedreht und das Leben ist gut! Nur um einen Salon-Trick zu ermöglichen, der Ihre Freunde beeindruckt, werden wir die Möglichkeit hinzufügen, Notizen auf dem Bildschirm zu verschieben und Koordinaten in Echtzeit zu aktualisieren. Keine Panik - es sind nur noch ein paar Codezeilen. All diese harte Arbeit wird sich auszahlen. Ich verspreche!

Wir haben einen besonderen Gast, jQueryUI, zur Party eingeladen und alles für die Draggables getan. Wenn Sie die Möglichkeit hinzufügen, eine Notiz lokal zu ziehen, wird nur eine Codezeile benötigt. Wenn Sie hinzufügen element.draggable (); In Ihrer Linker-Funktion hören Sie "Eye of the Tiger" von Survivor, da Sie jetzt Ihre Notizen verschieben können.

Wir möchten wissen, wann das Ziehen aufgehört hat, und die neuen Koordinaten erfassen, die weitergegeben werden sollen. jQueryUI wurde von einigen sehr intelligenten Personen erstellt. Wenn das Ziehen stoppt, müssen Sie lediglich eine Rückruffunktion für das Stoppereignis definieren. Wir schnappen uns das note.id aus dem Bereichsobjekt und den linken und oberen CSS-Werten aus dem ui Objekt. Mit diesem Wissen machen wir das, was wir die ganze Zeit gemacht haben: emittieren!

app.directive (’stickyNote’, Funktion (Socket) {
var linker = Funktion (Bereich, Element, Attribute) {
element.draggable ({
stop: function (event, ui) {
socket.emit (’moveNote’, {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, Funktion (Daten) {
// Aktualisiere wenn die gleiche Notiz
if (data.id == scope.note.id) {
element.animate ({
links: data.x,
oben: data.y.
});
}
});
};
});

An dieser Stelle sollte es keine Überraschung sein, dass wir auch auf ein bewegungsbezogenes Ereignis vom Socket-Service warten. In diesem Fall ist es die onNoteMoved Ereignis und wenn die Notiz übereinstimmt, aktualisieren wir die linken und oberen CSS-Eigenschaften. Bam! Getan!

14. Der Bonus

Dies ist ein Bonusabschnitt, den ich nicht aufnehmen würde, wenn ich nicht absolut sicher wäre, dass Sie ihn in weniger als 10 Minuten erreichen könnten. Wir werden auf einem Live-Server bereitstellen (ich bin immer noch erstaunt, wie einfach dies ist).

Zunächst müssen Sie sich für eine kostenlose Nodejitsu-Testversion anmelden. Die Testversion ist 30 Tage lang kostenlos. Dies ist ideal, um Ihre Füße nass zu machen.

Nachdem Sie Ihr Konto erstellt haben, müssen Sie das Jitsu-Paket installieren, das Sie über die Befehlszeile über ausführen können $ npm installiere jitsu -g.

Dann müssen Sie sich über die Kommandozeile über anmelden $ jitsu login und geben Sie Ihre Anmeldeinformationen ein.

Stellen Sie sicher, dass Sie direkt in Ihrer App sind, geben Sie ein $ jitsu bereitstellen und gehen Sie die Fragen durch. Normalerweise überlasse ich so viel wie möglich der Standardeinstellung, was bedeutet, dass ich meiner Anwendung einen Namen, aber keine Subdomain usw. gebe.

Und, meine lieben Freunde, das ist alles, was dazu gehört! Sie erhalten die URL zu Ihrer Anwendung von der Ausgabe des Servers, sobald dieser bereitgestellt und betriebsbereit ist.

15. Schlussfolgerung

Wir haben in diesem Artikel viel über AngularJS berichtet, und ich hoffe, Sie hatten viel Spaß dabei. Ich denke, es ist wirklich toll, was Sie mit AngularJS und Socket.io in ungefähr 200 Codezeilen erreichen können.

Es gab einige Dinge, die ich nicht behandelt habe, um mich auf die Hauptpunkte zu konzentrieren, aber ich empfehle Ihnen, die Quelle herunterzuziehen und mit der Anwendung herumzuspielen. Wir haben ein starkes Fundament aufgebaut, aber es gibt noch viele Funktionen, die Sie hinzufügen können. Holen Sie sich Hacking!

Lukas Ruebbelke ist ein Technologie-Enthusiast und Co-Autor von AngularJS in Action for Manning Publications. Seine Lieblingsbeschäftigung ist es, die Menschen genauso für neue Technologien zu begeistern wie er. Er leitet die Phoenix Web Application User Group und hat mit seinen Partnerpartnern im Bereich Kriminalität mehrere Hackathons veranstaltet.

Mochte dies? Lese das!

• Wie erstelle ich eine App?
• Unsere bevorzugten Web-Schriftarten - und sie kosten keinen Cent
• Entdecken Sie, was als nächstes für Augmented Reality kommt
• Kostenlose Texturen herunterladen: hohe Auflösung und sofort einsatzbereit