AngularJS Collaboratiouns Board mat Socket.io

Inhalt

• 01. De Server
• 02. Déi blo Schanken
• 03. Erkläert Är Ofhängegkeeten
• 04. Drot Socket.io un
• 05. Start Är Motore!
• 06. E puer candid Gedanken ier Dir weidergeet
• 07. De Client
• 08. Déi blo Schanken
• 09. Schafen eng Pechpabeier
• 10. Affiche vun de Pechpabeier
• 11. Läschen eng Pechpabeier
• 12. Update vun enger Pechpabeier
• 13. Plënner eng Pechpabeier
• 14. De Bonus
• 15. Konklusioun
• Liked dëst? Liest dës!

• Wëssen néideg: Mëttelméisseg JavaScript
• Verlaangt: Node.js, NPM
• Projet Zäit: 2 Stonnen

AngularJS ass besonnesch gutt geegent fir räich Clientseiten Uwendungen am Browser ze kreéieren an, wann Dir e klenge Socket.io an de Mix füügt, gëtt et wierklech interessant. An dësem Artikel wäerte mir en Echtzäit Collaboratiouns Board bauen deen AngularJS fir d'Client-Säit Uwendung a Socket.io benotzt fir de Staat tëscht all verbonne Clienten ze deelen.

Loosst eis e bëssen Haushalter ofdecken ier mer ufänken. Ech wäert viraussoen datt Dir e fundamentale Grëff vu HTML a JavaScript hutt well ech net all klengen Eck vum Code ofdecken. Zum Beispill wäert ech d'CSS an d'Javascript Dateien net ruffen, déi ech am Kapp vun der HTML Datei abegraff hunn, well et keng nei Informatioun do ass.

Och encouragéieren ech Iech de Code vu mengem GitHub Kont ze gräifen fir matzemaachen. Mäi gudde Frënd Brian Ford huet och en exzellenten Socket.io Som, op deem ech e puer vun mengen originellen Iddien baséieren.

Déi véier Haaptfeatures déi mir an der Zesummenaarbechtskaart wëlle sinn ass d'Fäegkeet eng Notiz ze kreéieren, d'Noten ze liesen, eng Notiz ze aktualiséieren, eng Notiz ze läschen an, fir Spaass, eng Notiz op de Board ze réckelen. Jo, dat ass richteg, mir konzentréiere sech op Standard CRUD Funktiounen. Ech gleewen datt andeems mir op dës fundamental Feature fokusséieren, wäerte mir genuch Code fir Muster ofdecken fir erauszekommen, sou datt Dir se ka mathuelen an se anzwuesch anescht uwenden.

01. De Server

Mir fänken als éischt mam Node.js Server un, well e wäert als Fondatioun déngen, op där mir alles anescht bauen.

Mir bauen en Node.js Server mat Express a Socket.io. De Grond firwat mir Express benotzen ass datt et e flotte Mechanismus gëtt fir e stateschen Assetserver bannent Node.js. Express kënnt mat enger Rëtsch wierklech fantastesche Featuren awer, an dësem Fall wäerte mir et benotzen fir d'Applikatioun propper tëscht dem Server an dem Client ze schneiden.

(Ech funktionnéieren ënner der Virgab datt Dir Node.js an NPM installéiert hutt. Eng séier Google Sich weist Iech wéi Dir dës installéiert kritt wann Dir net.)

02. Déi blo Schanken

Also fir déi blo Schanken vum Server ze bauen, musse mir e puer Saache maache fir opzemaachen.

// app.js

// A.1
var express = erfuerderen ('express'),
App = Express ();
Server = erfuerderen ('http'). createServer (App),
io = erfuerderen ('socket.io'). lauschteren (Server);

// A.2
app.configure (Funktioun () {
app.use (express.static (__ dirname + ’/ ëffentlech’));
});

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

