Deska pro spolupráci AngularJS se Socket.io

Obsah

• 01. Server
• 02. Holé kosti
• 03. Deklarujte své závislosti
• 04. Zapojte Socket.io
• 05. Nastartujte motory!
• 06. Několik upřímných myšlenek, než se vydáte dál
• 07. Klient
• 08. Holé kosti
• 09. Vytvoření lístku s poznámkou
• 10. Zobrazení poznámek
• 11. Odstranění lepicí poznámky
• 12. Aktualizace rychlé poznámky
• 13. Přesunutí lístku s poznámkou
• 14. Bonus
• 15. Závěr
• Líbilo se vám to? Přečtěte si tyto!

• Potřebné znalosti: Střední JavaScript
• Vyžaduje: Node.js, NPM
• Čas projektu: 2 hodiny

AngularJS je zvláště vhodný pro vytváření bohatých aplikací na straně klienta v prohlížeči, a když do mixu přidáte trochu Socket.io, věci budou opravdu zajímavé. V tomto článku budeme stavět desku pro spolupráci v reálném čase, která používá AngularJS pro klientskou aplikaci a Socket.io ke sdílení stavu mezi všemi připojenými klienty.

Než začneme, pokryjeme trochu úklidu. Budu předpokládat, že máte základní přehled o HTML a JavaScriptu, protože nebudu pokrývat každý malý roh kódu. Například nebudu vyvolávat soubory CSS a JavaScript, které jsem zahrnul do záhlaví souboru HTML, protože tam nejsou žádné nové informace.

Doporučuji vám také vzít kód z mého účtu GitHub, abyste mohli postupovat. Můj dobrý přítel Brian Ford má také vynikající osivo Socket.io, na kterém jsem založil některé ze svých původních nápadů.

Čtyři hlavní funkce, které na desce pro spolupráci chceme, je schopnost vytvořit poznámku, číst poznámky, aktualizovat poznámku, odstranit poznámku a pro zábavu ji přesunout na tabuli. Ano, to je pravda, zaměřujeme se na standardní funkce CRUD. Věřím, že když se zaměříme na tyto základní funkce, pokryjeme dostatek kódu, aby se objevily vzory, takže je můžete vzít a použít jinde.

01. Server

Nejprve začneme se serverem Node.js, protože bude sloužit jako základ, na kterém budeme stavět vše ostatní.

Budeme stavět server Node.js s Express a Socket.io. Důvod, proč používáme Express, je ten, že poskytuje pěkný mechanismus pro nastavení serveru statických dat v rámci Node.js. Express přichází se spoustou opravdu úžasných funkcí, ale v tomto případě ji použijeme k čistému rozdělení aplikace mezi serverem a klientem.

(Pracuji za předpokladu, že máte nainstalované Node.js a NPM. Rychlé vyhledávání Google vám ukáže, jak je nainstalovat, pokud tak neučiníte.)

02. Holé kosti

Abychom tedy mohli vybudovat holé kosti serveru, musíme udělat pár věcí, abychom mohli začít pracovat.

// app.js

// A.1
var express = require ('express'),
app = express ();
server = require („http“). createServer (aplikace),
io = require ('socket.io'). listen (server);

// A.2
app.configure (funkce () {
app.use (express.static (__ dirname + „/ public“));
});

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

A.1 Deklarujeme a vytváříme instance našich modulů Node.js, abychom je mohli používat v naší aplikaci. Deklarujeme Express, vytvoříme instanci Express a poté vytvoříme server HTTP a pošleme do něj instanci Express. A odtamtud vytvoříme instanci Socket.io a řekneme jí, aby sledovala naši instanci serveru.

A.2 Poté říkáme naší aplikaci Express, aby k poskytování souborů používala náš veřejný adresář.

A.3 Spustíme server a řekneme mu, aby naslouchal na portu 1337.

Zatím to bylo docela bezbolestné a rychlé. Věřím, že do kódu máme méně než 10 řádků a že již máme funkční server Node.js. Kupředu!

03. Deklarujte své závislosti

