Płyta współpracy AngularJS z Socket.io

Zawartość

• 01. Serwer
• 02. Nagie kości
• 03. Zadeklaruj swoje zależności
• 04. Połącz Socket.io
• 05. Uruchom silniki!
• 06. Kilka szczerych przemyśleń przed przejściem dalej
• 07. Klient
• 08. Nagie kości
• 09. Tworzenie karteczki
• 10. Wyświetlanie karteczek
• 11. usuwanie karteczek
• 12. Aktualizacja notatki
• 13. Przenoszenie karteczki
• 14. Bonus
• 15. Wniosek
• Lubiłem to? Przeczytaj to!

• Potrzebna wiedza: Średnio zaawansowany JavaScript
• Wymaga: Node.js, NPM
• Czas projektu: 2 godziny

AngularJS szczególnie dobrze nadaje się do tworzenia bogatych aplikacji klienckich w przeglądarce, a po dodaniu do zestawu niewielkiej ilości Socket.io sprawy stają się naprawdę interesujące. W tym artykule zamierzamy zbudować tablicę współpracy w czasie rzeczywistym, która używa AngularJS dla aplikacji po stronie klienta i Socket.io do współdzielenia stanu między wszystkimi podłączonymi klientami.

Zanim zaczniemy, omówmy trochę sprzątania. Zakładam, że masz podstawową wiedzę o HTML i JavaScript, ponieważ nie zamierzam omawiać każdego najmniejszego rogu kodu. Na przykład nie zamierzam wywoływać plików CSS i JavaScript, które umieściłem w nagłówku pliku HTML, ponieważ nie ma tam nowych informacji.

Zachęcam również do pobrania kodu z mojego konta GitHub i śledzenia go. Mój dobry przyjaciel Brian Ford ma również doskonałe ziarno Socket.io, na którym oparłem niektóre z moich oryginalnych pomysłów.

Cztery główne funkcje, które chcemy mieć na tablicy współpracy, to możliwość tworzenia notatki, czytania notatek, aktualizowania notatki, usuwania notatki i, dla zabawy, przenoszenie notatki na tablicę. Tak, zgadza się, skupiamy się na standardowych funkcjach CRUD. Uważam, że skupiając się na tych podstawowych cechach, omówimy wystarczająco dużo kodu, aby pojawiły się wzorce, dzięki czemu można je wziąć i zastosować w innym miejscu.

01. Serwer

Zaczniemy od serwera Node.js, ponieważ będzie on stanowił podstawę, na której będziemy budować wszystko inne.

Zamierzamy zbudować serwer Node.js z Express i Socket.io. Powodem, dla którego używamy Express jest to, że zapewnia niezły mechanizm konfigurowania statycznego serwera zasobów w Node.js. Express jest wyposażony w kilka naprawdę niesamowitych funkcji, ale w tym przypadku zamierzamy go użyć do czystego podzielenia aplikacji na pół między serwerem a klientem.

(Działam przy założeniu, że masz zainstalowany Node.js i NPM. Szybkie wyszukiwanie w Google pokaże Ci, jak je zainstalować, jeśli nie masz).

02. Nagie kości

Tak więc, aby zbudować podstawowe kości serwera, musimy zrobić kilka rzeczy, aby go uruchomić.

// app.js

// A.1
var express = require ('express'),
app = express ();
server = require („http”). createServer (aplikacja),
io = require ('socket.io'). Listen (serwer);

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

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

O.1 Deklarujemy i tworzymy instancje naszych modułów Node.js, abyśmy mogli ich używać w naszej aplikacji. Deklarujemy Express, tworzymy instancję Express, a następnie tworzymy serwer HTTP i wysyłamy do niego instancję Express. Stamtąd tworzymy instancję Socket.io i mówimy mu, aby miał oko na naszą instancję serwera.

A.2 Następnie mówimy naszej aplikacji Express, aby korzystała z naszego katalogu publicznego do obsługi plików.

A.3 Uruchamiamy serwer i mówimy mu, aby nasłuchiwał na porcie 1337.

Jak dotąd było to dość bezbolesne i szybkie. Wydaje mi się, że mamy mniej niż 10 wierszy w kodzie i mamy już działający serwer Node.js. Naprzód!

