AngularJS samarbeidstavle med Socket.io

Forfatter: Peter Berry
Opprettelsesdato: 14 Juli 2021
Oppdater Dato: 13 Kan 2024
Anonim
AngularJS samarbeidstavle med Socket.io - Kreativ
AngularJS samarbeidstavle med Socket.io - Kreativ

Innhold

  • Kunnskap som trengs: Mellomliggende JavaScript
  • Krever: Node.js, NPM
  • Prosjekt Tid: 2 timer

AngularJS er spesielt godt egnet for å lage rike applikasjoner på klientsiden i nettleseren, og når du legger til litt Socket.io i blandingen, blir ting veldig interessante. I denne artikkelen skal vi bygge et sanntids samarbeidskort som bruker AngularJS for klientsiden og Socket.io for å dele tilstand mellom alle tilkoblede klienter.

La oss dekke litt rengjøring før vi setter i gang. Jeg skal anta at du har en grunnleggende forståelse av HTML og JavaScript, da jeg ikke skal dekke hvert eneste hjørne av koden. For eksempel skal jeg ikke kalle ut CSS- og JavaScript-filene jeg har tatt med i HTML-filens hode, da det ikke er noen ny informasjon der.

Jeg oppfordrer deg også til å hente koden fra GitHub-kontoen min for å følge med. Min gode venn Brian Ford har også et utmerket Socket.io-frø, som jeg baserte noen av mine originale ideer på.

De fire hovedtrekkene vi ønsker i samarbeidskortet er muligheten til å lage et notat, lese notatene, oppdatere et notat, slette et notat og for moro skyld flytte et notat på tavlen. Ja, det stemmer, vi fokuserer på standard CRUD-funksjoner. Jeg tror at ved å fokusere på disse grunnleggende funksjonene, vil vi ha dekket nok kode til at mønstre kan dukke opp slik at du kan ta dem og bruke dem andre steder.


01. Serveren

Vi kommer til å begynne med Node.js-serveren først, siden den vil tjene som grunnlaget vi skal bygge alt annet på.

Vi skal bygge en Node.js-server med Express og Socket.io. Grunnen til at vi bruker Express er at det gir en fin mekanisme for å sette opp en statisk aktivaserver i Node.js. Express kommer med en rekke virkelig fantastiske funksjoner, men i dette tilfellet skal vi bruke den til å halvere applikasjonen rent mellom serveren og klienten.

(Jeg opererer under forutsetning av at du har Node.js og NPM installert. Et raskt Google-søk viser deg hvordan du får installert disse hvis du ikke gjør det.)

02. De bare beinene

Så for å bygge bare ben på serveren, må vi gjøre et par ting for å komme i gang.

// app.js

// A.1
var express = krever (’uttrykke’),
app = express ();
server = krever (’http’). createServer (app),
io = krever (’socket.io’). lytt (server);

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

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


A.1 Vi erklærer og instantierer Node.js-modulene våre slik at vi kan bruke dem i applikasjonen vår. Vi erklærer Express, instantierer Express og oppretter deretter en HTTP-server og sender Express-instansen inn i den. Og derfra instantierer vi Socket.io og forteller at den skal holde øye med serverforekomsten vår.

A.2 Vi ber da Express-appen vår om å bruke den offentlige katalogen vår for å betjene filer fra.

A.3 Vi starter serveren og ber den lytte på port 1337.

Så langt har det vært ganske smertefritt og raskt. Jeg tror vi har mindre enn ti linjer i koden, og allerede har vi en funksjonell Node.js-server. Videre!

03. Erklær avhengighet