// balíčky.json
{
"name": "angular-collab-board",
"description": "AngularJS Collaboration Board",
"version": "0.0.1-1",
"private": true,
"dependencies": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Jednou z nejhezčích funkcí NPM je schopnost deklarovat vaše závislosti v a packages.json soubor a poté je automaticky nainstalovat pomocí NPM instalace na příkazovém řádku.

04. Zapojte Socket.io

Již jsme definovali základní funkce, které v aplikaci chceme, a proto musíme nastavit posluchače událostí Socket.io a vhodné uzavření pro zpracování události pro každou operaci.

V níže uvedeném kódu si všimnete, že se jedná v podstatě o konfiguraci posluchačů událostí a zpětných volání. První událostí je spojení událost, kterou používáme k propojení našich dalších událostí v závěru.

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

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

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

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

Odtud přidáváme posluchače createNote, updateNote, deleteNote a moveNote. A ve funkci zpětného volání jednoduše vysíláme, jaká událost se stala, takže každý poslech klient může být upozorněn, že k události došlo.

Existuje několik věcí, které stojí za to poukázat na funkce zpětného volání v jednotlivých obslužných rutinách událostí. Jeden, pokud chcete poslat událost všem ostatním kromě klientovi, který emitoval událost, kterou vložíte přenos před vysílat volání funkce. Zadruhé, jednoduše přenášíme užitečné zatížení akce na zúčastněné strany, aby ji mohly zpracovat, jak uznají za vhodné.

05. Nastartujte motory!

Nyní, když jsme definovali naše závislosti a nastavili jsme naši aplikaci Node.js s mocnostmi Express a Socket.io, je inicializace serveru Node.js docela jednoduchá.

Nejprve nainstalujete své závislosti Node.js takto:

NPM instalace

A pak spustíte server takto:

uzel app.js

A pak! Ve svém prohlížeči přejdete na tuto adresu. Bam!

06. Několik upřímných myšlenek, než se vydáte dál

Jsem primárně frontendový vývojář a zpočátku jsem se trochu zastrašoval připojením serveru Node.js k mé aplikaci. Část AngularJS byla hračka, ale JavaScript na straně serveru? Fronta strašidelné hudby z hororu.

Ale byl jsem naprosto na podlaze, abych zjistil, že mohu nastavit statický webový server v několika řádcích kódu a v několika dalších řádcích použít Socket.io ke zpracování všech událostí mezi prohlížeči. A stále to byl jen JavaScript! Kvůli aktuálnosti se věnujeme pouze několika funkcím, ale doufám, že do konce článku uvidíte, že je snadné plavat - a hluboký konec bazénu není tak děsivý.

07. Klient

Nyní, když máme pevné základy na našem serveru, pojďme k mé oblíbené části - klientovi! Budeme používat AngularJS, jQueryUI pro přetahovatelnou část a Twitter Bootstrap pro stylovou základnu.

08. Holé kosti

Jako věc osobních preferencí, když spustím novou aplikaci AngularJS, rád rychle definuji minimum, o kterém vím, že budu muset začít, a pak to co nejrychleji začnu iterovat.

Každá aplikace AngularJS musí být bootstrapována s alespoň jedním přítomným řadičem, a tak obvykle začínám vždy.

Chcete-li automaticky zavést aplikaci, musíte ji jednoduše přidat ng-aplikace do uzlu HTML, ve kterém má aplikace žít. Většinou bude jeho přidání do značky HTML naprosto přijatelné. Přidal jsem také atribut ng-aplikace říct, že chci použít aplikace modul, který definuji za okamžik.

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

Vím, že budu potřebovat alespoň jeden ovladač, a proto to zavolám pomocí ng-řadič a přiřadit mu vlastnost MainCtrl.

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

Takže teď jsme na háku modulu s názvem aplikace a řadič s názvem MainCtrl. Pojďme do toho a vytvořme je hned teď.

Vytvoření modulu je poměrně jednoduché. Definujete to voláním úhlový. modul a pojmenovat to. Pro budoucí použití je druhým parametrem prázdného pole místo, kde můžete vložit dílčí moduly pro použití v aplikaci. Je to mimo rozsah tohoto kurzu, ale je užitečné, když vaše aplikace začne růst ve složitosti a potřebách.

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

Chystáme se deklarovat několik prázdných zástupných symbolů v aplikace modul počínaje MainCtrl níže.Vyplníme je všechny později, ale chtěl jsem ilustrovat základní strukturu od začátku.

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

Chystáme se také zabalit funkčnost Socket.io do a zásuvka službu, abychom mohli tento objekt zapouzdřit a nenechat ho plovoucí v globálním prostoru jmen.

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

A když už jsme u toho, vyhlásíme směrnici nazvanou lepící poznámkové papírky kterou použijeme k zapouzdření funkce rychlé poznámky.

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

Pojďme se tedy podívat, co jsme zatím udělali. Aplikaci jsme bootstrapovali pomocí ng-aplikace a deklaroval náš řadič aplikace v HTML. Také jsme definovali aplikační modul a vytvořili MainCtrl řadič, zásuvka služby a lepící poznámkové papírky směrnice.

09. Vytvoření lístku s poznámkou

Nyní, když máme vytvořenou kostru aplikace AngularJS, začneme budovat funkci vytváření.

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

// Příchozí
socket.on ('onNoteCreated', function (data) {// B.3
$ scope.notes.push (data);
});

// Odchozí
$ scope.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
název: „New Note“,
body: „Pending“
};

