AngularJS-samenwerkingsbord met Socket.io

Inhoud

• 01. De server
• 02. De kale botten
• 03. Geef uw afhankelijkheden aan
• 04. Sluit Socket.io aan
• 05. Start uw motoren!
• 06. Een paar openhartige gedachten voordat we verder gaan
• 07. De klant
• 08. De kale botten
• 09. Een notitie maken
• 10. De plaknotities weergeven
• 11. een plaknotitie verwijderen
• 12. Een plaknotitie bijwerken
• 13. Een plakbriefje verplaatsen
• 14. De bonus
• 15. Conclusie
• Vond dit leuk? Lees deze!

• Kennis nodig: Gemiddeld JavaScript
• Vereist: Node.js, NPM
• Project tijd: twee uur

AngularJS is bijzonder geschikt voor het maken van rijke client-side applicaties in de browser en als je een klein beetje Socket.io aan de mix toevoegt, wordt het echt interessant. In dit artikel gaan we een realtime samenwerkingsbord bouwen dat AngularJS gebruikt voor de client-side applicatie en Socket.io om de status te delen tussen alle verbonden clients.

Laten we even kijken naar de huishouding voordat we aan de slag gaan. Ik ga ervan uit dat je een fundamenteel begrip hebt van HTML en JavaScript, aangezien ik niet elk hoekje van de code zal behandelen. Ik ga bijvoorbeeld niet de CSS- en JavaScript-bestanden noemen die ik in de kop van het HTML-bestand heb opgenomen, omdat daar geen nieuwe informatie is.

Ik moedig je ook aan om de code van mijn GitHub-account te pakken en mee te volgen. Mijn goede vriend Brian Ford heeft ook een uitstekend Socket.io-zaadje, waarop ik enkele van mijn originele ideeën heb gebaseerd.

De vier belangrijkste functies die we willen in het samenwerkingsbord zijn de mogelijkheid om een ​​notitie te maken, de notities te lezen, een notitie bij te werken, een notitie te verwijderen en, voor de lol, een notitie op het bord te verplaatsen. Ja, dat klopt, we concentreren ons op standaard CRUD-functies. Ik geloof dat door ons te concentreren op deze fundamentele kenmerken, we genoeg code hebben behandeld om patronen te laten ontstaan, zodat je ze kunt gebruiken en elders kunt toepassen.

01. De server

We beginnen eerst met de Node.js-server, aangezien deze zal dienen als de basis waarop we al het andere gaan bouwen.

We gaan een Node.js-server bouwen met Express en Socket.io. De reden dat we Express gebruiken, is dat het een mooi mechanisme biedt voor het opzetten van een statische asset-server binnen Node.js. Express wordt geleverd met een aantal echt geweldige functies, maar in dit geval gaan we het gebruiken om de applicatie netjes te splitsen tussen de server en de client.

(Ik ga ervan uit dat u Node.js en NPM hebt geïnstalleerd. Een snelle Google-zoekopdracht zal u laten zien hoe u deze kunt installeren als u dat niet doet.)

02. De kale botten

Dus om de kale botten van de server te bouwen, moeten we een paar dingen doen om aan de slag te gaan.

// app.js

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

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

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

A.1 We declareren en instantiëren onze Node.js-modules zodat we ze in onze applicatie kunnen gebruiken. We declareren Express, instantiëren Express en maken vervolgens een HTTP-server aan en sturen de Express-instantie erin. En van daaruit instantiëren we Socket.io en zeggen dat het onze serverinstantie in de gaten moet houden.

A.2 We vertellen dan onze Express-app om onze openbare directory te gebruiken om bestanden van te serveren.

A.3 We starten de server en zeggen dat hij op poort moet luisteren 1337.

Tot nu toe was dat vrij pijnloos en snel. Ik geloof dat we minder dan 10 regels in de code hebben en we al een functionele Node.js-server hebben. Voorwaarts!