A.1 Mir deklaréieren an instantiéieren eis Node.js Moduler sou datt mir se an eiser Uwendung benotze kënnen. Mir deklaréieren Express, Instantéiere Express an da schafen en HTTP Server a schécken an der Express Instanz dran. A vun do un instantiéiere mir Socket.io a soen et fir eis Serverinstanz am A ze behalen.

A.2 Mir soen dann eis Express App fir eis ëffentlech Verzeechnes ze benotze fir Dateien ze servéieren.

A.3 Mir starten de Server a soen datt hien am Hafen héiert 1337.

Bis elo war dat zimlech schmerzlos a séier. Ech gleewen datt mir manner wéi 10 Zeilen an de Code sinn a scho hu mir e funktionellen Node.js Server. Weider!

03. Erkläert Är Ofhängegkeeten

// Packages.json
{
"name": "Wénkel-Collab-Board",
"Beschreiwung": "AngularJS Collaboration Board",
"Versioun": "0.0.1-1",
"privat": richteg,
"Ofhängegkeeten": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Ee vun de schéinsten Features vun NPM ass d'Fäegkeet Är Ofhängegkeeten an engem ze deklaréieren Packages.json Datei an installéiert se dann automatesch iwwer npm installéieren op der Kommandozeil.

04. Drot Socket.io un

Mir hunn d'Kärfunktiounen definéiert déi mir an der Applikatioun wëlle maachen an dofir musse mir Socket.io Event Lauschterer opbauen an eng entspriechend Zoumaache fir den Event fir all Operatioun ze behandelen.

Am Code hei ënnen fannt Dir datt et wesentlech eng Konfiguratioun vun Event Listener a Callbacks ass. Dat éischt Event ass den Verbindung Event, wat mir benotze fir eis aner Eventer an der Fermeture ze verdrängen.

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

socket.on ('updateNote', Funktioun (Daten) {
socket.broadcast.emit ('onNoteUpdated', Daten);
});

socket.on ('deleteNote', Funktioun (Daten) {
socket.broadcast.emit ('onNoteDeleted', Daten);
});

socket.on ('moveNote', Funktioun (Daten) {
socket.broadcast.emit ('onNoteMoved', Daten);
});
});

Vun hei addéiere mir Nolauschterer un createNote, updateNote, deleteNote an moveNote. An an der Callback Funktioun senden mir einfach aus wat Event geschitt ass, sou datt all Client lauschtere kann informéiert ginn datt d'Evenement geschitt ass.

Et ginn e puer Saachen, déi et wäert sinn ze weisen iwwer d'Callback Funktiounen an den eenzelnen Event Handlers. Ee, wann Dir en Event un all aner schécke wëllt awer de Client deen d'Evenement emittéiert hutt dat Dir agefouert hutt Sendung virun der emittéieren Funktioun Opruff. Zweetens gi mir einfach d'Notzlaascht vun der Manifestatioun un déi interesséiert Parteie weiderginn, fir datt se et kënne verschaffen, wéi se fit gesinn.

05. Start Är Motore!

Elo datt mir eis Ofhängegkeeten definéiert hunn an eis Node.js Uwendung mat Express- a Socket.io Kräften opgestallt hunn, ass et ganz einfach den Node.js Server ze initialiséieren.

Als éischt installéiert Dir Är Node.js Ofhängegkeeten esou:

npm installéieren

An da start de Server sou:

Node app.js

An dann! Dir gitt op dës Adress an Ärem Browser. Bam!

06. E puer candid Gedanken ier Dir weidergeet

Ech sinn haaptsächlech e Frontend Entwéckler an ech war am Ufank e bëssen ageschüchtert mat engem Node.js Server u meng Uwendung ze verbannen. Den AngularJS Deel war e Snap awer Server Säit JavaScript? Schlaang déi grujeleg Musek vun engem Horror-Flick.

