AngularJS-samarbejdsbræt med Socket.io

Forfatter: Peter Berry
Oprettelsesdato: 14 Juli 2021
Opdateringsdato: 13 Kan 2024
Anonim
AngularJS-samarbejdsbræt med Socket.io - Kreativ
AngularJS-samarbejdsbræt med Socket.io - Kreativ

Indhold

  • Nødvendig viden: Mellemliggende JavaScript
  • Kræver: Node.js, NPM
  • Projekt Tid: 2 timer

AngularJS er særligt velegnet til at skabe rige applikationer på klientsiden i browseren, og når du tilføjer en lille Socket.io til blandingen, bliver tingene virkelig interessante. I denne artikel skal vi oprette et realtids samarbejdsbræt, der bruger AngularJS til klientsiden og Socket.io til at dele tilstand mellem alle tilsluttede klienter.

Lad os dække lidt husholdning, inden vi kommer i gang. Jeg formoder, at du har en grundlæggende forståelse af HTML og JavaScript, da jeg ikke vil dække hvert lille hjørne af koden. For eksempel vil jeg ikke kalde de CSS- og JavaScript-filer, jeg har inkluderet i HTML-filens hoved, da der ikke er nogen nye oplysninger der.

Jeg opfordrer dig også til at hente koden fra min GitHub-konto for at følge med. Min gode ven Brian Ford har også et fremragende Socket.io-frø, som jeg baserede nogle af mine originale ideer på.

De fire hovedfunktioner, vi ønsker i samarbejdsbrættet, er evnen til at oprette en note, læse noterne, opdatere en note, slette en note og, for sjov, flytte en note på tavlen. Ja, det er korrekt, vi fokuserer på standard CRUD-funktioner. Jeg tror, ​​at ved at fokusere på disse grundlæggende funktioner, vil vi have dækket nok kode til, at mønstre kan dukke op, så du kan tage dem og anvende dem andre steder.


01. Serveren

Vi starter med Node.js-serveren først, da den fungerer som det fundament, som vi skal bygge alt andet på.

Vi skal bygge en Node.js-server med Express og Socket.io. Årsagen til, at vi bruger Express, er, at det giver en god mekanisme til opsætning af en statisk aktivserver i Node.js. Express kommer med en masse virkelig fantastiske funktioner, men i dette tilfælde skal vi bruge det til at skære applikationen rent mellem serveren og klienten.

(Jeg arbejder under den antagelse, at du har Node.js og NPM installeret. En hurtig Google-søgning viser dig, hvordan du får disse installeret, hvis du ikke gør det.)

02. De bare knogler

Så for at opbygge de bare knogler på serveren er vi nødt til at gøre et par ting for at komme i gang.

// app.js

// A.1
var express = kræve (’express’),
app = express ();
server = kræve (’http’). createServer (app),
io = kræve ('socket.io'). lyt (server);

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

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


A.1 Vi erklærer og instantierer vores Node.js-moduler, så vi kan bruge dem i vores applikation. Vi erklærer Express, instantierer Express og opretter derefter en HTTP-server og sender Express-instansen ind i den. Og derfra instantierer vi Socket.io og fortæller det at holde øje med vores serverinstans.

A.2 Vi beder derefter vores Express-app om at bruge vores offentlige bibliotek til at betjene filer fra.

A.3 Vi starter serveren og beder den lytte til port 1337.

Indtil videre har det været ret smertefrit og hurtigt. Jeg tror, ​​at vi har mindre end 10 linjer i koden, og at vi allerede har en funktionel Node.js-server. Fremad!

03. Erklær dine afhængigheder