$ scope.notes.push (poznámka);
socket.emit ('createNote', poznámka);
};

B.1 AngularJS má zabudovanou funkci vkládání závislostí, takže vkládáme a $ obor objekt a zásuvka servis. The $ obor objekt slouží jako ViewModel a je v podstatě objektem JavaScriptu, do kterého jsou zapečené některé události, které umožňují obousměrné vazby dat.

B.2 Deklarujeme pole, ve kterém použijeme k navázání pohledu.

B.3 Přidáváme posluchače pro onNoteCreated událost na zásuvka službu a zatlačení užitečného zatížení události do $ scope.notes pole.

B.4 Prohlásili jsme a createNote metoda, která vytvoří výchozí Poznámka objekt a zasune jej do $ scope.notes pole. Používá také zásuvka služba vydávat createNote událost a předat nová poznámka předmět spolu.

Takže teď, když máme metodu pro vytvoření noty, jak ji nazveme? To je dobrá otázka! V souboru HTML přidáme vestavěnou směrnici AngularJS ng-click na tlačítko a poté přidejte createNote volání metody jako hodnota atributu.

button id = "createButton" ng-click = "createNote ()"> Vytvořit poznámku / tlačítko>

Je čas na rychlou kontrolu toho, co jsme zatím udělali. Přidali jsme pole do $ obor objekt v MainCtrl to bude obsahovat všechny poznámky k aplikaci. Přidali jsme také a createNote metoda na $ obor objekt k vytvoření nové místní poznámky a poté tuto poznámku vyslat ostatním klientům prostřednictvím zásuvka servis. Přidali jsme také posluchače událostí na zásuvka služba, abychom věděli, kdy jiní klienti vytvořili poznámku, abychom ji mohli přidat do naší sbírky.

10. Zobrazení poznámek

Nyní máme možnost vytvořit objekt poznámky a sdílet jej mezi prohlížeči, ale jak jej vlastně zobrazíme? Zde přicházejí směrnice.

Direktivy a jejich složitosti jsou rozsáhlým tématem, ale krátká verze je, že poskytují způsob, jak rozšířit prvky a atributy o vlastní funkčnost. Direktivy jsou snadno mojí oblíbenou částí o AngularJS, protože vám umožňují v podstatě vytvořit celý DSL (Domain Specific Language) kolem vaší aplikace v HTML.

Je přirozené, že jelikož budeme pro naši tabuli pro spolupráci vytvářet rychlé poznámky, měli bychom vytvořit lepící poznámkové papírky směrnice. Direktivy jsou definovány voláním direktivní metody na modulu, který chcete deklarovat, a předáním jména a funkce, která vrací direktivní definiční objekt. Objekt definice směrnice má spoustu možných vlastností, které na něm můžete definovat, ale pro naše účely zde použijeme jen několik.

Doporučuji, abyste si prohlédli dokumentaci AngularJS, abyste viděli celý seznam vlastností, které můžete definovat v definičním objektu směrnice.