03. Zadeklaruj swoje zależności

// packages.json
{
"name": "angular-collab-board",
"description": "Tablica współpracy AngularJS",
"wersja": "0.0.1-1",
„private”: prawda,
"zależności": {
"ekspresowe": "3.x",
"socket.io": "0.9.x"
}
}

Jedną z najprzyjemniejszych funkcji NPM jest możliwość deklarowania zależności w pliku packages.json plik, a następnie automatycznie zainstaluj je za pośrednictwem npm install w wierszu poleceń.

04. Połącz Socket.io

Zdefiniowaliśmy już podstawowe funkcje, które chcemy mieć w aplikacji, dlatego musimy skonfigurować nasłuchiwania zdarzeń Socket.io i odpowiednie zamknięcie, aby obsłużyć zdarzenie dla każdej operacji.

W poniższym kodzie zauważysz, że jest to zasadniczo konfiguracja detektorów zdarzeń i wywołań zwrotnych. Pierwsze wydarzenie to połączenie wydarzenie, którego używamy do połączenia naszych innych wydarzeń w zamknięciu.

io.sockets.on ('połączenie', funkcja (gniazdo) {
socket.on (’createNote’, function (data) {
socket.broadcast.emit („onNoteCreated”, dane);
});

socket.on (’updateNote’, function (data) {
socket.broadcast.emit („onNoteUpdated”, data);
});

socket.on (’deleteNote’, function (data) {
socket.broadcast.emit („onNoteDeleted”, dane);
});

socket.on ('moveNote', function (data) {
socket.broadcast.emit („onNoteMoved”, dane);
});
});

Stąd dodajemy słuchaczy do createNote, aktualizacja Uwaga, deleteNote i moveNote. W funkcji wywołania zwrotnego po prostu transmitujemy zdarzenia, które się wydarzyły, aby każdy nasłuchujący klient mógł zostać powiadomiony o tym zdarzeniu.

Warto zwrócić uwagę na kilka rzeczy dotyczących funkcji wywołania zwrotnego w poszczególnych programach obsługi zdarzeń. Po pierwsze, jeśli chcesz wysłać wydarzenie do wszystkich innych osób oprócz klienta, który wyemitował wstawione przez Ciebie wydarzenie nadawanie zanim emitować wywołanie funkcji. Po drugie, po prostu przekazujemy zawartość wydarzenia zainteresowanym stronom, aby mogły je przetworzyć w odpowiedni sposób.

05. Uruchom silniki!

Teraz, gdy zdefiniowaliśmy nasze zależności i skonfigurowaliśmy naszą aplikację Node.js z uprawnieniami Express i Socket.io, zainicjowanie serwera Node.js jest całkiem proste.

Najpierw zainstaluj zależności Node.js w następujący sposób:

npm install

A potem uruchamiasz serwer w ten sposób:

node app.js

I wtedy! Idziesz pod ten adres w swojej przeglądarce. Bam!

06. Kilka szczerych przemyśleń przed przejściem dalej

Jestem przede wszystkim programistą frontendowym i początkowo byłem trochę onieśmielony podłączaniem serwera Node.js. do mojej aplikacji. Część AngularJS była szybka, ale JavaScript po stronie serwera? Ustaw w kolejce przerażającą muzykę z horroru.

Ale byłem absolutnie zaskoczony, gdy odkryłem, że mogę skonfigurować statyczny serwer sieciowy w zaledwie kilku wierszach kodu, aw kilku innych używam Socket.io do obsługi wszystkich zdarzeń między przeglądarkami. I nadal był to tylko JavaScript! Ze względu na aktualność opisujemy tylko kilka funkcji, ale mam nadzieję, że pod koniec artykułu zobaczysz, że łatwo jest pływać - a głęboki koniec basenu nie jest taki straszny.

07. Klient

Teraz, gdy mamy już solidne podstawy z naszym serwerem, przejdźmy do mojej ulubionej części - klienta! Będziemy używać AngularJS, jQueryUI jako części do przeciągania i Twitter Bootstrap jako podstawy stylu.

08. Nagie kości