Awer, ech war absolut Buedem fir ze entdecken datt ech e statesche Webserver a just e puer Zeilen Code opbauen an an e puer méi Zeilen Socket.io benotze fir all d'Evenementer tëscht de Browser ze handhaben. An et war nach just JavaScript! Fir d'Wichtegkeet vun der Aktualitéit decken mir nëmmen e puer Features, awer ech hoffen datt et um Enn vum Artikel Dir gesitt datt et einfach ass ze schwammen - an déi déif Enn vum Pool ass net sou Angscht.

07. De Client

Elo datt mir eis zolidd Fondatioun mat eisem Server hunn, loosst eis op mäi Liiblingsdeel goen - de Client! Mir benotze AngularJS, jQueryUI fir den draggabelen Deel an Twitter Bootstrap fir eng Stilbasis.

08. Déi blo Schanken

Wéi eng perséinlech Präferenz, wann ech eng nei AngularJS Uwendung starten, wëll ech séier de minimale Minimum definéieren, deen ech weess datt ech brauch fir unzefänken an da sou séier wéi méiglech doriwwer ze iteréieren.

All AngularJS Uwendung muss mat mindestens engem Controller präsent bootstrapped ginn an dofir ass dat normalerweis wou ech ëmmer ufänken.

Fir automatesch d'Applikatioun ze booten, musst Dir einfach bäifügen ng-App op den HTML Knuet an deem Dir wëllt datt d'Applikatioun lieft. Gréissten Deel vun der Zäit gëtt et dem HTML Tag bäigefüügt perfekt akzeptabel. Ech hunn och en Attribut derbäigesat ng-App et ze soen datt ech de benotze wëll App Modul, deen ech just an engem Moment definéieren.

// ëffentlech / index.html
html ng-app = "app">

Ech weess datt ech op d'mannst ee Controller brauch an dofir ruffen ech dat aus mat ng-Controller an et engem Verméigen zouzeginn vun MainCtrl.

Kierper ng-Controller = "MainCtrl"> / Kierper>

Also elo si mir um Hook fir e Modul mam Numm App an e Controller genannt MainCtrl. Loosst eis virgoen a se elo erstellen.

E Modul erstellen ass zimlech einfach. Dir definéiert et andeems Dir urufft eckeg.modul an et en Numm ginn. Fir zukünfteg Referenz ass deen zweete Parameter vun engem eidelen Array wou Dir Ënnermodule ka injizéieren fir se an der Applikatioun ze benotzen. Et ass ausserhalb vun dësem Tutorial, awer ass praktesch wann Är Uwendung a Komplexitéit a Bedierfnesser wiisst.

// ëffentlech / js / collab.js
var app = angular.module (’app’, []);

Mir deklaréieren e puer eidel Plazhaler an der App Modul ugefaange mat der MainCtrl drënner.Mir fëllen dës all méi spéit awer ech wollt d'Basisstruktur vum Ufank un illustréieren.

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

Mir ginn och d'Socket.io Funktionalitéit an eng Socket Service fir datt mir dësen Objet kapsele kënnen an net am globalen Nummraum schwamme loossen.

app.factory ('Socket', Funktioun ($ rootScope) {});

A wa mir drun sinn, wäerte mir eng Direktiv als deklaréieren Pechpabeier datt mir de Pechpabeier Funktionalitéit anzekapselen an.

app.directive ('stickyNote', Funktioun (Socket) {});

Also loosst eis iwwerpréiwen wat mir bis elo gemaach hunn. Mir hunn d'Applikatioun bootstrapped mat ng-App an eisen Uwendungscontroller an der HTML deklaréiert. Mir hunn och den Uwendungsmodul definéiert an den MainCtrl Kontroller, der Socket Service an den Pechpabeier Direktiv.

09. Schafen eng Pechpabeier

Elo wou mir de Skelett vun der AngularJS Uwendung op der Plaz hunn, fänke mir d'Schafung Feature aus.

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

// erakommen
socket.on ('onNoteCreated', Funktioun (Daten) {// B.3
$ scope.notes.push (Daten);
});