app.directive ('stickyNote', function (socket) {
var linker = funkce (obor, prvek, attrs) {};

var controller = function ($ scope) {};

vrátit se {
omezit: „A“, // C.1
link: linker, // C.2
řadič: řadič, // C.3
rozsah: {// C.4
poznámka: „=“,
ondelete: „&“
}
};
});

C.1 Svou směrnici můžete omezit na určitý typ prvku HTML. Dva nejběžnější jsou prvek nebo atribut, který deklarujete pomocí E a A resp. Můžete jej také omezit na třídu CSS nebo komentář, ale ty nejsou tak běžné.

C.2 Funkce propojení je místo, kam vložíte veškerý manipulační kód DOM. Existuje několik výjimek, které jsem našel, ale to je vždy pravda (alespoň 99 procent času). Toto je základní základní pravidlo AngularJS, a proto jsem ho zdůraznil.

C.3 Funkce řadiče funguje stejně jako hlavní řadič, který jsme definovali pro aplikaci, ale $ obor objekt, který předáváme, je specifický pro prvek DOM, na kterém direktiva žije.

C.4 AngularJS má koncept izolovaného rozsahu, který umožňuje výslovně definovat, jak rozsah směrnice komunikuje s vnějším světem. Pokud bychom nedeklarovali rozsah, směrnice by implicitně zdědila z nadřazeného rozsahu se vztahem rodič-dítě. V mnoha případech to není optimální. Izolováním rozsahu zmírňujeme šance, že vnější svět může nechtěně a nepříznivě ovlivnit stav vaší směrnice.

Prohlásil jsem obousměrné vázání dat na Poznámka s = symbol a výraz vázající na vymazat s & symbol. Přečtěte si dokumentaci AngularJS, kde získáte úplné vysvětlení izolovaného rozsahu, protože jde o jeden ze složitějších předmětů v rámci.

Pojďme tedy do DOMu přidat poznámku.

Jako každý dobrý rámec, AngularJS přichází s některými opravdu skvělými funkcemi hned po vybalení z krabice. Jednou z nejzajímavějších funkcí je ng-opakovat. Tato směrnice AngularJS umožňuje předat řadu objektů a duplikuje jakoukoli značku, na které je tolikrát, kolikrát jsou v poli položky. V níže uvedeném případě iterujeme nad poznámky pole a duplikování souboru div prvek a jeho děti pro délku prvku poznámky pole.

div sticky-note ng-repeat = "poznámka v poznámkách" note = "note" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
vstup ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (poznámka)"
> {{note.body}} / textarea>
/ div>

Krása ng-opakovat je to, že je vázáno na jakékoli pole, které předáte, a když do pole přidáte položku, váš prvek DOM se automaticky aktualizuje. Můžete to udělat o krok dále a opakovat nejen standardní prvky DOM, ale i další vlastní směrnice. Proto vidíte lepící poznámkové papírky jako atribut prvku.

Existují další dva bity vlastního kódu, které je třeba vyjasnit. Rozsah jsme izolovali na samolepící papírky směrnice o dvou vlastnostech. První z nich je vazba definovaná izolovaný obor na Poznámka vlastnictví. To znamená, že kdykoli se objekt poznámky změní v nadřazeném oboru, automaticky aktualizuje odpovídající objekt poznámky ve směrnici a naopak. Další definovaný izolovaný rozsah je na vymazat atribut. To znamená, že když vymazat je volána ve směrnici, bude volat jakýkoli výraz v vymazat atribut na prvku DOM, který vytváří instanci směrnice.

Když je direktiva vytvořena, je přidána do DOM a je volána funkce odkazu. Je to skvělá příležitost k nastavení některých výchozích vlastností DOM na prvku. Parametr prvku, který předáváme, je ve skutečnosti objekt jQuery, takže na něm můžeme provádět operace jQuery.

(AngularJS ve skutečnosti přichází s podmnožinou jQuery zabudovanou do něj, ale pokud jste již zahrnuli plnou verzi jQuery, AngularJS se odloží.)