Jeśli chodzi o osobiste preferencje, kiedy uruchamiam nową aplikację AngularJS, lubię szybko zdefiniować absolutne minimum, które wiem, że będę potrzebować, aby rozpocząć, a następnie rozpocząć iterację tak szybko, jak to możliwe.

Każda aplikacja AngularJS musi być ładowana z co najmniej jednym obecnym kontrolerem, więc od tego zawsze zaczynam.

Aby automatycznie załadować aplikację, wystarczy ją dodać ng-app do węzła HTML, w którym ma działać aplikacja. W większości przypadków dodanie go do tagu HTML będzie całkowicie akceptowalne. Dodałem również atrybut do ng-app powiedzieć, że chcę użyć aplikacja moduł, który za chwilę zdefiniuję.

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

Wiem, że będę potrzebował co najmniej jednego kontrolera, więc zadzwonię do tego za pomocą ng-controller i przypisując mu właściwość MainCtrl.

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

Więc teraz jesteśmy na haku dla modułu o nazwie aplikacja i kontroler o nazwie MainCtrl. Przejdźmy dalej i stwórzmy je teraz.

Tworzenie modułu jest dość proste. Definiujesz to, dzwoniąc kątowy. moduł i nadanie mu nazwy. Na przyszłość, drugi parametr pustej tablicy to miejsce, w którym można wstrzyknąć podmoduły do ​​użycia w aplikacji. Jest to poza zakresem tego samouczka, ale jest przydatne, gdy Twoja aplikacja zaczyna rosnąć pod względem złożoności i potrzeb.

// public / js / collab.js
var app = angular.module ('aplikacja', []);

Zamierzamy zadeklarować kilka pustych symboli zastępczych w aplikacja moduł zaczynający się od MainCtrl poniżej.Wypełnimy je później, ale chciałem zilustrować podstawową strukturę od samego początku.

app.controller ('MainCtrl', function ($ scope) {});

Zamierzamy również opakować funkcjonalność Socket.io w plik gniazdo elektryczne service, abyśmy mogli hermetyzować ten obiekt i nie pozostawiać go w globalnej przestrzeni nazw.

app.factory ('gniazdo', funkcja ($ rootScope) {});

A skoro już o tym mowa, zamierzamy ogłosić dyrektywę o nazwie notatka których będziemy używać do hermetyzacji funkcji karteczek w programie.

app.directive (’stickyNote’, function (gniazdo) {});

Przyjrzyjmy się więc temu, co zrobiliśmy do tej pory. Uruchomiliśmy aplikację przy użyciu ng-app i zadeklarowaliśmy nasz kontroler aplikacji w kodzie HTML. Zdefiniowaliśmy również moduł aplikacji i stworzyliśmy MainCtrl kontroler, plik gniazdo elektryczne usługi i notatka dyrektywa.

09. Tworzenie karteczki

Teraz, gdy mamy już szkielet aplikacji AngularJS, zaczniemy tworzyć funkcję tworzenia.

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

// Przychodzący
socket.on („onNoteCreated”, function (data) {// B.3
$ scope.notes.push (dane);
});

// Towarzyski
$ scope.createNote = function () {// B.4
var note = {
id: nowa data (). getTime (),
tytuł: „Nowa uwaga”,
body: „Oczekujące”
};

$ scope.notes.push (uwaga);
socket.emit ('createNote', uwaga);
};

B.1 AngularJS ma wbudowaną funkcję wstrzykiwania zależności, więc wprowadzamy plik $ scope obiekt i gniazdo elektryczne usługa. Plik $ scope obiekt służy jako ViewModel i jest w zasadzie obiektem JavaScript z pewnymi zdarzeniami wypalonymi w nim, aby umożliwić dwukierunkowe wiązanie danych.

B.2 Deklarujemy tablicę, w której będziemy używać do powiązania widoku.

B.3 Dodajemy odbiornik dla onNoteCreated wydarzenie na gniazdo elektryczne service i wypychanie ładunku zdarzenia do $ scope.notes szyk.

B.4 Zadeklarowaliśmy createNote metoda, która tworzy domyślny plik Uwaga obiekt i wpycha go do $ scope.notes szyk. Używa również gniazdo elektryczne usługa do emitowania createNote zdarzenie i przekazać nowa notatka obiekt wzdłuż.

