Carte de collaboration AngularJS avec Socket.io

Contenu

• 01. Le serveur
• 02. Les os nus
• 03. Déclarez vos dépendances
• 04. Câblez Socket.io
• 05. Démarrez vos moteurs!
• 06. Quelques réflexions sincères avant de passer à autre chose
• 07. Le client
• 08. Les os nus
• 09. Création d'un pense-bête
• 10. Affichage des notes autocollantes
• 11.Suppression d'un pense-bête
• 12. Mise à jour d'un pense-bête
• 13. Déplacement d'un pense-bête
• 14. Le bonus
• 15. Conclusion
• Aimait ça? Lisez-les!

• Connaissances nécessaires: JavaScript intermédiaire
• A besoin: Node.js, NPM
• Temps du projet: 2 heures

AngularJS est particulièrement bien adapté pour créer des applications côté client riches dans le navigateur et, lorsque vous ajoutez un petit Socket.io dans le mélange, les choses deviennent vraiment intéressantes. Dans cet article, nous allons créer un tableau de collaboration en temps réel qui utilise AngularJS pour l'application côté client et Socket.io pour partager l'état entre tous les clients connectés.

Parlons un peu de l'entretien ménager avant de commencer. Je vais supposer que vous avez une compréhension fondamentale du HTML et du JavaScript, car je ne vais pas couvrir tous les petits coins du code. Par exemple, je ne vais pas appeler les fichiers CSS et JavaScript que j'ai inclus dans l'en-tête du fichier HTML car il n'y a pas de nouvelles informations.

De plus, je vous encourage à récupérer le code de mon compte GitHub pour le suivre. Mon bon ami Brian Ford a également une excellente graine Socket.io, sur laquelle j'ai basé certaines de mes idées originales.

Les quatre principales fonctionnalités que nous souhaitons dans le tableau de collaboration sont la possibilité de créer une note, de lire les notes, de mettre à jour une note, de supprimer une note et, pour le plaisir, de déplacer une note sur le tableau. Oui, c'est exact, nous nous concentrons sur les fonctionnalités CRUD standard. Je pense qu'en nous concentrant sur ces fonctionnalités fondamentales, nous aurons couvert suffisamment de code pour que des modèles émergent afin que vous puissiez les prendre et les appliquer ailleurs.

01. Le serveur

Nous allons commencer par le serveur Node.js car il servira de base sur laquelle nous allons construire tout le reste.

Nous allons créer un serveur Node.js avec Express et Socket.io. La raison pour laquelle nous utilisons Express est qu'il fournit un mécanisme intéressant pour configurer un serveur d'actifs statiques dans Node.js. Express est livré avec un tas de fonctionnalités vraiment géniales mais, dans ce cas, nous allons l'utiliser pour couper proprement l'application entre le serveur et le client.