03. Geef uw afhankelijkheden aan

// packages.json
{
"name": "angular-collab-board",
"description": "AngularJS Collaboration Board",
"version": "0.0.1-1",
"privé": waar,
"afhankelijkheden": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Een van de leukste kenmerken van NPM is de mogelijkheid om uw afhankelijkheden in een packages.json bestand en installeer ze vervolgens automatisch via npm installeren op de opdrachtregel.

04. Sluit Socket.io aan

We hebben de kernfuncties die we in de applicatie willen hebben al gedefinieerd en daarom moeten we Socket.io-gebeurtenislisteners instellen en een passende afsluiting om de gebeurtenis voor elke bewerking af te handelen.

In de onderstaande code zul je zien dat het in wezen een configuratie is van event listeners en callbacks. Het eerste evenement is het verbinding evenement, dat we gebruiken om onze andere evenementen in de afsluiting af te sluiten.

io.sockets.on (’verbinding’, functie (socket) {
socket.on (’createNote’, functie (data) {
socket.broadcast.emit (’onNoteCreated’, gegevens);
});

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

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

socket.on (’moveNote’, function (data) {
socket.broadcast.emit (’onNoteMoved’, gegevens);
});
});

Vanaf hier voegen we luisteraars toe aan createNote, updateNote, deleteNote en moveNote. En in de callback-functie zenden we gewoon uit welke gebeurtenis er is gebeurd, zodat elke klant die luistert, kan worden geïnformeerd dat de gebeurtenis heeft plaatsgevonden.

Er zijn een paar dingen die de moeite waard zijn om op te merken over de callback-functies in de individuele gebeurtenishandlers. Ten eerste als je een evenement naar iedereen wilt sturen, behalve de klant die het evenement dat je hebt ingevoegd, heeft uitgezonden uitzending voor de uitstoten functieaanroep. Ten tweede geven we gewoon de lading van het evenement door aan de geïnteresseerde partijen, zodat ze het naar eigen inzicht kunnen verwerken.

05. Start uw motoren!

Nu we onze afhankelijkheden hebben gedefinieerd en onze Node.js-applicatie hebben ingesteld met Express- en Socket.io-bevoegdheden, is het vrij eenvoudig om de Node.js-server te initialiseren.

Eerst installeer je je Node.js-afhankelijkheden als volgt:

npm installeren

En dan start je de server als volgt:

knooppunt app.js

En dan! U gaat naar dit adres in uw browser. Bam!

06. Een paar openhartige gedachten voordat we verder gaan

Ik ben in de eerste plaats een frontend-ontwikkelaar en ik was aanvankelijk een beetje geïntimideerd door het aansluiten van een Node.js-server op mijn applicatie. Het AngularJS-gedeelte was in een handomdraai, maar JavaScript aan de serverzijde? Zet de enge muziek uit een horrorfilm in de wachtrij.

Maar ik was absoluut verbijsterd toen ik ontdekte dat ik in slechts een paar regels code een statische webserver kon opzetten en in een paar regels Socket.io kon gebruiken om alle gebeurtenissen tussen de browsers af te handelen. En het was nog steeds gewoon JavaScript! Voor de actualiteit behandelen we slechts een paar functies, maar ik hoop dat je aan het einde van het artikel zult zien dat het gemakkelijk is om te zwemmen - en het diepe gedeelte van het zwembad is niet zo eng.

07. De klant

Nu we onze solide basis hebben gelegd met onze server, gaan we verder met mijn favoriete onderdeel: de client! We gaan AngularJS, jQueryUI gebruiken voor het versleepbare gedeelte en Twitter Bootstrap voor een stijlbasis.

08. De kale botten

Als een kwestie van persoonlijke voorkeur, wil ik, wanneer ik een nieuwe AngularJS-applicatie start, snel het absolute minimum definiëren waarvan ik weet dat ik het nodig zal hebben om aan de slag te gaan en daar dan zo snel mogelijk over te herhalen.

Elke AngularJS-applicatie moet worden opgestart met ten minste één controller aanwezig en dus is dit over het algemeen waar ik altijd start.

Om de applicatie automatisch op te starten, hoeft u alleen maar toe te voegen ng-app naar het HTML-knooppunt waarin u de applicatie wilt laten leven. Meestal zal het toevoegen van het aan de HTML-tag volkomen acceptabel zijn. Ik heb ook een kenmerk toegevoegd aan ng-app om te vertellen dat ik de app module, die ik zo dadelijk zal definiëren.

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

Ik weet dat ik ten minste één controller nodig heb en daarom zal ik dat uitroepen met ng-controller en het een eigenschap van toewijzen MainCtrl.

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

Dus nu zijn we aan de haak voor een module met de naam app en een controller met de naam MainCtrl. Laten we doorgaan en ze nu maken.

Het maken van een module is redelijk eenvoudig. U definieert het door te bellen hoekige module en het een naam geven. Ter referentie: de tweede parameter van een lege array is waar u submodules kunt injecteren voor gebruik in de applicatie. Het valt buiten het bestek van deze zelfstudie, maar is handig wanneer uw toepassing begint te groeien in complexiteit en behoeften.

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

We gaan een paar lege tijdelijke aanduidingen declareren in de app module beginnend met de MainCtrl hieronder.We zullen deze later allemaal invullen, maar ik wilde de basisstructuur vanaf het begin illustreren.

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

We gaan ook de Socket.io-functionaliteit inpakken in een stopcontact service, zodat we dat object kunnen inkapselen en niet in de globale naamruimte laten rondzweven.

app.factory (’socket’, function ($ rootScope) {});

En terwijl we bezig zijn, gaan we een richtlijn declareren met de naam notitie die we gaan gebruiken om de sticky note-functionaliteit in te kapselen.

app.directive (’stickyNote’, functie (socket) {});

Dus laten we eens kijken wat we tot nu toe hebben gedaan. We hebben de applicatie opgestart met ng-app en verklaarde onze applicatiecontroller in de HTML. We hebben ook de applicatiemodule gedefinieerd en de MainCtrl controller, de stopcontact service en de notitie richtlijn.

09. Een notitie maken

Nu we het skelet van de AngularJS-applicatie hebben, gaan we beginnen met het uitbouwen van de aanmaakfunctie.

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

// Inkomend
socket.on (’onNoteCreated’, functie (gegevens) {// B.3
$ scope.notes.push (gegevens);
});

// Uitgaand
$ scope.createNote = function () {// B.4
var note = {
id: nieuwe datum (). getTime (),
titel: ’Nieuwe notitie’,
body: ’In afwachting’
};

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

B.1 AngularJS heeft een ingebouwde afhankelijkheidsinjectiefunctie, dus we injecteren een $ scope object en het stopcontact onderhoud. De $ scope object dient als een ViewModel en is in feite een JavaScript-object waarin enkele gebeurtenissen zijn ingebakken om tweewegs-databinding mogelijk te maken.

B.2 We declareren de array waarin we zullen gebruiken om de weergave aan te binden.

B.3 We voegen een luisteraar toe voor de onNoteCreated evenement op de stopcontact service en het pushen van de event-nettolading naar het $ scope.notes array.

B.4 We hebben verklaard a createNote methode die een default Opmerking object en duwt het in het $ scope.notes array. Het maakt ook gebruik van de stopcontact service om de createNote evenement en passeer de nieuwe notitie object mee.

Dus nu we een methode hebben om de notitie te maken, hoe noemen we die dan? Dat is een goede vraag! In het HTML-bestand voegen we de ingebouwde AngularJS-richtlijn toe ng-klik aan de knop en voeg vervolgens het createNote method call als de attribuutwaarde.

button id = "createButton" ng-click = "createNote ()"> Maak notitie / knop>

Tijd voor een snelle terugblik op wat we tot nu toe hebben gedaan. We hebben een array toegevoegd aan de $ scope object in het MainCtrl dat bevat alle notities voor de applicatie. We hebben ook een createNote methode op de $ scope object om een ​​nieuwe lokale notitie te maken en die notitie vervolgens via de stopcontact onderhoud. We hebben ook een gebeurtenislistener toegevoegd aan de stopcontact service, zodat we kunnen weten wanneer andere klanten een notitie hebben gemaakt, zodat we deze aan onze collectie kunnen toevoegen.

10. De plaknotities weergeven

We hebben nu de mogelijkheid om een ​​notitieobject te maken en het te delen tussen browsers, maar hoe kunnen we het eigenlijk weergeven? Dit is waar richtlijnen binnenkomen.

Richtlijnen en hun fijne kneepjes is een veelomvattend onderwerp, maar de korte versie is dat ze een manier bieden om elementen en attributen uit te breiden met aangepaste functionaliteit. Richtlijnen zijn gemakkelijk mijn favoriete onderdeel van AngularJS, omdat je hiermee in wezen een volledige DSL (Domain Specific Language) rond je applicatie in HTML kunt maken.

Het is normaal dat, aangezien we plaknotities gaan maken voor ons samenwerkingsbord, we een notitie richtlijn. Richtlijnen worden gedefinieerd door de richtlijnmethode aan te roepen voor een module waarvoor u deze wilt declareren en een naam en een functie door te geven die een richtlijndefinitieobject retourneren. Het richtlijndefinitieobject heeft veel mogelijke eigenschappen die u erop kunt definiëren, maar we gaan er hier slechts een paar gebruiken voor onze doeleinden.

Ik raad u aan de AngularJS-documentatie te raadplegen om de volledige lijsten met eigenschappen te zien die u kunt definiëren voor het richtlijndefinitieobject.

app.directive (’stickyNote’, function (socket) {
var linker = functie (bereik, element, attrs) {};

var controller = functie ($ scope) {};

terug {
restrict: ’A’, // C.1
link: linker, // C.2
controleur: controleur, // C.3
bereik: {// C.4
opmerking: ’=’,
ondelete: ’&’
}
};
});

C.1 U kunt uw richtlijn beperken tot een bepaald type HTML-element. De twee meest voorkomende zijn elementen of attributen, die u met gebruik van declareert E. en EEN respectievelijk. Je kunt het ook beperken tot een CSS-klasse of een opmerking, maar deze komen niet zo vaak voor.

C.2 De linkfunctie is waar u al uw DOM-manipulatiecode plaatst. Er zijn een paar uitzonderingen die ik heb gevonden, maar dit is altijd waar (tenminste 99 procent van de tijd). Dit is een fundamentele grondregel van AngularJS en daarom heb ik het benadrukt.

C.3 De controller-functie werkt net als de hoofdcontroller die we voor de applicatie hebben gedefinieerd, maar de $ scope object dat we doorgeven, is specifiek voor het DOM-element waarop de richtlijn leeft.

C.4 AngularJS heeft een concept van geïsoleerde reikwijdte, waarmee u expliciet kunt definiëren hoe de reikwijdte van een richtlijn communiceert met de buitenwereld. Als we het bereik niet hadden opgegeven, zou de richtlijn impliciet zijn geërfd van het bovenliggende bereik met een ouder-kindrelatie. In veel gevallen is dit niet optimaal. Door de reikwijdte te isoleren, verkleinen we de kans dat de buitenwereld onbedoeld en een negatieve invloed kan hebben op de status van uw richtlijn.

Ik heb een gegevensbinding in twee richtingen verklaard aan Opmerking met de = symbool en een uitdrukking die binden aan ondelete met de & symbool. Lees de AngularJS-documentatie voor een volledige uitleg van de geïsoleerde scope, aangezien dit een van de meer gecompliceerde onderwerpen in het framework is.

Dus laten we een notitie toevoegen aan de DOM.

Zoals elk goed framework, wordt AngularJS geleverd met een aantal echt geweldige functies, direct uit de doos. Een van de handigste functies is ng-herhalen. Met deze AngularJS-instructie kun je een array van objecten doorgeven en het dupliceert de tag waarop het is zo vaak als er items in de array zijn. In het onderstaande geval herhalen we de notities array en het dupliceren van het div element en zijn kinderen voor de lengte van de notities array.

div sticky-note ng-repeat = "note in notes" note = "note" 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 (note)"
> {{note.body}} / textarea>
/ div>

De schoonheid van ng-herhalen is dat het gebonden is aan de array die u doorgeeft en dat, wanneer u een item aan de array toevoegt, uw DOM-element automatisch wordt bijgewerkt. U kunt nog een stap verder gaan en niet alleen standaard DOM-elementen herhalen, maar ook andere aangepaste richtlijnen. Dat is waarom je het ziet notitie als attribuut op het element.

Er zijn nog twee andere stukjes aangepaste code die moeten worden verduidelijkt. We hebben de scope op de plakbriefjes richtlijn over twee eigenschappen. De eerste is de bindende gedefinieerde geïsoleerde scope op het Opmerking eigendom. Dit betekent dat wanneer het notitieobject verandert in het bovenliggende bereik, het automatisch het corresponderende notitieobject in de richtlijn zal bijwerken en vice versa. De andere gedefinieerde geïsoleerde scope bevindt zich op de ondelete attribuut. Dit betekent dat wanneer ondelete wordt aangeroepen in de richtlijn, zal het elke uitdrukking in de ondelete attribuut op het DOM-element dat de instructie instantieert.

Wanneer een instructie wordt geïnstantieerd, wordt deze toegevoegd aan de DOM en wordt de linkfunctie aangeroepen. Dit is een perfecte gelegenheid om enkele standaard DOM-eigenschappen op het element in te stellen. De elementparameter die we doorgeven is eigenlijk een jQuery-object en dus kunnen we er jQuery-bewerkingen op uitvoeren.

(AngularJS wordt eigenlijk geleverd met een subset van jQuery die erin is ingebouwd, maar als u de volledige versie van jQuery al hebt opgenomen, zal AngularJS daarnaar overgaan.)

app.directive (’stickyNote’, function (socket) {
var linker = functie (bereik, element, attrs) {
// Wat DOM-initiatie om het leuk te maken
element.css (’left’, ’10px’);
element.css (’top’, ’50px’);
element.hide (). fadeIn ();
};
});

In de bovenstaande code plaatsen we gewoon de plaknotitie op het podium en laten we deze vervagen.

11. een plaknotitie verwijderen

Nu we een plakbriefje kunnen toevoegen en weergeven, is het tijd om plakbriefjes te verwijderen. Het maken en verwijderen van plaknotities is een kwestie van items toevoegen aan en verwijderen uit de array waaraan de notities zijn gebonden. Dit is de verantwoordelijkheid van de bovenliggende scope om die array te onderhouden, daarom halen we het verwijderverzoek uit de richtlijn, maar laten we de bovenliggende scope het eigenlijke zware werk doen.

Dit is de reden waarom we alle moeite hebben gedaan om een ​​expressie-gedefinieerde geïsoleerde reikwijdte op de richtlijn te creëren: zodat de richtlijn de delete-gebeurtenis intern zou kunnen ontvangen en deze voor verwerking aan zijn ouder kon doorgeven.

Let op de HTML in de richtlijn.

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

Het volgende dat ik ga zeggen, lijkt misschien een lange weg, maar onthoud dat we aan dezelfde kant staan ​​en dat het logisch zal zijn nadat ik het heb uitgewerkt. Wanneer op de knop in de rechterbovenhoek van de plaknotitie wordt geklikt, bellen we deleteNote op de controller van de richtlijn en het doorgeven van de note.id waarde. De controller belt dan ondelete, die vervolgens elke uitdrukking uitvoert die we erop hebben aangesloten. Tot zover goed? We roepen een lokale methode op de controller aan die deze vervolgens overdraagt ​​door de expressie aan te roepen die in de geïsoleerde scope is gedefinieerd. De uitdrukking die bij de ouder wordt aangeroepen, wordt toevallig genoemd deleteNote ook.

app.directive (’stickyNote’, function (socket) {
var controller = functie ($ scope) {
$ scope.deleteNote = functie (id) {
$ scope.ondelete ({
ik deed
});
};
};

terug {
beperken: ’A’,
link: linker,
controller: controller,
bereik: {
opmerking: ’=’,
ondelete: ’&’
}
};
});

(Bij gebruik van een expressie-gedefinieerd geïsoleerd bereik, worden parameters verzonden in een objecttoewijzing.)

In het bovenliggende bereik, deleteNote wordt aangeroepen en verwijdert een vrij standaard verwijdering met behulp van de hoekig. voor elk utility-functie om de notes-array te herhalen. Zodra de functie zijn lokale zaken heeft afgehandeld, gaat het door en zendt het evenement uit zodat de rest van de wereld dienovereenkomstig kan reageren.

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

// Inkomend
socket.on (’onNoteDeleted’, function (data) {
$ scope.deleteNote (data.id);
});

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

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

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

12. Een plaknotitie bijwerken

We boeken fantastische vooruitgang! Ik hoop dat je nu wat patronen begint te zien die naar voren komen uit deze wervelende tour die we maken. Het volgende item op de lijst is de updatefunctie.

We beginnen bij de feitelijke DOM-elementen en volgen deze helemaal naar de server en weer terug naar de client. Eerst moeten we weten wanneer de titel of de hoofdtekst van de notitie wordt gewijzigd. AngularJS behandelt formulierelementen als onderdeel van het gegevensmodel, zodat u in een handomdraai gegevensbinding in twee richtingen kunt koppelen. Gebruik hiervoor de ng-model richtlijn en plaats de eigenschap waaraan u wilt binden. In dit geval gaan we gebruiken note.title en note.body respectievelijk.

Wanneer een van deze eigenschappen verandert, willen we die informatie vastleggen om door te geven. We bereiken dit met de ng-verandering richtlijn en gebruik het om te bellen updateNote en geef het notitieobject zelf door. AngularJS voert een aantal zeer slimme vuile controles uit om te detecteren of de waarde van wat er ook in zit ng-model is gewijzigd en voert vervolgens de expressie uit die in ng-verandering.

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

Het voordeel van gebruik ng-verandering is dat de lokale transformatie al heeft plaatsgevonden en dat we alleen verantwoordelijk zijn voor het doorgeven van de boodschap. In de controller, updateNote wordt gebeld en van daaruit gaan we de updateNote evenement voor onze server om uit te zenden naar de andere klanten.

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

En in de directieve controller luisteren we naar de onNoteUpdated evenement om te weten wanneer een notitie van een andere klant is bijgewerkt, zodat we onze lokale versie kunnen bijwerken.

var controller = functie ($ scope) {
// Inkomend
socket.on (’onNoteUpdated’, function (data) {
// Update als dezelfde notitie
if (data.id == $ scope.note.id) {

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

13. Een plakbriefje verplaatsen

Op dit punt hebben we eigenlijk een rondje rond het CRUD-kinderzwembad gemaakt en het leven is goed! Om indruk te maken op je vrienden, gaan we de mogelijkheid toevoegen om notities over het scherm te verplaatsen en coördinaten in realtime bij te werken. Geen paniek: het zijn nog maar een paar regels code. Al dit harde werk zal zijn vruchten afwerpen. Ik beloof!

We hebben een speciale gast, jQueryUI, uitgenodigd voor het feest, en we hebben het allemaal gedaan voor de draggables. Het toevoegen van de mogelijkheid om een ​​notitie lokaal te slepen kost slechts één regel code. Als je toevoegt element.draggable (); naar je linkerfunctie ga je ‘Eye of the Tiger’ van Survivor horen, omdat je nu je aantekeningen kunt slepen.

We willen weten wanneer het slepen is gestopt en de nieuwe coördinaten vastleggen om door te geven. jQueryUI is gebouwd door een aantal zeer slimme mensen, dus wanneer het slepen stopt, hoeft u alleen maar een callback-functie voor de stopgebeurtenis te definiëren. We pakken de note.id van het scope-object en de linker en bovenste CSS-waarden van de ui voorwerp. Met die kennis doen we wat we al die tijd al gedaan hebben: uitstoten!

app.directive (’stickyNote’, function (socket) {
var linker = functie (bereik, 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’, functie (data) {
// Update als dezelfde notitie
if (data.id == scope.note.id) {
element.animate ({
links: data.x,
top: data.y
});
}
});
};
});

Op dit punt zou het geen verrassing moeten zijn dat we ook luisteren naar een verplaatsingsgerelateerde gebeurtenis van de socketservice. In dit geval is het de onNoteMoved evenement en als de notitie overeenkomt, werken we de linker en bovenste CSS-eigenschappen bij. Bam! Gedaan!

14. De bonus

Dit is een bonusgedeelte dat ik niet zou opnemen als ik er niet absoluut zeker van was dat je het in minder dan 10 minuten zou kunnen bereiken. We gaan het implementeren op een live server (ik ben nog steeds verbaasd over hoe gemakkelijk het is om te doen).

Eerst moet u zich aanmelden voor een gratis proefperiode van Nodejitsu. De proefperiode is 30 dagen gratis, wat perfect is om je voeten nat te maken.

Nadat u uw account heeft aangemaakt, moet u het jitsu-pakket installeren, wat u vanaf de opdrachtregel kunt doen via $ npm installeer jitsu -g.

Vervolgens moet u inloggen vanaf de opdrachtregel via $ jitsu login en voer uw inloggegevens in.

Zorg ervoor dat u zich rechtstreeks in uw app bevindt, typ $ jitsu implementeren en stap door de vragen. Ik laat meestal zoveel mogelijk standaard staan, wat betekent dat ik mijn applicatie een naam geef maar geen subdomein enz.

En, mijn beste vrienden, dat is alles! U krijgt de URL naar uw toepassing uit de uitvoer van de server zodra deze is geïmplementeerd en klaar is voor gebruik.

15. Conclusie

We hebben in dit artikel veel AngularJS-terrein behandeld en ik hoop dat je veel plezier hebt gehad in het proces. Ik denk dat het heel goed is wat je kunt bereiken met AngularJS en Socket.io in ongeveer 200 regels code.

Er waren een paar dingen die ik niet behandelde om me op de belangrijkste punten te concentreren, maar ik moedig je aan om de bron te verwijderen en met de applicatie te spelen. We hebben een sterke basis gelegd, maar er zijn nog veel functies die u kunt toevoegen. Ga hacken!

Lukas Ruebbelke is een technologieliefhebber en is co-auteur van AngularJS in Action for Manning Publications. Zijn favoriete ding om te doen is mensen net zo enthousiast te maken over nieuwe technologie als hij. Hij runt de Phoenix Web Application User Group en heeft samen met zijn collega-partners in crime meerdere hackathons gehost.

Vond dit leuk? Lees deze!

• Hoe maak je een app
• Onze favoriete weblettertypen - en ze kosten geen cent
• Ontdek wat de toekomst biedt voor Augmented Reality
• Download gratis texturen: hoge resolutie en nu klaar voor gebruik