app.directive ('stickyNote', function (socket) {
var linker = funkce (obor, prvek, attrs) {
// Nějaká iniciace DOM, aby to bylo hezké
element.css („left“, „10px“);
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

Ve výše uvedeném kódu jednoduše umístíme lístek s poznámkou na pódium a vybledneme jej.

11. Odstranění lepicí poznámky

Takže teď, když můžeme přidat a zobrazit rychlou poznámku, je čas odstranit rychlé poznámky. Vytváření a mazání poznámek je věcí přidávání a mazání položek z pole, na které jsou poznámky vázány. Toto je odpovědností nadřazeného oboru za udržování tohoto pole, což je důvod, proč pocházíme z požadavku na smazání v rámci směrnice, ale necháme nadřazený obor provést skutečnou těžkou práci.

To je důvod, proč jsme prošli všemi potížemi při vytváření výrazu definovaného izolovaného rozsahu na směrnici: aby směrnice mohla interně přijmout událost odstranění a předat ji svému rodiči ke zpracování.

Všimněte si HTML uvnitř směrnice.

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

Hned další věc, kterou řeknu, se může zdát jako dlouhá cesta kolem, ale pamatujte, že jsme na stejné straně a bude to dávat smysl poté, co to zpracuji. Když kliknete na tlačítko v pravém horním rohu rychlé poznámky, voláme deleteNote o správci směrnice a předání note.id hodnota. Kontrolér poté zavolá vymazat, který pak provede jakýkoli výraz, který jsme k němu připojili. Zatím je vše dobré? Voláme lokální metodu na ovladači, který ji poté předá voláním libovolného výrazu definovaného v izolovaném rozsahu. Výraz, který se zavolá na rodiče, se náhodou volá deleteNote také.

app.directive ('stickyNote', function (socket) {
var řadič = funkce ($ obor) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
udělal jsem
});
};
};

vrátit se {
omezit: „A“,
link: linker,
řadič: řadič,
rozsah: {
poznámka: „=“,
ondelete: „&“
}
};
});

(Při použití izolovaného oboru definovaného výrazem se parametry odesílají v mapě objektů.)

V nadřazeném oboru deleteNote zavolá a provede poměrně standardní mazání pomocí úhlové. pro každý obslužná funkce pro iteraci přes pole poznámek. Jakmile funkce zvládne své místní podnikání, pokračuje a vydává událost pro zbytek světa, aby odpovídajícím způsobem reagovala.

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

// Příchozí
socket.on ('onNoteDeleted', function (data) {
$ scope.deleteNote (data.id);
});

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

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

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

12. Aktualizace rychlé poznámky

Děláme fantastický pokrok! Teď doufám, že už začínáte vidět některé vzorce vycházející z tohoto smršťového turné, které bereme. Další položkou v seznamu je funkce aktualizace.

Začneme od skutečných prvků DOM a budeme to sledovat až na server a zpět ke klientovi. Nejprve musíme vědět, kdy se mění název nebo text poznámky. AngularJS zpracovává prvky formuláře jako součást datového modelu, takže můžete připojit obousměrnou datovou vazbu hned. K tomu použijte ng-model direktivu a vložte vlastnost, na kterou se chcete vázat. V tomto případě použijeme poznámka. název a poznámka. tělo resp.

Když se některá z těchto vlastností změní, chceme tyto informace zachytit a předat dál. Dosahujeme to pomocí ng-změna směrnici a použít ji k volání updateNote a předat samotný objekt poznámky. AngularJS provádí nějakou velmi chytrou špinavou kontrolu, aby zjistil, zda je hodnota čehokoli ng-model se změnilo a poté provede výraz, který je v ng-změna.

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

Výhodou používání ng-změna je, že místní transformace již proběhla a my jsme jen zodpovědní za předávání zprávy. V ovladači updateNote je volán a odtud budeme emitovat updateNote událost pro náš server k vysílání ostatním klientům.

app.directive ('stickyNote', function (socket) {
var řadič = funkce ($ obor) {
$ scope.updateNote = funkce (poznámka) {
socket.emit („updateNote“, poznámka);
};
};
});

A v direktivním kontroléru nasloucháme onNoteUpdated událost vědět, když se aktualizovala poznámka od jiného klienta, abychom mohli aktualizovat naši místní verzi.