// Sortie
$ scope.createNote = Funktioun () {// B.4
var Note = {
id: neien Datum (). getTime (),
Titel: 'Nei Notiz',
Kierper: 'Pending'
};

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

B.1 AngularJS huet eng Ofhängegkeetsinjektiounsfeature agebaut, sou datt mir e sprëtzen $ Ëmfang Objet an den Socket Service. Den $ Ëmfang Objet déngt als ViewModel an ass am Fong e JavaScript Objet mat e puer Eventer, déi dran gebak sinn, fir Zwee-Wee-Datebinding z'aktivéieren.

B.2 Mir deklaréieren den Array an deem mir d'Benotzung benotze fir ze verbannen.

B.3 Mir addéieren en Nolauschterer fir de onNoteCreated Event op der Socket Service an dréckt d'Evenementer Notzlaascht an de $ scope.notes Array.

B.4 Mir hunn deklaréiert a createNote Method déi e Standard erstellt Notiz Objet an dréckt en an den $ scope.notes Array. Et benotzt och den Socket Service ze emittéieren den createNote Event a passéiert de nei Notiz Objet laanscht.

Also elo, datt mir eng Method hunn fir d'Note ze kreéieren, wéi nenne mir et? Dat ass eng gutt Fro! An der HTML Datei füügt mir déi agebaute AngularJS Direktiv bäi ng-klickt op de Knäppchen a füügt dann de createNote Method Uruff als Attributwäert.

Knäppchen id = "createButton" ng-klickt = "createNote ()"> Erstelle Notiz / Knäppchen>

Zäit fir eng séier Iwwerpréiwung vu wat mir bis elo gemaach hunn. Mir hunn en Array derbäigesat $ Ëmfang Objet an der MainCtrl dat wäert all d'Noten fir d'Applikatioun halen. Mir hunn och bäigefüügt a createNote Method op der $ Ëmfang Objet fir eng nei lokal Notiz ze kreéieren an dann dës Notiz un déi aner Clienten iwwer de Socket Service. Mir hunn och en Event Lauschterer derbäi gesat Socket Service fir datt mir kënne wëssen wann aner Clienten eng Notiz erstallt hunn, sou datt mir se an eis Sammlung bäifüüge kënnen.

10. Affiche vun de Pechpabeier

Mir hunn elo d'Fäegkeet en Notizobjekt ze kreéieren an ze deelen tëscht Browser awer wéi weisen mir et tatsächlech un? Dëst ass wou Direktiven erakommen.

Direktiven an hir Komplikatioune sinn e grousst Thema, awer déi kuerz Versioun ass datt se e Wee bidden Elementer an Attributer mat personaliséierter Funktionalitéit ze verlängeren. Direktiven sinn einfach mäi Liiblingsdeel iwwer AngularJS well et Iech erlaabt eng wesentlech eng ganz DSL (Domain Spezifesch Sprooch) ronderëm Är Uwendung an HTML ze kreéieren.

Et ass natierlech, datt well mir Pechpabeier fir eise Collaboratiouns Board schafen, datt mir e schafen Pechpabeier Direktiv. Direktiven ginn definéiert andeems Dir d'Directive Method op e Modul nennt, deen Dir wëllt deklaréieren an en Numm an eng Funktioun weiderginn, déi en Direktiv Definitiounsobjet zréckginn. Den Direktiv Definitiouns Objet huet vill méiglech Eegeschaften déi Dir drop definéiere kënnt, awer mir benotze just e puer fir eis Zwecker hei.

Ech recommandéieren datt Dir d'AngularJS Dokumentatioun kuckt fir déi ganz Lëschte vun Eegeschaften ze gesinn déi Dir op der Direktiv Definitioun Objet definéiere kënnt.

app.directive ('stickyNote', Funktioun (Socket) {
var linker = Funktioun (Ëmfang, Element, attrs) {};

var Controller = Funktioun ($ scope) {};

zréck {
beschränken: 'A', // C.1
Link: Linker, // C.2
Controller: Controller, // C.3
Ëmfang: {// C.4
note: ’=’,
ondelete: '&'
}
};
});

C.1 Dir kënnt Är Direktiv op e bestëmmten Typ vun HTML Element beschränken. Déi zwee meescht üblech sinn Element oder Attribut, wat Dir deklaréiert mat der Benotzung E an A respektiv. Dir kënnt et och op eng CSS Klass oder e Kommentar beschränken, awer dës sinn net sou heefeg.

C.2 D'Linkfunktioun ass wou Dir all Ären DOM Manipulatiounscode setzt. Et ginn e puer Ausnahmen déi ech fonnt hunn, awer dat ass ëmmer richteg (op d'mannst 99 Prozent vun der Zäit). Dëst ass eng fundamental Grondregel vun AngularJS an dofir hunn ech et betount.