Skoro mamy już metodę tworzenia notatki, jak ją nazwać? To jest dobre pytanie! W pliku HTML dodajemy wbudowaną dyrektywę AngularJS ng-click do przycisku, a następnie dodaj plik createNote wywołanie metody jako wartość atrybutu.

button id = "createButton" ng-click = "createNote ()"> Utwórz notatkę / przycisk>

Czas na szybki przegląd tego, co zrobiliśmy do tej pory. Dodaliśmy tablicę do $ scope obiekt w MainCtrl to będzie zawierać wszystkie notatki dotyczące aplikacji. Dodaliśmy również plik createNote metoda na $ scope obiekt, aby utworzyć nową lokalną notatkę, a następnie rozgłaszać tę notatkę do innych klientów za pośrednictwem gniazdo elektryczne usługa. Dodaliśmy też odbiornik wydarzeń w gniazdo elektryczne service, abyśmy mogli wiedzieć, kiedy inni klienci utworzyli notatkę, abyśmy mogli dodać ją do naszej kolekcji.

10. Wyświetlanie karteczek

Mamy teraz możliwość tworzenia obiektu notatki i udostępniania go między przeglądarkami, ale jak właściwie go wyświetlić? Tu właśnie pojawiają się dyrektywy.

Dyrektywy i ich zawiłości to obszerny temat, ale w krótkiej wersji są one sposobem na rozszerzenie elementów i atrybutów o niestandardową funkcjonalność. Dyrektywy są z łatwością moją ulubioną częścią AngularJS, ponieważ zasadniczo pozwalają one na stworzenie całego DSL (Domain Specific Language) wokół twojej aplikacji w HTML.

To naturalne, że skoro zamierzamy tworzyć notatki do naszej tablicy współpracy, powinniśmy utworzyć plik notatka dyrektywa. Dyrektywy są definiowane przez wywołanie metody dyrektywy w module, w którym chcesz ją zadeklarować, i przekazanie nazwy i funkcji, które zwracają obiekt definicji dyrektywy. Obiekt definicji dyrektywy ma wiele możliwych właściwości, które można w nim zdefiniować, ale w tym miejscu użyjemy tylko kilku do naszych celów.

Zalecam zapoznanie się z dokumentacją AngularJS, aby zobaczyć całą listę właściwości, które można zdefiniować w obiekcie definicji dyrektywy.

app.directive (’stickyNote’, function (gniazdo) {
var linker = funkcja (zakres, element, atrybuty) {};

var controller = function ($ scope) {};

powrót {
ogranicz: „A”, // C.1
link: linker, // C.2
kontroler: kontroler, // C.3
zakres: {// C.4
uwaga: „=”,
ondelete: „&”
}
};
});

C.1 Możesz ograniczyć swoją dyrektywę do określonego typu elementu HTML. Dwa najbardziej powszechne to element lub atrybut, które deklarujesz używając mi i ZA odpowiednio. Możesz również ograniczyć to do klasy CSS lub komentarza, ale nie są one tak powszechne.

C.2 Funkcja link to miejsce, w którym umieszczasz cały swój kod manipulacji DOM. Jest kilka wyjątków, które znalazłem, ale jest to zawsze prawda (przynajmniej w 99% przypadków). Jest to podstawowa zasada AngularJS i dlatego ją podkreśliłem.

C.3 Funkcja kontrolera działa tak jak główny kontroler, który zdefiniowaliśmy dla aplikacji, ale $ scope obiekt, który przekazujemy, jest specyficzny dla elementu DOM, którego dotyczy dyrektywa.

C.4 AngularJS ma koncepcję zakresu izolowanego, która pozwala jawnie zdefiniować, w jaki sposób zakres dyrektywy komunikuje się ze światem zewnętrznym. Gdybyśmy nie zadeklarowali zakresu, dyrektywa domyślnie odziedziczyłaby po zakresie nadrzędnym z relacją rodzic-dziecko. W wielu przypadkach nie jest to optymalne. Wyodrębniając zakres, zmniejszamy szanse, że świat zewnętrzny może nieumyślnie i niekorzystnie wpłynąć na stan dyrektywy.