var řadič = funkce ($ obor) {
// Příchozí
socket.on („onNoteUpdated“, funkce (data) {
// Aktualizace, pokud je stejná nota
if (data.id == $ scope.note.id) {

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

13. Přesunutí lístku s poznámkou

V tomto okamžiku jsme v podstatě udělali kolo kolem dětského bazénu CRUD a život je dobrý! Kvůli společenskému triku, jak udělat dojem na své přátele, přidáme možnost přesouvat poznámky po obrazovce a aktualizovat souřadnice v reálném čase. Nepropadejte panice - je to jen několik dalších řádků kódu. Celá tato tvrdá práce se vyplatí. Slibuji!

Na párty jsme pozvali speciálního hosta, jQueryUI, a udělali jsme vše pro draggables. Přidání možnosti přetáhnout poznámku místně trvá pouze jeden řádek kódu. Pokud přidáte element.draggable (); k vaší funkci linkeru začnete slyšet „Eye of the Tiger“ od Survivora, protože nyní můžete táhnout poznámky.

Chceme vědět, kdy se tažení zastavilo, a zachytit nové souřadnice, které budou předány. jQueryUI postavili někteří velmi chytří lidé, takže když se přetažení zastaví, musíte jednoduše definovat funkci zpětného volání pro událost stop. Chytíme note.id mimo objekt oboru a levé a horní hodnoty CSS z ui objekt. S touto znalostí děláme to, co jsme dělali po celou dobu: emit!

app.directive ('stickyNote', function (socket) {
var linker = funkce (obor, prvek, attrs) {
element.draggable ({
stop: funkce (událost, ui) {
socket.emit („moveNote“, {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', function (data) {
// Aktualizace, pokud je stejná nota
if (data.id == scope.note.id) {
element.animate ({
vlevo: data.x,
nahoře: data.y
});
}
});
};
});

V tomto okamžiku by nás nemělo překvapovat, že také posloucháme událost související s přesunem ze služby socket. V tomto případě se jedná o onNoteMoved událost a pokud je poznámka shodná, aktualizujeme levé a horní vlastnosti CSS. Bam! Hotovo!

14. Bonus

Toto je bonusová část, kterou bych nezahrnul, kdybych si nebyl absolutně jistý, že toho dosáhnete za méně než 10 minut. Chystáme se nasadit na živý server (stále mě udivuje, jak snadné je to udělat).

Nejprve se musíte zaregistrovat na bezplatnou zkušební verzi Nodejitsu. Zkušební verze je zdarma po dobu 30 dnů, což je ideální pro zvlhnutí nohou.

Jakmile si vytvoříte účet, musíte si nainstalovat balíček jitsu, který můžete provést z příkazového řádku pomocí $ npm instalace jitsu -g.

Poté se musíte přihlásit z příkazového řádku pomocí $ jitsu přihlášení a zadejte své přihlašovací údaje.

Ujistěte se, že jste ve své aplikaci přímo, zadejte $ jitsu nasadit a projděte otázky. Obvykle ponechávám co nejvíce výchozích hodnot, což znamená, že své aplikaci pojmenuji, ale ne subdoménu atd.

A moji milí přátelé, to je vše! Adresu URL vaší aplikace získáte z výstupu serveru, jakmile je nasazen a je připraven jít.

15. Závěr

V tomto článku jsme se zabývali spoustou základů AngularJS a doufám, že jste si při tom užili spoustu zábavy. Myslím, že je opravdu hezké, čeho můžete dosáhnout pomocí AngularJS a Socket.io v přibližně 200 řádcích kódu.

Bylo několik věcí, kterým jsem se nezabýval, abych se soustředil na hlavní body, ale doporučuji vám stáhnout zdroj a pohrát si s aplikací. Postavili jsme silný základ, ale stále můžete přidat spoustu funkcí. Získejte hackování!

Lukas Ruebbelke je technologický nadšenec a spoluautorem publikace AngularJS in Action for Manning Publications. Jeho oblíbenou věcí je přimět lidi, aby byli nadšeni novými technologiemi jako on. Vede skupinu uživatelů webových aplikací Phoenix a hostil několik hackatonů se svými kolegy v trestné činnosti.

Líbilo se vám to? Přečtěte si tyto!

• Jak vytvořit aplikaci
• Naše oblíbená webová písma - a nestojí ani cent
• Objevte, co bude v oblasti rozšířené reality pokračovat
• Stáhněte si zdarma textury: vysoké rozlišení a ihned připravené k použití