C.3 D'Controller Funktioun funktionnéiert genau wéi den Haaptcontroller dee mir fir d'Applikatioun definéiert hunn awer de $ Ëmfang Objet wou mir weiderginn ass spezifesch fir den DOM Element deen d'Direktiv lieft.

C.4 AngularJS huet e Konzept vun isoléierter Ëmfang, wat Iech erlaabt explizit ze definéieren wéi en Direktiven Ëmfang mat der Äussewelt kommunizéiert. Wa mir keen Ëmfang deklaréiert hätten, wier d'Direktiv implizit vum Eltereverfang mat enger Elter-Kand Bezéiung geierft. A ville Fäll ass dëst net optimal. Andeems mir den Ëmfang isoléieren, reduzéieren mir d'Chancen datt d'Aussewelt ongewollt an negativ den Zoustand vun Ärer Direktiv beaflosse kann.

Ech hunn zwee-Manéier Daten-verbindlech deklaréiert Notiz mat der = Symbol an en Ausdrock bindend fir ondelete mat der & Symbol. Liest w.e.g. d'AngularJS Dokumentatioun fir eng voll Erklärung vum isoléierten Ëmfang well et ee vun de méi komplizéierte Sujeten am Kader ass.

Also loosst eis tatsächlech eng Pechpabeier der DOM bäifügen.

Wéi all gudde Kader kënnt AngularJS mat e puer super Featuren direkt aus der Këscht. Ee vun den handiest Featuren ass ng-widderhuelen. Dës AngularJS Direktiv erlaabt Iech an engem Array vun Objeten ze weiderginn an et duplizéiert wéi en Tag et ass sou oft wéi et Elementer am Array sinn. Am Fall hei drënner, iteréiere mir iwwer de Notizen Array an Duplikatioun vum div Element a seng Kanner fir d'Längt vun der Notizen Array.

div Sticky-Note ng-repeat = "Notiz an Notizen" Notiz = "Notiz" ondelete = "deleteNote (id)">
Knäpptyp = "Knäppchen" ng-klickt = "deleteNote (note.id)"> × / Knäppchen>
Input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

D 'Schéinheet vun ng-widderhuelen ass datt et un all Array gebonnen ass wou Dir weidergitt an, wann Dir en Element an d'Array bäisetzt, Äert DOM Element automatesch aktualiséiert. Dir kënnt dëst e Schrëtt weider maachen an net nëmmen Standard DOM Elementer awer och aner personaliséiert Direktiven widderhuelen. Dofir gesitt Dir Pechpabeier als Attribut um Element.

Et ginn zwou aner Bits vum personaliséierte Code déi musse gekläert ginn. Mir hunn den Ëmfang op der isoléiert Pechpabeier Direktiv op zwou Eegeschaften. Déi éischt ass déi verbindlech definéiert isoléiert Ëmfang op der Notiz Propriétéit. Dëst bedeit datt ëmmer wann den Notizobjekt am Elterendeel ännert, automatesch deen entspriechenden Notizobjekt an der Direktiv aktualiséiert gëtt a vice versa. Deen aneren definéierten isoléierten Ëmfang ass op der ondelete Attribut. Wat dat heescht ass datt wann ondelete an der Direktiv genannt gëtt, nennt et egal wéi en Ausdrock an der ass ondelete Attribut op dem DOM Element dat Direktiv direktiéiert.