Zadeklarowałem dwukierunkowe wiązanie danych z Uwaga z = symbol i wyrażenie powiązane z ondelete z & symbol. Przeczytaj dokumentację AngularJS, aby uzyskać pełne wyjaśnienie izolowanego zakresu, ponieważ jest to jeden z bardziej skomplikowanych tematów we frameworku.

Więc właściwie dodajmy karteczkę do DOM.

Jak każdy dobry framework, AngularJS ma kilka naprawdę świetnych funkcji zaraz po wyjęciu z pudełka. Jedną z najbardziej przydatnych funkcji jest ng-repeat. Ta dyrektywa AngularJS umożliwia przekazanie tablicy obiektów i powiela dowolny znacznik, na którym się znajduje, tyle razy, ile jest elementów w tablicy. W poniższym przypadku iterujemy po notatki tablica i powielanie div element i jego elementy podrzędne na długość notatki szyk.

div sticky-note ng-repeat = "notatka w notatkach" note = "uwaga" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (uwaga)"
> {{note.body}} / textarea>
/ div>

Piękno ng-repeat polega na tym, że jest on powiązany z dowolną przekazaną tablicą, a po dodaniu elementu do tablicy element DOM zostanie automatycznie zaktualizowany. Możesz pójść o krok dalej i powtórzyć nie tylko standardowe elementy DOM, ale także inne niestandardowe dyrektywy. Dlatego widzisz notatka jako atrybut elementu.

Istnieją jeszcze dwa fragmenty kodu niestandardowego, które należy wyjaśnić. Wyodrębniliśmy zakres na kartki samoprzylepne dyrektywy w sprawie dwóch właściwości. Pierwszym z nich jest powiązanie zdefiniowane w izolowanym zakresie w Uwaga własność. Oznacza to, że za każdym razem, gdy obiekt notatki zmieni się w zakresie nadrzędnym, automatycznie zaktualizuje odpowiedni obiekt notatki w dyrektywie i odwrotnie. Drugi zdefiniowany zakres izolowany znajduje się na ondelete atrybut. Oznacza to, że kiedy ondelete jest wywoływana w dyrektywie, wywoła każde wyrażenie w ondelete atrybut w elemencie DOM, który tworzy instancję dyrektywy.

Kiedy tworzona jest instancja dyrektywy, jest ona dodawana do DOM i wywoływana jest funkcja link. Jest to doskonała okazja do ustawienia domyślnych właściwości DOM na elemencie. Parametr elementu, który przekazujemy, jest w rzeczywistości obiektem jQuery, więc możemy na nim wykonywać operacje jQuery.

(AngularJS faktycznie zawiera wbudowany podzbiór jQuery, ale jeśli już włączyłeś pełną wersję jQuery, AngularJS odłoży się na to.)

app.directive (’stickyNote’, function (gniazdo) {
var linker = function (scope, element, attrs) {
// Trochę inicjacji DOM, żeby było fajnie
element.css ('left', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

W powyższym kodzie po prostu umieszczamy karteczkę na scenie i wprowadzamy ją.

11. usuwanie karteczek

Teraz, gdy możemy dodać i wyświetlić karteczkę, nadszedł czas, aby usunąć karteczki. Tworzenie i usuwanie karteczek samoprzylepnych polega na dodawaniu i usuwaniu elementów z tablicy, do której są przypisane notatki. Jest to odpowiedzialność zakresu nadrzędnego za utrzymanie tej tablicy, dlatego tworzymy żądanie usunięcia z wnętrza dyrektywy, ale pozwalamy zakresowi nadrzędnemu wykonać rzeczywiste podnoszenie ciężarów.

Z tego powodu przeszliśmy przez cały problem z utworzeniem wyrażenia zdefiniowanego w izolowanym zakresie w dyrektywie: aby dyrektywa mogła wewnętrznie odbierać zdarzenie delete i przekazywać je swojemu rodzicowi do przetworzenia.

Zwróć uwagę na kod HTML wewnątrz dyrektywy.

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

Następna rzecz, którą powiem, może wydawać się odległa, ale pamiętaj, że jesteśmy po tej samej stronie i będzie to miało sens, gdy to wyjaśnię. Po kliknięciu przycisku w prawym górnym rogu karteczki, dzwonimy deleteNote na kontrolerze dyrektywy i przekazując plik note.id wartość. Następnie kontroler wywołuje ondelete, który następnie wykonuje dowolne wyrażenie, które do niego podłączyliśmy. Jak na razie dobrze? Wywołujemy lokalną metodę na kontrolerze, która następnie przekazuje ją, wywołując dowolne wyrażenie zdefiniowane w izolowanym zakresie. Tak się składa, że ​​jest wywoływane wyrażenie, które jest wywoływane przez rodzica deleteNote także.

app.directive (’stickyNote’, function (gniazdo) {
var controller = function ($ scope) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
Zrobiłem
});
};
};

powrót {
ograniczenie: „A”,
link: linker,
kontroler: kontroler,
zakres: {
uwaga: „=”,
ondelete: „&”
}
};
});