// Packages.json
{
"name": "vinkel-collab-board",
"beskrivelse": "AngularJS Collaboration Board",
"version": "0.0.1-1",
"privat": sandt,
"afhængigheder": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

En af de bedste funktioner i NPM er evnen til at erklære dine afhængigheder i en Packages.json fil og derefter automatisk installere dem via npm installation på kommandolinjen.


04. Tilslut Socket.io

Vi har allerede defineret de kernefunktioner, vi ønsker i applikationen, og derfor er vi nødt til at oprette Socket.io begivenhedslyttere og en passende lukning til at håndtere begivenheden til hver operation.

I koden nedenfor bemærker du, at det i det væsentlige er en konfiguration af begivenhedslyttere og tilbagekald. Den første begivenhed er forbindelse begivenhed, som vi bruger til at sammenkoble vores andre begivenheder i lukningen.

io.sockets.on ('forbindelse', funktion (socket) {
socket.on ('createNote', funktion (data) {
socket.broadcast.emit ('onNoteCreated', data);
});

socket.on ('updateNote', funktion (data) {
socket.broadcast.emit ('onNoteUpdated', data);
});

socket.on ('deleteNote', funktion (data) {
socket.broadcast.emit ('onNoteDeleted', data);
});

socket.on ('moveNote', funktion (data) {
socket.broadcast.emit ('onNoteMoved', data);
});
});

Herfra tilføjer vi lyttere til createNote, updateNote, deleteNote og moveNote. Og i tilbagekaldsfunktionen sender vi simpelthen, hvilken begivenhed der skete, så enhver klient, der lytter, kan få besked om, at begivenheden er sket.

Der er et par ting, der er værd at påpege om tilbagekaldsfunktionerne i de enkelte begivenhedshåndterere. Den ene, hvis du vil sende en begivenhed til alle andre end klienten, der udsendte den begivenhed, du indsætter udsende før udsender funktionskald. For det andet videregiver vi simpelthen nyttelasten til begivenheden til de interesserede parter, så de kan behandle det, som de finder passende.

05. Start dine motorer!

Nu hvor vi har defineret vores afhængigheder og oprettet vores Node.js-applikation med Express- og Socket.io-beføjelser, er det ret simpelt at initialisere Node.js-serveren.

Først installerer du dine Node.js-afhængigheder som sådan:

npm installation

Og så starter du serveren sådan:

node app.js

Og så! Du går til denne adresse i din browser. Bam!

06. Et par oprigtige tanker, inden vi går videre

Jeg er primært en frontend-udvikler, og jeg blev oprindeligt lidt skræmt af at tilslutte en Node.js-server til min applikation. AngularJS-delen var et snap, men server-side JavaScript? Sæt den uhyggelige musik i kø fra en rædsel.

Men jeg var absolut på gulvet for at opdage, at jeg kunne oprette en statisk webserver på bare et par linjer med kode og i et par flere linjer bruge Socket.io til at håndtere alle begivenhederne mellem browserne. Og det var stadig bare JavaScript! Af hensyn til aktualitet dækker vi kun et par funktioner, men jeg håber, at det i slutningen af ​​artiklen vil se, at det er let at svømme - og den dybe ende af poolen er ikke så skræmmende.

07. Klienten

Nu hvor vi har vores solide fundament på plads med vores server, skal vi gå videre til min yndlingsdel - klienten! Vi bruger AngularJS, jQueryUI til den trækbare del og Twitter Bootstrap til en stilbase.

08. De bare knogler

Som et spørgsmål om personlig præference, når jeg starter en ny AngularJS-applikation, kan jeg hurtigt definere det absolutte minimum, som jeg ved, at jeg har brug for for at komme i gang, og derefter begynde at gentage det så hurtigt som muligt.

Hver AngularJS-applikation skal startes med mindst én controller til stede, og det er derfor generelt, hvor jeg altid starter.

For automatisk at bootstrap applikationen skal du blot tilføje ng-app til HTML-noden, hvor du ønsker, at applikationen skal bo. Det meste af tiden vil tilføje det til HTML-koden være helt acceptabelt. Jeg har også tilføjet en attribut til ng-app at fortælle det, at jeg vil bruge app modul, som jeg vil definere på et øjeblik.

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

Jeg ved, at jeg får brug for mindst en controller, og så vil jeg kalde det ved hjælp ng-controller og tildele det en ejendom af MainCtrl.

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

Så nu er vi på krogen for et modul, der hedder app og en controller, der hedder MainCtrl. Lad os gå videre og oprette dem nu.

Oprettelse af et modul er ret ligetil. Du definerer det ved at ringe vinkelmodul og give det et navn. Til fremtidig reference er den anden parameter i et tomt array, hvor du kan indsprøjte undermoduler til brug i applikationen. Det er uden for omfanget af denne vejledning, men er praktisk, når din applikation begynder at vokse i kompleksitet og behov.

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

Vi erklærer et par tomme pladsholdere i app modul, der starter med MainCtrl under.Vi udfylder disse alle senere, men jeg ville illustrere den grundlæggende struktur fra starten.

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

Vi vil også indpakke Socket.io-funktionaliteten i en stikkontakt service, så vi kan indkapsle objektet og ikke lade det flyde rundt på det globale navneområde.

app.factory ('socket', funktion ($ rootScope) {});

Og mens vi er ved det, erklærer vi, at et direktiv kaldes Sticky note som vi skal bruge til at indkapsle noterne funktionalitet i.

app.directive ('stickyNote', funktion (socket) {});

Så lad os gennemgå, hvad vi har gjort indtil videre. Vi har bootstrapped applikationen ved hjælp af ng-app og erklærede vores applikationscontroller i HTML. Vi har også defineret applikationsmodulet og oprettet MainCtrl controller, den stikkontakt service og Sticky note direktiv.

09. Oprettelse af en notat

Nu hvor vi har skelettet til AngularJS-applikationen på plads, begynder vi at opbygge oprettelsesfunktionen.

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

// Indgående
socket.on ('onNoteCreated', funktion (data) {// B.3
$ scope.notes.push (data);
});

// Udgående
$ scope.createNote = funktion () {// B.4
var note = {
id: ny dato (). getTime (),
titel: 'Ny note',
body: 'Afventer'
};

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

B.1 AngularJS har en afhængighedsinjektionsfunktion indbygget i det, så vi injicerer en $ omfang objekt og stikkontakt service. Det $ omfang objekt fungerer som en ViewModel og er grundlæggende et JavaScript-objekt med nogle begivenheder bagt ind i det for at muliggøre tovejs databinding.

B.2 Vi erklærer det array, hvor vi vil bruge til at binde visningen til.

B.3 Vi tilføjer en lytter til onNoteCreated begivenhed på stikkontakt service og skubbe begivenhedens nyttelast ind i $ scope. noter array.

B.4 Vi har erklæret en createNote metode, der opretter en standard Bemærk objekt og skubber det ind i $ scope. noter array. Det bruger også stikkontakt tjeneste til at udsende createNote begivenhed og bestå ny note objekt langs.

Så nu hvor vi har en metode til at oprette noten, hvordan kalder vi det? Det er et godt spørgsmål! I HTML-filen tilføjer vi det indbyggede AngularJS-direktiv ng-klik til knappen, og tilføj derefter createNote metodeopkald som attributværdi.

button id = "createButton" ng-click = "createNote ()"> Opret note / knap>

Tid til en hurtig gennemgang af, hvad vi hidtil har gjort. Vi har tilføjet en matrix til $ omfang objekt i MainCtrl det vil indeholde alle noterne til applikationen. Vi har også tilføjet en createNote metode til $ omfang gøre indsigelse mod at oprette en ny lokal note og derefter sende denne note til de andre klienter via stikkontakt service. Vi har også tilføjet en begivenhedslytter på stikkontakt service, så vi kan vide, hvornår andre kunder har oprettet en note, så vi kan føje den til vores samling.

10. Visning af sticky notes

Vi har nu muligheden for at oprette et noteobjekt og dele det mellem browsere, men hvordan viser vi det faktisk? Det er her, direktiver kommer ind.

Direktiver og deres forviklinger er et stort emne, men den korte version er, at de giver en måde at udvide elementer og attributter med brugerdefineret funktionalitet. Direktiver er let min yndlingsdel om AngularJS, fordi det giver dig i det væsentlige mulighed for at oprette en hel DSL (Domain Specific Language) omkring din applikation i HTML.

Da vi skal skabe sticky notes til vores samarbejdsbræt, er det naturligt, at vi skal oprette en Sticky note direktiv. Direktiver defineres ved at kalde direktivmetoden på et modul, du vil erklære det på, og videregive et navn og en funktion, der returnerer et direktivs definitionsobjekt. Direktivets definitionsobjekt har masser af mulige egenskaber, du kan definere på det, men vi vil bruge nogle få til vores formål her.

Jeg anbefaler, at du tjekker AngularJS-dokumentationen for at se hele listerne over egenskaber, du kan definere på direktivets definitionsobjekt.

app.directive ('stickyNote', funktion (socket) {
var linker = funktion (scope, element, attrs) {};

var controller = funktion ($ scope) {};

Vend tilbage {
begræns: 'A', // C.1
link: linker, // C.2
controller: controller, // C.3
anvendelsesområde: {// C.4
note: ’=’,
ondelete: '&'
}
};
});

C.1 Du kan begrænse dit direktiv til en bestemt type HTML-element. De to mest almindelige er element eller attribut, som du erklærer at bruge E og EN henholdsvis. Du kan også begrænse det til en CSS-klasse eller en kommentar, men disse er ikke så almindelige.

C.2 Linkfunktionen er, hvor du placerer al din DOM-manipulationskode. Der er et par undtagelser, som jeg har fundet, men det er altid sandt (mindst 99 procent af tiden). Dette er en grundlæggende grundregel for AngularJS og derfor har jeg understreget det.

C.3 Controllerfunktionen fungerer ligesom den hovedcontroller, vi definerede til applikationen, men $ omfang objekt, vi sender ind, er specifikt for DOM-elementet, som direktivet lever videre.

C.4 AngularJS har et begreb isoleret omfang, som giver dig mulighed for eksplicit at definere, hvordan et direktivs anvendelsesområde kommunikerer med omverdenen. Hvis vi ikke havde erklæret anvendelsesområdet, ville direktivet implicit have arvet fra det overordnede omfang med et forhold mellem forældre og barn. I mange tilfælde er dette ikke optimalt. Ved at isolere omfanget formindsker vi chancerne for, at omverdenen uforvarende og negativt kan påvirke tilstanden i dit direktiv.

Jeg har erklæret tovejs databinding til Bemærk med = symbol og et udtryk, der binder til ondelete med & symbol. Læs AngularJS-dokumentationen for en fuldstændig forklaring af det isolerede omfang, da det er et af de mere komplicerede emner i rammen.

Så lad os faktisk tilføje en notat til DOM.

Som enhver god ramme kommer AngularJS med nogle virkelig gode funktioner lige ud af kassen. En af de smukkeste funktioner er ng-gentag. Dette AngularJS-direktiv giver dig mulighed for at videregive en matrix af objekter, og det duplikerer uanset hvilket mærke det er på, så mange gange som der er emner i matrixen. I nedenstående tilfælde gentager vi os over noter array og duplikering af div element og dets børn i længden af noter array.

div sticky-note ng-repeat = "note i 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}} / tekstarea>
/ div>

Skønheden ved ng-gentag er, at det er bundet til det array, du sender ind, og når du tilføjer et element til arrayet, opdateres dit DOM-element automatisk. Du kan tage dette et skridt videre og gentage ikke kun standard DOM-elementer, men også andre brugerdefinerede direktiver. Derfor ser du Sticky note som en attribut på elementet.

Der er to andre bits tilpasset kode, der skal afklares. Vi har isoleret omfanget på sticky notes direktiv om to ejendomme. Den første er det bindende definerede isolerede omfang på Bemærk ejendom. Dette betyder, at når noteobjektet ændres i det overordnede omfang, opdaterer det automatisk det tilsvarende noteobjekt i direktivet og omvendt. Det andet definerede isolerede omfang er på ondelete attribut. Hvad dette betyder er, at hvornår ondelete kaldes i direktivet, vil det kalde, hvad der er udtryk i ondelete attribut på DOM-elementet, der direktiverer direktivet.

Når et direktiv instantieres, føjes det til DOM, og linkfunktionen kaldes. Dette er en perfekt mulighed for at indstille nogle standard DOM-egenskaber på elementet. Elementparameteren, vi sender ind, er faktisk et jQuery-objekt, og så vi kan udføre jQuery-operationer på det.

(AngularJS leveres faktisk med et undersæt af jQuery indbygget i det, men hvis du allerede har inkluderet den fulde version af jQuery, udsætter AngularJS det.)

app.directive ('stickyNote', funktion (socket) {
var linker = funktion (scope, element, attrs) {
// Noget DOM-initiering for at gøre det rart
element.css ('venstre', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

I ovenstående kode placerer vi simpelthen noten på scenen og falmer den ind.

11. Sletning af en nøgle

Så nu hvor vi kan tilføje og vise en huskeseddel, er det tid til at slette noter. Oprettelse og sletning af sticky notes er et spørgsmål om at tilføje og slette elementer fra det array, som noterne er bundet til. Dette er det overordnede omfangs ansvar at opretholde denne matrix, hvorfor vi stammer fra sletningsanmodningen fra direktivet, men lad det overordnede omfang gøre det faktiske tunge løft.

Dette er grunden til, at vi gennemgik alle problemer med at skabe udtryksdefineret isoleret anvendelsesområde på direktivet: så direktivet kunne modtage slettehændelsen internt og videregive det til dets overordnede til behandling.

Bemærk HTML inde i direktivet.

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

Den næste ting, jeg vil sige, kan virke som en lang vej rundt, men husk, at vi er på samme side, og det giver mening, når jeg har uddybet det. Når der klikkes på knappen i det øverste højre hjørne af klistermærket, ringer vi deleteNote på direktivets controller og passerer i note.id værdi. Controlleren ringer derefter op ondelete, som derefter udfører det udtryk, vi koblede til det. Så langt så godt? Vi kalder en lokal metode på controlleren, som derefter afleverer den til ved at kalde det udtryk, der blev defineret i det isolerede omfang. Udtrykket, der bliver kaldt på forældren, kaldes tilfældigvis deleteNote såvel.

app.directive ('stickyNote', funktion (socket) {
var controller = funktion ($ scope) {
$ scope.deleteNote = funktion (id) {
$ scope.ondelete ({
jeg gjorde
});
};
};

Vend tilbage {
begrænse: 'A',
link: linker,
controller: controller,
omfang: {
note: ’=’,
ondelete: '&'
}
};
});

(Når du bruger ekspressionsdefineret isoleret omfang, sendes parametre på et objektkort.)

I det overordnede omfang deleteNote bliver kaldt og foretager en ret standard sletning ved hjælp af kantet. for hver hjælpefunktion til at gentage over noterne. Når funktionen har håndteret sin lokale forretning, fortsætter den og udsender begivenheden for resten af ​​verden for at reagere i overensstemmelse hermed.

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

// Indgående
socket.on ('onNoteDeleted', funktion (data) {
$ scope.deleteNote (data.id);
});

// Udgående
$ scope.deleteNote = funktion (id) {
var oldNotes = $ scope.notes,
newNotes = [];

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

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

12. Opdatering af en notat

Vi gør fantastiske fremskridt! Nu håber jeg, at du begynder at se nogle mønstre, der kommer frem fra denne hvirvelvindstur, vi tager. Næste punkt på listen er opdateringsfunktionen.

Vi starter med de faktiske DOM-elementer og følger det op til serveren og tilbage til klienten. Først skal vi vide, hvornår titlen eller brødteksten på noten ændres. AngularJS behandler formelementer som en del af datamodellen, så du kan tilslutte tovejs databinding på et øjeblik. Brug dette til at gøre dette ng-model direktiv og læg den ejendom, du vil binde til. I dette tilfælde skal vi bruge note.title og note. krop henholdsvis.

Når en af ​​disse egenskaber ændres, vil vi indfange de oplysninger, der skal videreføres. Vi opnår dette med ng-forandring direktivet og bruge det til at ringe updateNote og videregive selve noteobjektet. AngularJS foretager nogle meget kloge beskidte kontroller for at opdage, om værdien af ​​hvad der er i ng-model har ændret sig og udfører derefter det udtryk, der er i ng-forandring.

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

Ulempen ved at bruge ng-forandring er, at den lokale transformation allerede er sket, og vi er bare ansvarlige for at viderebringe meddelelsen. I controlleren, updateNote kaldes og derfra vil vi udsende updateNote begivenhed for vores server til at sende til de andre klienter.

app.directive ('stickyNote', funktion (socket) {
var controller = funktion ($ scope) {
$ scope.updateNote = funktion (note) {
socket.emit ('updateNote', note);
};
};
});

Og i direktivets controller lytter vi til onNoteUpdated begivenhed at vide, hvornår en note fra en anden klient er opdateret, så vi kan opdatere vores lokale version.

var controller = funktion ($ scope) {
// Indgående
socket.on ('onNoteUpdated', funktion (data) {
// Opdater hvis den samme note
hvis (data.id == $ scope.note.id) {

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

13. Flytning af en nøgle

På dette tidspunkt har vi dybest set lavet en omgang omkring CRUD-børnepuljen, og livet er godt! Bare af hensyn til et parlor-trick for at imponere dine venner, tilføjer vi muligheden for at flytte noter rundt på skærmen og opdatere koordinater i realtid. Gå ikke i panik - det er bare et par flere linjer med kode. Alt dette hårde arbejde vil betale sig. Jeg lover!

Vi har inviteret speciel gæst, jQueryUI, til festen, og vi gjorde det hele for draggables. Tilføjelse i evnen til at trække en note lokalt tager kun en linje kode. Hvis du tilføjer i element.draggable (); til din linker-funktion begynder du at høre 'Eye of the Tiger' af Survivor, fordi du nu kan trække dine noter rundt.

Vi vil vide, hvornår trækningen er stoppet, og opfange de nye koordinater, der skal passere. jQueryUI blev bygget af nogle meget smarte mennesker, så når trækningen stopper, skal du blot definere en tilbagekaldsfunktion til stophændelsen. Vi tager fat i note.id fra omfangsobjektet og venstre og øverste CSS-værdier fra ui objekt. Med den viden gør vi det, vi har gjort hele tiden: udsend!

app.directive ('stickyNote', funktion (socket) {
var linker = funktion (scope, element, attrs) {
element.draggable ({
stop: funktion (begivenhed, ui) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position. venstre,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', funktion (data) {
// Opdater hvis den samme note
hvis (data.id == scope.note.id) {
element.animate ({
venstre: data.x,
top: data.y
});
}
});
};
});

På dette tidspunkt bør det ikke komme som nogen overraskelse, at vi også lytter til en flytningsrelateret begivenhed fra stikkontakten. I dette tilfælde er det onNoteMoved begivenhed, og hvis noten er et match, opdaterer vi de venstre og øverste CSS-egenskaber. Bam! Færdig!

14. Bonusen

Dette er en bonussektion, som jeg ikke ville medtage, hvis jeg ikke var helt sikker på, at du kunne opnå det på mindre end 10 minutter. Vi skal implementere på en live server (jeg er stadig forbløffet over, hvor let det er at gøre).

Først skal du tilmelde dig en gratis prøve med Nodejitsu. Prøven er gratis i 30 dage, hvilket er perfekt for at få dine fødder våde.

Når du har oprettet din konto, skal du installere jitsu-pakken, som du kan gøre fra kommandolinjen via $ npm installer jitsu -g.

Derefter skal du logge ind fra kommandolinjen via $ jitsu login og indtast dine legitimationsoplysninger.

Sørg for, at du er i din app direkte, skriv $ jitsu implementere og gå igennem spørgsmålene. Jeg overlader normalt så meget til standard som muligt, hvilket betyder, at jeg giver min ansøgning et navn, men ikke et underdomæne osv.

Og mine kære venner, det er alt, hvad der er! Du får URL'en til din applikation fra output fra serveren, når den er implementeret, og den er klar til brug.

15. Konklusion

Vi har dækket meget af AngularJS-jorden i denne artikel, og jeg håber, du havde en masse sjov i processen. Jeg synes, det er virkelig pænt, hvad du kan opnå med AngularJS og Socket.io i cirka 200 linjer kode.

Der var et par ting, jeg ikke dækkede for at fokusere på hovedpunkterne, men jeg opfordrer dig til at trække kilden ned og lege med applikationen. Vi har bygget et stærkt fundament, men der er stadig mange funktioner, du kan tilføje. Få hacking!

Lukas Ruebbelke er en teknologientusiast og er medforfatter til AngularJS in Action for Manning Publications. Hans foretrukne ting at gøre er at få folk så begejstrede for ny teknologi som han er. Han driver Phoenix Web Application User Group og har været vært for flere hackathons med sine medpartnere i kriminalitet.

Kan du lide dette? Læs disse!

  • Sådan oprettes en app
  • Vores yndlingswebfonte - og de koster ikke en krone
  • Oplev hvad der er næste for Augmented Reality
  • Download gratis teksturer: høj opløsning og klar til brug nu
Tidligere Artikel.

Mestre videnskaben om optimering af konverteringsfrekvens
Næste Artikel

Reduceret Photoshop-rival afslører den nyeste software
Interessant I Dag
De 5 største logo design i juni 2014
Opdage

De 5 største logo design i juni 2014

Kan 2024
om reklamer træber vi kon tant efter at fortolke verden på nye og vi uelt pændende måder. Alligevel kan vi og å være kon ervative og ofte have en kneb-reaktion på n...
Lås op for hemmelighederne ved at arbejde med SVG
Opdage

Lås op for hemmelighederne ved at arbejde med SVG

Kan 2024
VG-færdigheder er hurtigt blevet en vigtig del af enhver frontend-udvikler værktøj æt. VG tilbyder god upport, oplø ning og kalerbare billeder, der kan reducere behovet for f...
Opret et stiliseret HDR-portræt med Photoshop
Opdage

Opret et stiliseret HDR-portræt med Photoshop

Kan 2024
HDR Toning-kommandoen i Photo hop C 6 kan bruge til at give et billede en tili eret HDR-effekt. Du ville blive tilgivet for at tro, at det kun kulle bruge i land kaber, men fakti k kan det og å g...