Wann eng Direktiv instantiéiert gëtt, gëtt se an d'DOM bäigefüügt an d'Linkfunktioun genannt. Dëst ass eng perfekt Geleeënheet fir e puer Standard DOM Eegeschafte vum Element ze setzen. Den Elementparameter wou mir weiderginn ass tatsächlech en jQuery Objet a sou kënne mir jQuery Operatiounen dorop maachen.

(AngularJS kënnt tatsächlech mat engem Ënnersatz vu jQuery agebaut an awer wann Dir déi voll Versioun vu jQuery scho mat abegraff hutt, wäert AngularJS dorop verleeën.)

app.directive ('stickyNote', Funktioun (Socket) {
var linker = Funktioun (Ëmfang, Element, attrs) {
// E puer DOM Initiatioun fir et schéin ze maachen
element.css ('lénks', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

Am uewe genannte Code positionéiere mir déi Pechpabeier einfach op der Bühn a verbléien se eran.

11. Läschen eng Pechpabeier

Also elo datt mir eng Pechpabeier bäifüügen an uweise kënnen, ass et Zäit Pechpabeier ze läschen. D'Schafe an d'Läsche vu Pechnotizen ass eng Saach fir Elementer aus dem Array bäizefügen an ze läschen, un déi d'Noten gebonne sinn. Dëst ass d'Verantwortung vum Elteren Ëmfang fir dës Array z'erhalen, an dofir stame mir d'Läsch Ufro aus der Direktiv, awer loosst den Elterendeel den eigentleche schwéiere Lift maachen.

Duerfir hu mir all d'Probleemer gemaach fir en Ausdrock definéiert isoléiert Ëmfang op der Direktiv ze kreéieren: sou datt d'Direktiv d'Internet läschen kéint kréien an se un hiren Elterendeel weidergeleet fir ze verschaffen.

Notiz den HTML an der Direktiv.

Knäpptyp = "Knäppchen" ng-klickt = "deleteNote (note.id)"> × / Knäppchen>

Déi ganz nächst Saach, déi ech soen, kann e laange Wee schéngen awer erënnere mer datt mir op der selwechter Säit sinn an et wäert sënnvoll sinn nodeems ech ausgeschafft hunn. Wann de Knäppchen an der ieweschter rietser Eck vun der Pechpabeier geklickt gëtt, ruffe mir un deleteNote um Controller vun der Direktiv a weiderginn an der note.id Wäert. De Controller rifft dann un ondelete, déi dann all Ausdrock ausféiert, déi mir dozou verbonnen hunn. Sou wäit sou gutt? Mir ruffen eng lokal Method op de Controller un, deen et dann ofgëtt andeems en den Ausdrock nennt, deen am isoléierten Ëmfang definéiert gouf. Den Ausdrock deen op den Elterendeel geruff gëtt gëtt just genannt deleteNote och.

app.directive ('stickyNote', Funktioun (Socket) {
var Controller = Funktioun ($ scope) {
$ scope.deleteNote = Funktioun (id) {
$ scope.ondelete ({
ech hu gemaach
});
};
};

zréck {
limitéieren: 'A',
Link: Linker,
Kontroller: Kontroller,
Ëmfang: {
note: ’=’,
ondelete: '&'
}
};
});

(Wann Dir Ausdrock definéiert isoléiert Ëmfang benotzt, ginn d'Parameteren an enger Objektkaart verschéckt.)

Am Elteren Ëmfang, deleteNote gëtt ugeruff a mécht eng zimlech standard Läschung mat der eckeg.firEach Utility Funktioun fir iwwer d'Noten Array iteréieren. Wann d'Funktioun hir lokal Geschäfter behandelt huet, geet et virun an emitt d'Evenement fir de Rescht vun der Welt fir deementspriechend ze reagéieren.

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

// erakommen
socket.on ('onNoteDeleted', Funktioun (Daten) {
$ scope.deleteNote (data.id);
});

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

angular.forEach (oldNotes, Funktioun (Notiz) {
wann (note.id! == id) newNotes.push (note);
});

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

12. Update vun enger Pechpabeier

Mir maachen fantastesch Fortschrëtter! Elo hoffen ech datt Dir ufänkt e puer Muster ze gesinn déi aus dëser Wirbelwindtour entstinn déi mir maachen. Nächst Element op der Lëscht ass d'Aktualiséierungsfeature.

Mir fänke bei den aktuellen DOM Elementer un a suivéieren et bis op de Server an zréck erof op de Client. Als éischt musse mir wëssen wann den Titel oder de Kierper vun der Pechpabeier geännert gëtt. AngularJS behandelt Formelementer als Deel vum Datemodell, fir datt Dir zwee-Weeër Datenverbindung an engem Schnapp ophänke kënnt. Fir dëst ze maachen benotzt de ng-Modell Direktiv a gitt an d'Propriétéit un déi Dir wëllt bannen. An dësem Fall wäerte mir benotzen note.title an Notiz.kierper respektiv.

Wann ee vun dësen Eegeschafte ännert, da wëlle mir dës Informatioun erfassen fir weiderzeginn. Mir erreechen dëst mat der ng-Ännerung Direktiv a benotzt et fir ze ruffen updateNote a weiderginn an der Note Objet selwer. AngularJS mécht ganz clever dreckeg Kontroll fir z'entdecken ob de Wäert vun deem wat ass ng-Modell geännert huet an dann den Ausdrock ausféiert deen ass ng-Ännerung.

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

Den Upside vum Benotzen ng-Ännerung ass datt d'lokal Transformatioun scho geschitt ass a mir si just verantwortlech fir de Message weiderzeginn. Am Controller, updateNote genannt gëtt a vun do aus gi mir den updateNote Event fir eise Server fir déi aner Clienten ze diffuséieren.

app.directive ('stickyNote', Funktioun (Socket) {
var Controller = Funktioun ($ scope) {
$ scope.updateNote = Funktioun (Notiz) {
socket.emit ('updateNote', Notiz);
};
};
});

An am Direktivcontroller lauschtere mir no der onNoteUpdated Event fir ze wëssen wéini eng Notiz vun engem anere Client aktualiséiert gouf fir datt mir eis lokal Versioun aktualiséiere kënnen.

var Controller = Funktioun ($ scope) {
// erakommen
socket.on ('onNoteUpdated', Funktioun (Daten) {
// Update wann déi selwecht Notiz
wann (data.id == $ scope.note.id) {

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

13. Plënner eng Pechpabeier

Zu dësem Zäitpunkt hu mir am Fong eng Ronn ronderëm de CRUD Kiddie Pool gemaach an d'Liewen ass gutt! Just zum Wuel vun engem Salon Trick fir Är Frënn ze beandrocken, wäerte mir an d'Fäegkeet bäifügen fir Notizen ronderëm den Ecran ze réckelen an d'Koordinaten an Echtzäit ze aktualiséieren. Maacht keng Panik - et sinn nëmmen e puer weider Zeilen Code. All dës haart Aarbecht wäert sech rentéieren. Ech verspriechen!

Mir hunn e speziellen Invité, jQueryUI, op d'Party agelueden, a mir hunn alles fir d'Draggables gemaach. D'Fäegkeet ze addéieren fir eng Notiz lokal ze zéien hëlt nëmmen eng Zeil Code. Wann Dir dobäisetzt element.draggable (); op Är Linkerfunktioun héiert Dir 'Eye of the Tiger' vum Survivor well Dir kënnt elo Är Notize ronderëm zéien.

Mir wëlle wëssen wann d'Draging gestoppt ass an déi nei Koordinaten erfassen fir laanscht ze goen. jQueryUI gouf vun e puer ganz schlau Leit gebaut, also wann de Schleier stoppt, musst Dir einfach eng Callback Funktioun fir de Stop Event definéieren. Mir gräifen de note.id vum Scope Objet an déi lénks an Top CSS Wäerter vun der Ui Objet. Mat deem Wësse maache mir dat wat mir alles gemaach hunn: emittéieren!

app.directive ('stickyNote', Funktioun (Socket) {
var linker = Funktioun (Ëmfang, Element, attrs) {
element.draggable ({
stoppen: Funktioun (Event, Ui) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', Funktioun (Daten) {
// Update wann déi selwecht Notiz
wann (data.id == scope.note.id) {
element.animate ({
lénks: data.x,
uewen: data.y
});
}
});
};
});

Op dësem Punkt sollt et keng Iwwerraschung sinn datt mir och no engem Plënneren Zesummenhang Event vum Socket Service lauschteren. An dësem Fall ass et den onNoteMoved Event a wann d'Notiz e Match ass da aktualiséiere mir déi lénks an déi Top CSS Eegeschaften. Bam! Gemaach!

14. De Bonus

Dëst ass e Bonus Sektioun deen ech net abegraff hätt wann ech net absolut zouversiichtlech wier datt Dir et a manner wéi 10 Minutte kéint erreechen. Mir ginn op e Live-Server (ech sinn ëmmer nach erstaunt wéi einfach et ass) z'installéieren.

Als éischt musst Dir Iech fir e gratis Nodejitsu-Prozess umellen. De Prozess ass gratis fir 30 Deeg, wat perfekt ass fir Är Féiss naass ze kréien.

Wann Dir Äre Kont erstallt hutt musst Dir de Jitsu Package installéieren, wat Dir vun der Kommandozeil iwwer maache kënnt $ npm installéiert jitsu -g.

Da musst Dir Iech vun der Kommandozeil umellen via $ jitsu Login a gitt Är Umeldungsinformatiounen.

Gitt sécher datt Dir direkt an Ärer App sidd, tippt $ jitsu asetzen a Schrëtt duerch d'Froen. Ech verloossen normalerweis sou vill wéi méiglech op Standard, dat heescht datt ech menger Uwendung en Numm ginn awer keen Ënnerdomain etc.

An, meng léif Frënn, dat ass alles drun! Dir kritt d'URL op Är Uwendung aus dem Output vum Server wann et enplazéiert ass an et ass prett fir ze goen.

15. Konklusioun

Mir hu vill AngularJS Terrain an dësem Artikel ofgedeckt an ech hoffen Dir hat vill Spaass am Prozess. Ech mengen et ass richteg propper wat Dir mat AngularJS a Socket.io an ongeféier 200 Zeilen Code erreeche kënnt.

Et waren e puer Saachen déi ech net ofgedeckt hunn fir op d'Haaptpunkten ze fokusséieren, awer ech encouragéieren Iech d'Quell erof ze zéien a mat der Applikatioun ze spillen. Mir hunn e staarkt Fundament gebaut, awer et ginn nach ëmmer vill Features déi Dir kënnt addéieren. Kritt Hacking!

De Lukas Ruebbelke ass en Technologiebegeeschterten a schreift d'Auteur vun AngularJS an Action for Manning Publications. Seng Liiblingssaach fir ze maachen ass d'Leit esou begeeschtert iwwer nei Technologie wéi hien ass. Hie féiert de Phoenix Web Application User Group an huet e puer Hackathons mat senge Kollegen am Verbrieche gehost.

Liked dëst? Liest dës!

• Wéi eng App ze maachen
• Eis Liiblingswebschrëften - a si kaschten net e Cent
• Entdeckt wat fir Augmented Reality nächst ass
• Luet gratis Texturen erof: Héichopléisend a prett fir elo ze benotzen