(Je suppose que vous avez installé Node.js et NPM. Une recherche rapide sur Google vous montrera comment les installer si ce n'est pas le cas.)

02. Les os nus

Donc, pour construire le strict minimum du serveur, nous devons faire quelques choses pour être opérationnel.

// app.js

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

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

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

A.1 Nous déclarons et instancions nos modules Node.js afin de pouvoir les utiliser dans notre application. Nous déclarons Express, instancions Express, puis créons un serveur HTTP et y envoyons l'instance Express. Et à partir de là, nous instancions Socket.io et lui demandons de garder un œil sur notre instance de serveur.

A.2 Nous demandons ensuite à notre application Express d'utiliser notre répertoire public pour diffuser les fichiers à partir de.

A.3 Nous démarrons le serveur et lui disons d'écouter sur le port 1337.

Jusqu'à présent, cela a été assez simple et rapide. Je pense que nous avons moins de 10 lignes dans le code et que nous avons déjà un serveur Node.js fonctionnel. En avant!

03. Déclarez vos dépendances

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

L'une des fonctionnalités les plus intéressantes de NPM est la possibilité de déclarer vos dépendances dans un packages.json fichier puis installez-les automatiquement via npm installer sur la ligne de commande.

04. Câblez Socket.io

Nous avons déjà défini les fonctionnalités de base que nous souhaitons dans l'application et nous devons donc configurer des écouteurs d'événements Socket.io et une fermeture appropriée pour gérer l'événement pour chaque opération.

Dans le code ci-dessous, vous remarquerez qu'il s'agit essentiellement d'une configuration d'écouteurs d'événements et de rappels. Le premier événement est le lien événement, que nous utilisons pour câbler nos autres événements lors de la fermeture.

io.sockets.on ('connection', function (socket) {
socket.on ('createNote', fonction (données) {
socket.broadcast.emit ('onNoteCreated', données);
});

socket.on ('updateNote', fonction (données) {
socket.broadcast.emit ('onNoteUpdated', données);
});

socket.on ('deleteNote', fonction (données) {
socket.broadcast.emit ('onNoteDeleted', données);
});

socket.on ('moveNote', fonction (données) {
socket.broadcast.emit ('onNoteMoved', données);
});
});

De là, nous ajoutons des auditeurs à createNote, mise à jour, supprimerRemarque et déplacerRemarque. Et dans la fonction de rappel, nous diffusons simplement l'événement qui s'est produit afin que tout client qui écoute puisse être informé que l'événement s'est produit.

Il y a quelques points à souligner à propos des fonctions de rappel dans les gestionnaires d'événements individuels. Premièrement, si vous souhaitez envoyer un événement à tout le monde sauf au client qui a émis l'événement que vous insérez diffuser avant le émettre appel de fonction. Deuxièmement, nous transmettons simplement la charge utile de l'événement aux parties intéressées afin qu'elles puissent le traiter comme elles l'entendent.

05. Démarrez vos moteurs!

Maintenant que nous avons défini nos dépendances et configuré notre application Node.js avec les pouvoirs Express et Socket.io, il est assez simple d'initialiser le serveur Node.js.

Commencez par installer vos dépendances Node.js comme ceci:

npm installer

Et puis vous démarrez le serveur comme ceci:

node app.js

Et alors! Vous accédez à cette adresse dans votre navigateur. Bam!

06. Quelques réflexions sincères avant de passer à autre chose

Je suis avant tout un développeur frontend et j'ai d'abord été un peu intimidé par le fait de connecter un serveur Node.js à mon application. La partie AngularJS était un jeu d'enfant, mais JavaScript côté serveur? Mettez en file d'attente la musique effrayante d'un film d'horreur.

Mais, j'ai été absolument bouleversé de découvrir que je pouvais configurer un serveur Web statique en quelques lignes de code et en quelques lignes de plus, utiliser Socket.io pour gérer tous les événements entre les navigateurs. Et ce n'était encore que JavaScript! Par souci de rapidité, nous ne couvrons que quelques fonctionnalités, mais j'espère qu'à la fin de l'article, vous verrez qu'il est facile de nager - et que la partie profonde de la piscine n'est pas si effrayante.

07. Le client

Maintenant que nous avons notre base solide en place avec notre serveur, passons à ma partie préférée - le client! Nous allons utiliser AngularJS, jQueryUI pour la partie déplaçable et Twitter Bootstrap pour une base de style.

08. Les os nus

Par préférence personnelle, lorsque je lance une nouvelle application AngularJS, j'aime définir rapidement le strict minimum dont je sais que je vais avoir besoin pour commencer, puis recommencer à itérer le plus rapidement possible.

Chaque application AngularJS doit être amorcée avec au moins un contrôleur présent et c'est donc généralement là que je commence toujours.

Pour démarrer automatiquement l'application, vous devez simplement ajouter ng-app au nœud HTML dans lequel vous souhaitez que l'application vive. La plupart du temps, l'ajouter à la balise HTML sera parfaitement acceptable. J'ai également ajouté un attribut à ng-app pour lui dire que je veux utiliser le appli module, que je définirai dans un instant.

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

Je sais que j’aurai besoin d’au moins une manette. Je l’appellerai donc en utilisant ng-controller et en lui attribuant une propriété de MainCtrl.

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

Alors maintenant, nous sommes accrochés pour un module nommé appli et un contrôleur nommé MainCtrl. Allons de l'avant et créons-les maintenant.

La création d'un module est assez simple. Vous le définissez en appelant module angulaire et lui donner un nom. Pour référence future, le deuxième paramètre d'un tableau vide est l'endroit où vous pouvez injecter des sous-modules à utiliser dans l'application. Cela sort du cadre de ce didacticiel, mais il est pratique lorsque votre application commence à croître en complexité et en besoins.

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

Nous allons déclarer quelques espaces réservés vides dans le appli module commençant par le MainCtrl au dessous de.Nous les remplirons plus tard, mais je voulais illustrer la structure de base dès le début.

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

Nous allons également envelopper la fonctionnalité Socket.io dans un prise service afin que nous puissions encapsuler cet objet et ne pas le laisser flotter sur l'espace de noms global.

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

Et pendant que nous y sommes, nous allons déclarer une directive appelée note collante que nous allons utiliser pour encapsuler la fonctionnalité de pense-bête dans.

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

Alors passons en revue ce que nous avons fait jusqu'à présent. Nous avons amorcé l'application en utilisant ng-app et a déclaré notre contrôleur d'application dans le HTML. Nous avons également défini le module d'application et créé le MainCtrl contrôleur, le prise service et le note collante directif.

09. Création d'un pense-bête

Maintenant que nous avons le squelette de l'application AngularJS en place, nous allons commencer à développer la fonction de création.

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

// Entrant
socket.on (’onNoteCreated’, fonction (données) {// B.3
$ scope.notes.push (données);
});

// Sortant
$ scope.createNote = fonction () {// B.4
var note = {
id: nouvelle Date (). getTime (),
title: "Nouvelle note",
corps: «En attente»
};

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

B.1 AngularJS a une fonction d'injection de dépendances intégrée, donc nous injectons un $ portée objet et le prise un service. le $ portée L'objet sert de ViewModel et est essentiellement un objet JavaScript avec certains événements intégrés pour permettre la liaison de données bidirectionnelle.

B.2 Nous déclarons le tableau dans lequel nous utiliserons pour lier la vue.

B.3 Nous ajoutons un auditeur pour le onNoteCreated événement sur le prise service et en poussant la charge utile de l'événement dans le $ scope.notes déployer.

B.4 Nous avons déclaré un createNote méthode qui crée une valeur par défaut Remarque objet et le pousse dans le $ scope.notes déployer. Il utilise également le prise service pour émettre le createNote événement et passer le nouvelle note objet le long.

Alors maintenant que nous avons une méthode pour créer la note, comment l'appelons-nous? Voilà une bonne question! Dans le fichier HTML, nous ajoutons la directive AngularJS intégrée ng-clic au bouton, puis ajoutez le createNote appel de méthode comme valeur d'attribut.

button id = "createButton" ng-click = "createNote ()"> Créer une note / bouton>

Il est temps de passer rapidement en revue ce que nous avons fait jusqu'à présent. Nous avons ajouté un tableau au $ portée objet dans le MainCtrl qui contiendra toutes les notes de l’application. Nous avons également ajouté un createNote méthode sur le $ portée objet pour créer une nouvelle note locale puis diffuser cette note aux autres clients via le prise un service. Nous avons également ajouté un écouteur d'événements sur le prise service afin que nous puissions savoir quand d'autres clients ont créé une note afin que nous puissions l'ajouter à notre collection.

10. Affichage des notes autocollantes

Nous avons maintenant la possibilité de créer un objet note et de le partager entre les navigateurs, mais comment l'afficher réellement? C'est là qu'interviennent les directives.

Les directives et leurs subtilités sont un vaste sujet, mais la version courte est qu'elles fournissent un moyen d'étendre les éléments et les attributs avec des fonctionnalités personnalisées. Les directives sont facilement ma partie préférée d'AngularJS car elles vous permettent de créer essentiellement un DSL (Domain Specific Language) autour de votre application en HTML.

Il est naturel que, puisque nous allons créer des notes autocollantes pour notre tableau de collaboration, nous devons créer un note collante directif. Les directives sont définies en appelant la méthode directive sur un module sur lequel vous souhaitez le déclarer et en passant un nom et une fonction qui renvoient un objet de définition de directive. L'objet de définition de directive a beaucoup de propriétés possibles que vous pouvez définir dessus, mais nous allons en utiliser seulement quelques-unes pour nos besoins ici.

Je vous recommande de consulter la documentation AngularJS pour voir toutes les listes de propriétés que vous pouvez définir sur l'objet de définition de directive.

app.directive ('stickyNote', function (socket) {
var linker = function (portée, élément, attrs) {};

var controller = function ($ scope) {};

revenir {
restreindre: «A», // C.1
lien: éditeur de liens, // C.2
contrôleur: contrôleur, // C.3
portée: {// C.4
remarque: ’=’,
ondelete: ’&’
}
};
});

C.1 Vous pouvez restreindre votre directive à un certain type d'élément HTML. Les deux plus courants sont l'élément ou l'attribut, que vous déclarez en utilisant E et UNE respectivement. Vous pouvez également le limiter à une classe CSS ou à un commentaire, mais ceux-ci ne sont pas aussi courants.

C.2 La fonction link est l'endroit où vous placez tout votre code de manipulation DOM. Il y a quelques exceptions que j'ai trouvées, mais c'est toujours vrai (au moins 99% du temps). C'est une règle de base fondamentale d'AngularJS et c'est pourquoi je l'ai souligné.

C.3 La fonction du contrôleur fonctionne exactement comme le contrôleur principal que nous avons défini pour l'application mais le $ portée L'objet que nous transmettons est spécifique à l'élément DOM sur lequel la directive vit.

C.4 AngularJS a un concept de portée isolée, qui vous permet de définir explicitement comment la portée d'une directive communique avec le monde extérieur. Si nous n'avions pas déclaré la portée, la directive aurait implicitement hérité de la portée parent avec une relation parent-enfant. Dans de nombreux cas, ce n'est pas optimal. En isolant le champ d'application, nous atténuons les chances que le monde extérieur puisse par inadvertance et négativement affecter l'état de votre directive.

J'ai déclaré une liaison de données bidirectionnelle à Remarque avec le = symbole et une expression liée à ondelete avec le & symbole. Veuillez lire la documentation AngularJS pour une explication complète de la portée isolée car c'est l'un des sujets les plus compliqués du framework.

Alors ajoutons en fait une note autocollante au DOM.

Comme tout bon framework, AngularJS est livré avec de très bonnes fonctionnalités dès la sortie de la boîte. L'une des fonctionnalités les plus pratiques est ng-répéter. Cette directive AngularJS vous permet de transmettre un tableau d'objets et elle duplique n'importe quelle balise sur laquelle elle se trouve autant de fois qu'il y a d'éléments dans le tableau. Dans le cas ci-dessous, nous itérons sur le Remarques tableau et dupliquer le div élément et ses enfants pour la durée du Remarques déployer.

div sticky-note ng-repeat = "note dans les 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>

La beauté de ng-répéter est qu'il est lié à n'importe quel tableau que vous passez et, lorsque vous ajoutez un élément au tableau, votre élément DOM se met automatiquement à jour. Vous pouvez aller plus loin et répéter non seulement les éléments DOM standard, mais également d'autres directives personnalisées. C'est pourquoi tu vois note collante comme attribut sur l'élément.

Il y a deux autres bits de code personnalisé qui doivent être clarifiés. Nous avons isolé la portée sur le notes autocollantes directive sur deux propriétés. Le premier est la portée isolée définie par la liaison sur le Remarque propriété. Cela signifie que chaque fois que l'objet note change dans la portée parent, il met automatiquement à jour l'objet note correspondant dans la directive et vice versa. L'autre portée isolée définie est sur le ondelete attribut. Cela signifie que lorsque ondelete est appelé dans la directive, il appellera toute expression dans le ondelete attribut sur l'élément DOM qui instancie la directive.

Lorsqu'une directive est instanciée, elle est ajoutée au DOM et la fonction de lien est appelée. C'est une opportunité parfaite pour définir des propriétés DOM par défaut sur l'élément. Le paramètre d'élément que nous transmettons est en fait un objet jQuery et nous pouvons donc y effectuer des opérations jQuery.

(AngularJS est en fait livré avec un sous-ensemble de jQuery intégré, mais si vous avez déjà inclus la version complète de jQuery, AngularJS s'en remettra à cela.)

app.directive ('stickyNote', function (socket) {
var linker = function (portée, élément, attrs) {
// Une initiation DOM pour le rendre agréable
element.css ("gauche", "10px");
element.css ("top", "50px");
element.hide (). fadeIn ();
};
});

Dans le code ci-dessus, nous positionnons simplement le pense-bête sur la scène et le fondons.

11.Suppression d'un pense-bête

Alors maintenant que nous pouvons ajouter et afficher une note autocollante, il est temps de supprimer les notes autocollantes. La création et la suppression de pense-bêtes consiste à ajouter et supprimer des éléments du tableau auquel les notes sont liées. C'est la responsabilité de la portée parent de maintenir ce tableau, c'est pourquoi nous émettons la demande de suppression à partir de la directive, mais laissons la portée parent faire le gros du travail.

C'est pourquoi nous nous sommes efforcés de créer une expression définie une portée isolée sur la directive: ainsi la directive pouvait recevoir l'événement de suppression en interne et le transmettre à son parent pour traitement.

Notez le HTML à l'intérieur de la directive.

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

La prochaine chose que je vais dire peut sembler longue, mais rappelez-vous que nous sommes du même côté et que cela aura du sens après avoir élaboré. Lorsque le bouton dans le coin supérieur droit du pense-bête est cliqué, nous appelons supprimerRemarque sur le contrôleur de la directive et en passant le note.id valeur. Le contrôleur appelle alors ondelete, qui exécute alors toute expression que nous lui avons câblée. Jusqu'ici tout va bien? Nous appelons une méthode locale sur le contrôleur qui la transmet ensuite en appelant toute expression définie dans la portée isolée. L'expression qui est appelée sur le parent se trouve juste être appelée supprimerRemarque ainsi que.

app.directive ('stickyNote', function (socket) {
var controller = function ($ scope) {
$ scope.deleteNote = fonction (id) {
$ scope.ondelete ({
J'ai fait
});
};
};

revenir {
restreindre: "A",
lien: éditeur de liens,
contrôleur: contrôleur,
portée: {
remarque: ’=’,
ondelete: ’&’
}
};
});

(Lors de l'utilisation de la portée isolée définie par expression, les paramètres sont envoyés dans une mappe d'objets.)

Dans la portée parent, supprimerRemarque est appelé et effectue une suppression assez standard en utilisant le angulaire.pourChaque fonction utilitaire pour parcourir le tableau des notes. Une fois que la fonction a géré ses affaires locales, elle continue et émet l'événement pour que le reste du monde réagisse en conséquence.

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

// Entrant
socket.on (’onNoteDeleted’, fonction (données) {
$ scope.deleteNote (data.id);
});

// Sortant
$ scope.deleteNote = fonction (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. Mise à jour d'un pense-bête

Nous faisons des progrès fantastiques! À présent, j’espère que vous commencez à voir des modèles émerger de cette tournée éclair que nous entreprenons. L'élément suivant de la liste est la fonction de mise à jour.

Nous allons commencer par les éléments DOM réels et les suivre jusqu'au serveur et revenir au client. Nous devons d'abord savoir quand le titre ou le corps du pense-bête est modifié. AngularJS traite les éléments de formulaire comme faisant partie du modèle de données afin que vous puissiez connecter une liaison de données bidirectionnelle en un clin d'œil. Pour ce faire, utilisez le modèle ng directive et insérez la propriété à laquelle vous souhaitez vous lier. Dans ce cas, nous allons utiliser note.title et note.body respectivement.

Lorsque l'une de ces propriétés change, nous voulons capturer ces informations pour les transmettre. Nous accomplissons cela avec le ng-change directive et utilisez-la pour appeler mise à jour et transmettez l'objet note lui-même. AngularJS effectue des vérifications très intelligentes pour détecter si la valeur de tout ce qui se trouve dans modèle ng a changé, puis exécute l'expression qui se trouve dans ng-change.

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

L'avantage de l'utilisation ng-change est que la transformation locale a déjà eu lieu et que nous sommes simplement responsables de relayer le message. Dans le contrôleur, mise à jour est appelé et à partir de là, nous allons émettre le mise à jour événement pour que notre serveur diffuse aux autres clients.

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

Et dans le contrôleur de directive, nous écoutons le onNoteUpdated événement pour savoir quand une note d'un autre client a été mise à jour afin que nous puissions mettre à jour notre version locale.

var controller = function ($ scope) {
// Entrant
socket.on ('onNoteUpdated', fonction (données) {
// Mettre à jour si la même note
if (data.id == $ scope.note.id) {

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

13. Déplacement d'un pense-bête

À ce stade, nous avons essentiellement fait un tour autour de la piscine pour enfants CRUD et la vie est belle! Juste pour une astuce de salon pour impressionner vos amis, nous allons ajouter la possibilité de déplacer des notes sur l'écran et de mettre à jour les coordonnées en temps réel. Ne paniquez pas, il ne s’agit que de quelques lignes de code supplémentaires. Tout ce travail acharné va porter ses fruits. Je promets!

Nous avons invité un invité spécial, jQueryUI, à la fête, et nous avons tout fait pour les draggables. L'ajout de la possibilité de faire glisser une note localement ne prend qu'une seule ligne de code. Si vous ajoutez element.draggable (); à votre fonction de liaison, vous commencerez à entendre «Eye of the Tiger» de Survivor car vous pouvez maintenant faire glisser vos notes.

Nous voulons savoir quand le glissement s'est arrêté et capturer les nouvelles coordonnées à transmettre. jQueryUI a été construit par des personnes très intelligentes, donc lorsque le glissement s'arrête, il vous suffit de définir une fonction de rappel pour l'événement d'arrêt. Nous prenons le note.id hors de l'objet scope et des valeurs CSS gauche et supérieure de la ui objet. Avec cette connaissance, nous faisons ce que nous avons toujours fait: émettre!

app.directive ('stickyNote', function (socket) {
var linker = function (portée, élément, attrs) {
element.draggable ({
stop: function (événement, ui) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', fonction (données) {
// Mettre à jour si la même note
if (data.id == scope.note.id) {
element.animate ({
à gauche: data.x,
haut: data.y
});
}
});
};
});

À ce stade, il n'est pas surprenant que nous soyons également à l'écoute d'un événement lié au déplacement depuis le service de socket. Dans ce cas, c'est le onNoteMoved événement et si la note correspond, nous mettons à jour les propriétés CSS gauche et supérieure. Bam! Fait!

14. Le bonus

C'est une section bonus que je n'inclurais pas si je n'étais pas absolument convaincu que vous pourriez y parvenir en moins de 10 minutes. Nous allons déployer sur un serveur en direct (je suis toujours étonné de voir à quel point c'est facile à faire).

Tout d'abord, vous devez vous inscrire pour un essai gratuit de Nodejitsu. L'essai est gratuit pendant 30 jours, ce qui est parfait pour vous mouiller les pieds.

Une fois que vous avez créé votre compte, vous devez installer le package jitsu, ce que vous pouvez faire à partir de la ligne de commande via $ npm installer jitsu -g.

Ensuite, vous devez vous connecter à partir de la ligne de commande via Connexion $ jitsu et entrez vos informations d'identification.

Assurez-vous que vous êtes directement dans votre application, saisissez $ jitsu déployer et parcourez les questions. Je laisse généralement autant de valeurs par défaut que possible, ce qui signifie que je donne à mon application un nom mais pas un sous-domaine, etc.

Et, mes chers amis, c'est tout ce qu'il y a à faire! Vous obtiendrez l'URL de votre application à partir de la sortie du serveur une fois qu'il aura déployé et qu'il sera prêt à fonctionner.

15. Conclusion

Nous avons couvert beaucoup de terrain AngularJS dans cet article et j'espère que vous vous êtes beaucoup amusé dans le processus. Je pense que c’est vraiment bien ce que vous pouvez accomplir avec AngularJS et Socket.io dans environ 200 lignes de code.

Il y avait quelques points que je n’ai pas abordés pour me concentrer sur les points principaux, mais je vous encourage à tirer la source vers le bas et à jouer avec l’application. Nous avons construit une base solide, mais il y a encore beaucoup de fonctionnalités que vous pouvez ajouter. Obtenez le piratage!

Lukas Ruebbelke est un passionné de technologie et co-écrit AngularJS in Action pour Manning Publications. Sa chose préférée à faire est de susciter autant d'enthousiasme que lui pour les nouvelles technologies. Il dirige le groupe d'utilisateurs de l'application Web Phoenix et a organisé plusieurs hackathons avec ses collègues partenaires dans le crime.

Aimait ça? Lisez-les!

• Comment créer une application
• Nos polices Web préférées - et elles ne coûtent pas un centime
• Découvrez les prochaines étapes de la réalité augmentée
• Téléchargez des textures gratuites: haute résolution et prêtes à l'emploi maintenant