// Packages.json
{
"name": "vinkel-collab-board",
"beskrivelse": "AngularJS Collaboration Board",
"versjon": "0.0.1-1",
"privat": sant,
"avhengigheter": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

En av de fineste egenskapene til NPM er muligheten til å erklære avhengighet i en Packages.json filen og installer dem automatisk via npm installere på kommandolinjen.


04. Koble til Socket.io

Vi har allerede definert kjernefunksjonene vi ønsker i applikasjonen, og derfor må vi sette opp Socket.io hendelseslyttere og en passende lukking for å håndtere hendelsen for hver operasjon.

I koden nedenfor vil du legge merke til at det egentlig er en konfigurasjon av hendelseslyttere og tilbakeringinger. Den første begivenheten er forbindelse hendelse, som vi bruker for å koble opp de andre hendelsene våre i avslutningen.

io.sockets.on (’connection’, function (socket) {
socket.on (’createNote’, funksjon (data) {
socket.broadcast.emit (’onNoteCreated’, data);
});

socket.on (‘updateNote’, funksjon (data) {
socket.broadcast.emit (’onNoteUpdated’, data);
});

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

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

Herfra legger vi til lyttere til createNote, updateNote, deleteNote og moveNote. Og i tilbakeringingsfunksjonen sender vi ganske enkelt hvilken hendelse som skjedde, slik at enhver klient som lytter, kan varsles om at hendelsen skjedde.

Det er noen ting som er verdt å påpeke om tilbakeringingsfunksjonene i de enkelte hendelsesbehandlerne. En, hvis du vil sende en hendelse til alle andre enn klienten som sendte ut hendelsen du setter inn kringkaste før avgir funksjonsanrop. For det andre overfører vi rett og slett nyttelasten til arrangementet til interesserte, slik at de kan behandle det slik de ønsker det.

05. Start motorene!

Nå som vi har definert våre avhengigheter og konfigurert Node.js-applikasjonen vår med Express- og Socket.io-krefter, er det ganske enkelt å initialisere Node.js-serveren.

Først installerer du Node.js-avhengighet slik:

npm installere

Og så starter du serveren slik:

node app.js

Og så! Du går til denne adressen i nettleseren din. Bam!

06. Noen få oppriktige tanker før du går videre

Jeg er først og fremst en frontend-utvikler, og jeg ble opprinnelig litt skremt med å koble en Node.js-server til applikasjonen min. AngularJS-delen var en snap, men serversiden JavaScript? Sett den skumle musikken i kø fra en skrekkfilm.

Men jeg hadde absolutt gulv for å oppdage at jeg kunne sette opp en statisk webserver på bare noen få linjer med kode og på noen få flere linjer bruke Socket.io til å håndtere alle hendelsene mellom nettleserne. Og det var fortsatt bare JavaScript! Av hensyn til aktualiteten dekker vi bare noen få funksjoner, men jeg håper at det ved slutten av artikkelen vil du se at det er lett å svømme - og den dype enden av bassenget er ikke så skummel.

07. Klienten

Nå som vi har et solid fundament på plass med serveren vår, la oss gå videre til min favorittdel - klienten! Vi skal bruke AngularJS, jQueryUI for den dragbare delen og Twitter Bootstrap for en stilbase.

08. De bare beinene

Som et spørsmål om personlig preferanse, når jeg starter et nytt AngularJS-program, vil jeg raskt definere det absolutte minimum som jeg vet at jeg trenger for å komme i gang, og deretter begynne å gjenta det så raskt som mulig.

Hver AngularJS-applikasjon må startes opp med minst en kontroller til stede, og dette er generelt her jeg alltid starter.

For å automatisk starte programmet, må du bare legge til ng-app til HTML-noden der du vil at applikasjonen skal bo. Det meste av tiden vil det være helt akseptabelt å legge det til HTML-koden. Jeg har også lagt til et attributt til ng-app å fortelle det at jeg vil bruke app modul, som jeg vil definere i løpet av et øyeblikk.

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

Jeg vet at jeg trenger minst en kontroller, og så vil jeg ringe det ved å bruke ng-kontroller og tildele den en eiendom til MainCtrl.

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

Så nå er vi på kroken for en modul som heter app og en kontroller som heter MainCtrl. La oss fortsette og lage dem nå.

Å lage en modul er ganske grei. Du definerer det ved å ringe vinkel. modul og gi det et navn. For fremtidig referanse er den andre parameteren i en tom matrise hvor du kan injisere undermoduler for bruk i applikasjonen. Det er utenfor omfanget av denne opplæringen, men er praktisk når applikasjonen din begynner å vokse i kompleksitet og behov.

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

Vi skal erklære noen få tomme plassholdere i app modul som starter med MainCtrl under.Vi vil fylle ut alt dette senere, men jeg ønsket å illustrere den grunnleggende strukturen fra begynnelsen.

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

Vi skal også pakke Socket.io-funksjonaliteten inn i en stikkontakt tjeneste slik at vi kan kapsle inn objektet og ikke la det flyte rundt på det globale navneområdet.

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

Og mens vi er i gang, skal vi erklære et direktiv kalt post-it lapp som vi skal bruke for å kapsle inn notatfunksjonaliteten i.

app.directive (’stickyNote’, funksjon (stikkontakt) {});

Så la oss gjennomgå hva vi har gjort så langt. Vi har startet opp applikasjonen ved hjelp av ng-app og erklærte vår applikasjonskontroller i HTML. Vi har også definert applikasjonsmodulen og opprettet MainCtrl kontrolleren, den stikkontakt service og post-it lapp direktivet.

09. Lage en klistrelapp

Nå som vi har skjelettet til AngularJS-applikasjonen på plass, vil vi begynne å bygge ut skapelsesfunksjonen.

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

// Innkommende
socket.on (’onNoteCreated’, funksjon (data) {// B.3
$ scope.notes.push (data);
});

// Utgående
$ scope.createNote = funksjon () {// B.4
var note = {
id: ny dato (). getTime (),
tittel: 'New Note',
body: 'Pending'
};

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

B.1 AngularJS har en funksjon for avhengighetsinjeksjon innebygd i den, så vi injiserer en $ omfang objektet og stikkontakt service. De $ omfang objektet fungerer som en ViewModel og er i utgangspunktet et JavaScript-objekt med noen hendelser bakt inn i det for å muliggjøre toveis databinding.

B.2 Vi erklærer matrisen vi vil bruke til å binde visningen til.

B.3 Vi legger til en lytter til onNoteCreated hendelse på stikkontakt service og skyve hendelsens nyttelast inn i $ scope. notater array.

B.4 Vi har erklært a createNote metode som oppretter en standard Merk objekt og skyver den inn i $ scope. notater array. Den bruker også stikkontakt tjeneste for å avgi createNote hendelse og passere nytt notat objektet sammen.

Så nå som vi har en metode for å lage notatet, hvordan kaller vi det? Det er et godt spørsmål! I HTML-filen legger vi til det innebygde AngularJS-direktivet ng-klikk til knappen og legg deretter til createNote metodeanrop som attributtverdi.

button id = "createButton" ng-click = "createNote ()"> Opprett notat / knapp>

På tide for en rask gjennomgang av hva vi har gjort så langt. Vi har lagt til en matrise i $ omfang objekt i MainCtrl det kommer til å holde alle notatene for applikasjonen. Vi har også lagt til en createNote metoden på $ omfang mot å opprette et nytt lokalt notat og deretter sende det notatet til de andre klientene via stikkontakt service. Vi har også lagt til en eventlytter på stikkontakt tjeneste slik at vi kan vite når andre kunder har opprettet et notat, slik at vi kan legge det til i samlingen vår.

10. Viser klistrelappene

Vi har nå muligheten til å lage et notatobjekt og dele det mellom nettlesere, men hvordan viser vi det egentlig? Det er her direktiver kommer inn.

Direktiver og deres komplikasjoner er et stort emne, men kortversjonen er at de gir en måte å utvide elementer og attributter med tilpasset funksjonalitet. Direktiver er lett min favorittdel om AngularJS fordi det lar deg i det vesentlige lage et helt DSL (Domain Specific Language) rundt applikasjonen din i HTML.

Siden vi skal lage klistrelapper til samarbeidskortet vårt, er det naturlig at vi burde lage et post-it lapp direktivet. Direktiv defineres ved å kalle direktivmetoden på en modul du vil erklære den videre og sende inn et navn og en funksjon som returnerer et direktivdefinisjonsobjekt. Direktivdefinisjonsobjektet har mange mulige egenskaper du kan definere på, men vi skal bruke bare noen få til våre formål her.

Jeg anbefaler at du sjekker AngularJS-dokumentasjonen for å se hele listen over egenskaper du kan definere på direktivets definisjonsobjekt.

app.directive (’stickyNote’, funksjon (stikkontakt) {
var linker = funksjon (scope, element, attrs) {};

var kontroller = funksjon ($ scope) {};

komme tilbake {
begrense: ’A’, // C.1
lenke: linker, // C.2
controller: controller, // C.3
omfang: {// C.4
merknad: ’=’,
ondelete: ’&’
}
};
});

C.1 Du kan begrense direktivet ditt til en bestemt type HTML-element. De to vanligste er element eller attributt, som du erklærer å bruke E og EN henholdsvis. Du kan også begrense det til en CSS-klasse eller en kommentar, men disse er ikke like vanlige.

C.2 Koblingsfunksjonen er der du setter all DOM-manipulasjonskoden. Det er noen få unntak jeg har funnet, men dette er alltid sant (minst 99 prosent av tiden). Dette er en grunnleggende grunnregel for AngularJS, og det er grunnen til at jeg har lagt vekt på det.

C.3 Kontrollerfunksjonen fungerer akkurat som hovedkontrolleren vi definerte for applikasjonen, men $ omfang objektet vi sender inn er spesifikt for DOM-elementet direktivet lever videre.

C.4 AngularJS har et begrep isolert omfang, som lar deg eksplisitt definere hvordan et direktivs omfang kommuniserer med omverdenen. Hvis vi ikke hadde erklært omfang, ville direktivet implisitt arvet fra foreldrenes omfang med et foreldre-barn-forhold. I mange tilfeller er dette ikke optimalt. Ved å isolere omfanget reduserer vi sjansene for at omverdenen kan utilsiktet og negativt påvirke tilstanden til direktivet ditt.

Jeg har erklært toveis databinding til Merk med = symbol og et uttrykk som binder seg til ondelete med & symbol. Vennligst les AngularJS-dokumentasjonen for en fullstendig forklaring på isolert omfang, da det er et av de mer kompliserte fagene i rammeverket.

Så la oss faktisk legge til en klistrelapp til DOM.

Som alle gode rammer, kommer AngularJS med noen virkelig gode funksjoner rett ut av esken. En av de fineste funksjonene er ng-gjenta. Dette AngularJS-direktivet lar deg sende inn en rekke objekter, og den dupliserer uansett hvilken kode den er på så mange ganger som det er elementer i matrisen. I tilfellet nedenfor, itererer vi over notater array og duplisering av div element og dets barn for lengden på notater 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}} / tekstområde>
/ div>

Skjønnheten i ng-gjenta er at den er bundet til hvilken matrise du sender inn, og når du legger til et element i matrisen, oppdateres DOM-elementet automatisk. Du kan ta dette et skritt videre og gjenta ikke bare standard DOM-elementer, men også andre tilpassede direktiver. Det er derfor du ser post-it lapp som en attributt på elementet.

Det er to andre biter av tilpasset kode som må avklares. Vi har isolert omfanget på klistrelapper direktivet om to eiendommer. Den første er det bindende definerte isolerte omfanget på Merk eiendom. Dette betyr at når notatobjektet endres i det overordnede omfanget, vil det automatisk oppdatere det tilsvarende notatobjektet i direktivet og omvendt. Det andre definerte isolerte omfanget er på ondelete Egenskap. Hva dette betyr er at når ondelete kalles i direktivet, vil det kalle hva som helst uttrykk i ondelete attributt på DOM-elementet som instantierer direktivet.

Når et direktiv blir instansert, legges det til i DOM og koblingsfunksjonen kalles. Dette er en perfekt mulighet til å sette noen standard DOM-egenskaper på elementet. Elementparameteren vi sender inn er faktisk et jQuery-objekt, og slik at vi kan utføre jQuery-operasjoner på det.

(AngularJS kommer faktisk med en delmengde av jQuery innebygd i den, men hvis du allerede har tatt med den fulle versjonen av jQuery, vil AngularJS utsette det.)

app.directive (’stickyNote’, funksjon (stikkontakt) {
var linker = funksjon (scope, element, attrs) {
// Noe DOM-initiering for å gjøre det hyggelig
element.css (’left’, ‘10px’);
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

I koden ovenfor plasserer vi ganske enkelt klistrelappen på scenen og falmer den inn.

11. Slette en klistrelapp

Så nå som vi kan legge til og vise en klistrelapp, er det på tide å slette klistrelapper. Opprettelse og sletting av klistrelapper er et spørsmål om å legge til og slette elementer fra matrisen som notatene er bundet til. Dette er foreldrenes ansvar å opprettholde den matrisen, og det er grunnen til at vi kommer fra slettingsforespørselen fra direktivet, men lar foreldreområdet gjøre det faktiske tunge løftet.

Dette er grunnen til at vi gikk gjennom alle problemer med å lage uttrykk definert isolert omfang på direktivet: slik at direktivet kunne motta slettehendelsen internt og overføre det til foreldrene for behandling.

Legg merke til HTML-en i direktivet.

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

Det aller neste jeg skal si kan virke som en lang vei rundt, men husk at vi er på samme side, og det vil være fornuftig etter at jeg har utdypet det. Når du klikker på knappen øverst til høyre på notatet, ringer vi deleteNote på direktivets kontroller og passerer i note.id verdi. Kontrolleren ringer deretter ondelete, som deretter utfører hvilket uttrykk vi koblet til det. Så langt så bra? Vi kaller en lokal metode på kontrolleren som deretter gir den til ved å kalle hvilket uttrykk som er definert i det isolerte omfanget. Uttrykket som blir påkalt foreldrene, blir tilfeldigvis kalt deleteNote også.

app.directive (’stickyNote’, funksjon (stikkontakt) {
var controller = funksjon ($ scope) {
$ scope.deleteNote = funksjon (id) {
$ scope.ondelete ({
jeg gjorde
});
};
};

komme tilbake {
begrense: ‘A’,
lenke: linker,
kontroller: kontroller,
omfang: {
merknad: ’=’,
ondelete: ’&’
}
};
});

(Når du bruker uttrykksdefinert isolert omfang, sendes parametere i et objektkart.)

I overordnet omfang, deleteNote blir ringt og gjør en ganske standard sletting ved hjelp av kantete. for hver verktøyfunksjon for å itere over notatmatrisen. Når funksjonen har håndtert sin lokale virksomhet, fortsetter den og sender ut hendelsen for resten av verden for å reagere deretter.

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

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

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

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

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

12. Oppdaterer en klistrelapp

Vi gjør fantastiske fremskritt! Nå håper jeg at du begynner å se noen mønstre som dukker opp fra denne virvelvindturen vi tar. Neste element på listen er oppdateringsfunksjonen.

Vi skal begynne på de faktiske DOM-elementene og følge det opp helt til serveren og tilbake til klienten. Først må vi vite når tittelen på eller lappen på klistrelappen endres. AngularJS behandler formelementer som en del av datamodellen, slik at du kan koble til toveis databinding på et øyeblikk. For å gjøre dette bruker du ng-modell direktivet og legg i eiendommen du vil binde til. I dette tilfellet skal vi bruke note.title og merknad. kropp henholdsvis.

Når en av disse egenskapene endres, vil vi fange den informasjonen som skal formidles. Vi oppnår dette med ng-forandring direktivet og bruke det til å ringe updateNote og pass inn selve notatobjektet. AngularJS gjør noen veldig smarte skitne kontroller for å oppdage om verdien av det som er i ng-modell har endret seg og utfører deretter uttrykket som 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 med å bruke ng-forandring er at den lokale transformasjonen allerede har skjedd, og vi er bare ansvarlige for å videreformidle meldingen. I kontrolleren, updateNote kalles og derfra skal vi slippe ut updateNote hendelse for serveren vår å kringkaste til de andre klientene.

app.directive (’stickyNote’, funksjon (stikkontakt) {
var controller = funksjon ($ scope) {
$ scope.updateNote = funksjon (merknad) {
socket.emit (’updateNote’, note);
};
};
});

Og i direktivkontrolleren lytter vi etter onNoteUpdated hendelse å vite når et notat fra en annen klient har oppdatert, slik at vi kan oppdatere vår lokale versjon.

var controller = funksjon ($ scope) {
// Innkommende
socket.on (’onNoteUpdated’, funksjon (data) {
// Oppdater hvis det samme notatet
hvis (data.id == $ scope.note.id) {

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

13. Flytte en lapp

På dette tidspunktet har vi i utgangspunktet gjort en runde rundt barnebassenget CRUD, og ​​livet er bra! Bare for å oppdage vennene dine, vil vi legge til muligheten til å flytte notater rundt skjermen og oppdatere koordinatene i sanntid. Ikke få panikk - det er bare noen få linjer med kode. Alt dette harde arbeidet vil lønne seg. Jeg lover!

Vi har invitert spesialgjest, jQueryUI, til festen, og vi gjorde alt for draggables. Å legge til muligheten til å dra et notat lokalt tar bare én linje med kode. Hvis du legger til element.draggable (); til linker-funksjonen din vil du begynne å høre 'Eye of the Tiger' av Survivor fordi du nå kan dra notatene dine rundt.

Vi vil vite når draingen har stoppet og fange de nye koordinatene som skal passere. jQueryUI ble bygget av noen veldig smarte mennesker, så når draingen stopper, trenger du bare å definere en tilbakeringingsfunksjon for stopphendelsen. Vi tar tak i note.id av omfangsobjektet og venstre og øverste CSS-verdier fra ui gjenstand. Med den kunnskapen gjør vi det vi har gjort hele tiden: send ut!

app.directive (’stickyNote’, funksjon (stikkontakt) {
var linker = funksjon (scope, element, attrs) {
element.draggable ({
stopp: funksjon (hendelse, ui) {
socket.emit (’moveNote’, {
id: scope.note.id,
x: ui.posisjon. venstre,
y: ui.posisjon.topp
});
}
});

socket.on (’onNoteMoved’, funksjon (data) {
// Oppdater hvis det samme notatet
hvis (data.id == scope.note.id) {
element.animate ({
venstre: data.x,
topp: data.y
});
}
});
};
});

På dette tidspunktet bør det ikke komme som noen overraskelse at vi også lytter etter en flyttrelatert hendelse fra stikkontakten. I dette tilfellet er det onNoteMoved hendelse, og hvis notatet samsvarer, oppdaterer vi CSS-egenskapene til venstre og topp. Bam! Ferdig!

14. Bonusen

Dette er en bonusseksjon som jeg ikke ville tatt med hvis jeg ikke var helt sikker på at du kunne oppnå det på mindre enn 10 minutter. Vi skal distribuere til en live server (jeg er fortsatt overrasket over hvor enkelt det er å gjøre).

Først må du registrere deg for en gratis prøveversjon av Nodejitsu. Rettssaken er gratis i 30 dager, noe som er perfekt for å få føttene våte.

Når du har opprettet kontoen din, må du installere jitsu-pakken, som du kan gjøre fra kommandolinjen via $ npm installer jitsu -g.

Da må du logge inn fra kommandolinjen via $ jitsu pålogging og skriv inn legitimasjonen din.

Forsikre deg om at du er i appen din direkte, skriv $ jitsu distribuere og gå gjennom spørsmålene. Jeg lar vanligvis så mye som standard være mulig, noe som betyr at jeg gir søknaden min et navn, men ikke et underdomene osv.

Og, mine kjære venner, det er alt det er! Du vil få URL-en til søknaden din fra utdataene fra serveren når den er distribuert, og den er klar til bruk.

15. Konklusjon

Vi har dekket mye av AngularJS-bakken i denne artikkelen, og jeg håper du hadde det veldig gøy i prosessen. Jeg synes det er veldig pent hva du kan oppnå med AngularJS og Socket.io i omtrent 200 linjer med kode.

Det var noen ting jeg ikke dekket for å fokusere på hovedpoengene, men jeg oppfordrer deg til å trekke ned kilden og leke med applikasjonen. Vi har bygget et sterkt fundament, men det er fortsatt mange funksjoner du kan legge til. Få hacking!

Lukas Ruebbelke er en teknologientusiast og er medforfatter av AngularJS in Action for Manning Publications. Hans favoritt ting å gjøre er å få folk så begeistret for ny teknologi som han er. Han driver Phoenix Web Application User Group og har vært vert for flere hackathons sammen med sine andre partnere i kriminalitet.

Likte dette? Les disse!

  • Hvordan lage en app
  • Våre favorittfonter - og de koster ikke en krone
  • Oppdag hva som er neste for Augmented Reality
  • Last ned gratis teksturer: høy oppløsning og klar til bruk nå
Forrige Artikkel

Mayatips: Hvordan lage enkle modeller som leire
Neste Artikkel

Hvordan mestre skjermorientering med HTML5
Vårt Valg
Praktisk med den ultimate VR-opplevelsen
Lengre

Praktisk med den ultimate VR-opplevelsen

Kan 2024
Før Pokemon Go kom ammen for å kra je fe ten, var 2016 att til å bli året for VR. Og uan ett om det er lan eringen av et hode ett, et nytt pill eller den nye te bran jen om blir &q...
Gratulerer med dagen Adobe! 40 flotte ressurser for designere
Lengre

Gratulerer med dagen Adobe! 40 flotte ressurser for designere

Kan 2024
De ignprogramvaregiganten Adobe - el kapet bak Photo hop, Illu trator, After Effect og andre alle ted nærværende de ignverktøy - feirer 30-år dag denne måneden. om fikk o til ...
Denne partikkelgjengivelsen til Cinema 4D er et seriøst sett
Lengre

Denne partikkelgjengivelsen til Cinema 4D er et seriøst sett

Kan 2024
Krakatoa er Thinkbox oftware partikkelrender, de ignet for å taet ek i terende partikkelfelt og bruke det til å produ ere prø, eteri ke former, om pla ma eller ga formige væ ker. D...