(W przypadku korzystania z zakresu izolowanego zdefiniowanego przez wyrażenie parametry są wysyłane w mapie obiektów).

W zakresie nadrzędnym deleteNote zostaje wywołany i wykonuje dość standardowe usuwanie przy użyciu rozszerzenia kątowy. forEach funkcja narzędziowa do iteracji po tablicy notatek. Gdy funkcja obsłuży swoją lokalną działalność, emituje wydarzenie dla reszty świata, aby odpowiednio zareagowała.

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

// Przychodzący
socket.on („onNoteDeleted”, function (data) {
$ scope.deleteNote (data.id);
});

// Towarzyski
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];

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

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

12. Aktualizacja notatki

Robimy fantastyczne postępy! Mam nadzieję, że teraz zaczynacie dostrzegać pewne wzorce wyłaniające się z tej burzliwej trasy, którą wybieramy. Następną pozycją na liście jest funkcja aktualizacji.

Zaczniemy od rzeczywistych elementów DOM, a następnie przejdziemy przez całą drogę do serwera i z powrotem do klienta. Najpierw musimy wiedzieć, kiedy zmienia się tytuł lub treść karteczki. AngularJS traktuje elementy formularza jako część modelu danych, dzięki czemu można błyskawicznie podłączyć dwukierunkowe powiązanie danych. Aby to zrobić, użyj ng-model dyrektywy i wstaw właściwość, z którą chcesz się powiązać. W tym przypadku użyjemy note.title i note.body odpowiednio.

Gdy któraś z tych właściwości ulegnie zmianie, chcemy przechwycić te informacje i przekazać dalej. Osiągamy to za pomocą ng-change dyrektywy i użyj jej do wywołania aktualizacja Uwaga i przekaż sam obiekt notatki. AngularJS wykonuje bardzo sprytne, brudne testy, aby wykryć, czy wartość tego, co jest w środku ng-model zmienił się, a następnie wykonuje wyrażenie, które jest w programie ng-change.

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

Zalety korzystania ng-change polega na tym, że lokalna transformacja już się dokonała, a my jesteśmy po prostu odpowiedzialni za przekazanie wiadomości. W kontrolerze aktualizacja Uwaga nazywa się i stamtąd będziemy emitować aktualizacja Uwaga wydarzenie, aby nasz serwer mógł transmitować je innym klientom.

app.directive (’stickyNote’, function (gniazdo) {
var controller = function ($ scope) {
$ scope.updateNote = function (uwaga) {
socket.emit ('updateNote', uwaga);
};
};
});

W kontrolerze dyrektywy nasłuchujemy pliku onNoteUpdated zdarzenie, aby wiedzieć, kiedy została zaktualizowana notatka od innego klienta, abyśmy mogli zaktualizować naszą lokalną wersję.

var controller = function ($ scope) {
// Przychodzący
socket.on („onNoteUpdated”, function (data) {
// Zaktualizuj, jeśli ta sama uwaga
if (data.id == $ scope.note.id) {

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

13. Przenoszenie karteczki

W tym momencie w zasadzie zrobiliśmy okrążenie wokół basenu dla dzieci CRUD i życie jest dobre! Aby zaimponować znajomym, dodamy możliwość przesuwania notatek po ekranie i aktualizowania współrzędnych w czasie rzeczywistym. Nie panikuj - to tylko kilka dodatkowych wierszy kodu. Cała ta ciężka praca się opłaci. Obiecuję!

Zaprosiliśmy gościa specjalnego, jQueryUI, na imprezę i zrobiliśmy to wszystko dla draggables. Dodanie możliwości lokalnego przeciągania notatki zajmuje tylko jedną linię kodu. Jeśli dodasz element.draggable (); do funkcji łącznika zaczniesz słyszeć „Eye of the Tiger” autorstwa Survivor, ponieważ możesz teraz przeciągać swoje notatki.

Chcemy wiedzieć, kiedy przeciąganie się zatrzymało i uchwycić nowe współrzędne do przejścia. jQueryUI zostało zbudowane przez bardzo sprytnych ludzi, więc kiedy przeciąganie się zatrzyma, wystarczy zdefiniować funkcję wywołania zwrotnego dla zdarzenia stop. Chwytamy note.id poza zasięgiem obiektu oraz lewe i górne wartości CSS z pliku ui obiekt. Mając tę ​​wiedzę, robimy to, co robiliśmy przez cały czas: emitować!

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

socket.on („onNoteMoved”, function (data) {
// Zaktualizuj, jeśli ta sama uwaga
if (data.id == scope.note.id) {
element.animate ({
po lewej: data.x,
góra: data.y
});
}
});
};
});

W tym momencie nie powinno dziwić, że nasłuchujemy również zdarzenia związanego z przenoszeniem z usługi gniazda. W tym przypadku jest to plik onNoteMoved zdarzenie i jeśli notatka jest zgodna, aktualizujemy lewe i górne właściwości CSS. Bam! Gotowy!

14. Bonus

To jest sekcja bonusowa, której nie uwzględniłbym, gdybym nie był absolutnie pewien, że możesz to osiągnąć w mniej niż 10 minut. Zamierzamy wdrożyć na działającym serwerze (nadal jestem zdumiony, jak łatwo to zrobić).

Najpierw musisz zarejestrować się, aby uzyskać bezpłatną wersję próbną Nodejitsu. Wersja próbna jest bezpłatna przez 30 dni, co jest idealnym rozwiązaniem, jeśli chodzi o zmoczenie stóp.

Po utworzeniu konta musisz zainstalować pakiet jitsu, co możesz zrobić z wiersza poleceń za pośrednictwem $ npm zainstaluj jitsu -g.

Następnie musisz zalogować się z wiersza poleceń za pośrednictwem Zaloguj się do $ jitsu i wprowadź swoje poświadczenia.

Upewnij się, że jesteś bezpośrednio w aplikacji, wpisz Wdrożenie $ jitsu i przejrzyj pytania. Zwykle zostawiam jak najwięcej domyślnych, co oznacza, że ​​nadaję mojej aplikacji nazwę, ale nie subdomenę itp.

I, moi drodzy przyjaciele, to wszystko! Otrzymasz adres URL do swojej aplikacji z danych wyjściowych serwera, gdy zostanie ona wdrożona i będzie gotowa do pracy.

15. Wniosek

W tym artykule omówiliśmy wiele zagadnień związanych z AngularJS i mam nadzieję, że dobrze się przy tym bawiliście. Myślę, że to naprawdę fajne, co można osiągnąć za pomocą AngularJS i Socket.io w około 200 wierszach kodu.

Było kilka rzeczy, których nie omówiłem, aby skupić się na głównych punktach, ale zachęcam do ściągnięcia źródła i zabawy z aplikacją. Zbudowaliśmy solidne podstawy, ale wciąż jest wiele funkcji, które możesz dodać. Hakuj!

Lukas Ruebbelke jest entuzjastą technologii i jest współautorem AngularJS in Action dla Manning Publications. Jego ulubioną rzeczą jest wzbudzanie w ludziach takiego samego zainteresowania nową technologią, jak on. Prowadzi grupę użytkowników aplikacji internetowych Phoenix i był gospodarzem wielu hackathonów ze swoimi kolegami zajmującymi się przestępczością.

Lubiłem to? Przeczytaj to!

• Jak stworzyć aplikację
• Nasze ulubione czcionki internetowe - i nie kosztują ani grosza
• Dowiedz się, co dalej z rzeczywistością rozszerzoną
• Pobierz darmowe tekstury: w wysokiej rozdzielczości i gotowe do użycia już teraz