Дошка співпраці AngularJS із Socket.io

Зміст

• 01. Сервер
• 02. Голі кістки
• 03. Заявіть про свої залежності
• 04. Підключіть розетку.io
• 05. Запустіть двигуни!
• 06. Кілька відвертих думок перед тим, як рухатись далі
• 07. Клієнт
• 08. Голі кістки
• 09. Створення наліпки
• 10. Відображення наліпок
• 11.Видалення наліпки
• 12. Оновлення липкої записки
• 13. Переміщення наліпки
• 14. Бонус
• 15. Висновок
• Сподобалось? Прочитайте це!

• Необхідні знання: Проміжний JavaScript
• Потрібно: Node.js, NPM
• Час проекту: 2 години

AngularJS особливо добре підходить для створення розширених додатків на стороні клієнта в браузері, і коли ви додаєте в мікс трохи Socket.io, все стає по-справжньому цікавим. У цій статті ми збираємося створити дошку для співпраці в режимі реального часу, яка використовує AngularJS для клієнтської програми та Socket.io для обміну станом між усіма підключеними клієнтами.

Розглянемо трохи ведення домашнього господарства, перш ніж розпочати. Я збираюся припустити, що ви добре знаєте HTML і JavaScript, оскільки я не буду охоплювати кожен маленький куточок коду. Наприклад, я не збираюся називати файли CSS та JavaScript, які я включив у заголовок файлу HTML, оскільки там немає нової інформації.

Крім того, я закликаю вас взяти код з мого облікового запису GitHub, щоб продовжити. У мого доброго друга Брайана Форда також є чудова насіння Socket.io, на якій я базував деякі свої оригінальні ідеї.

Чотири основні особливості, які ми хочемо в дошці для співпраці, - це можливість створювати нотатки, читати нотатки, оновлювати нотатки, видаляти нотатки та для розваги переміщати нотатки на дошці. Так, це правильно, ми зосереджуємося на стандартних CRUD-функціях. Я вважаю, що, зосередившись на цих фундаментальних особливостях, ми охопимо достатньо коду для появи шаблонів, щоб ви могли взяти їх і застосувати в іншому місці.

01. Сервер

Ми почнемо спочатку з сервера Node.js, оскільки він послужить фундаментом, на якому ми збираємось будувати все інше.

Ми збираємося створити сервер Node.js з Express та Socket.io. Причиною того, що ми використовуємо Express, є те, що він забезпечує приємний механізм налаштування статичного сервера активів у Node.js. Експрес має безліч чудових функцій, але в цьому випадку ми будемо використовувати його, щоб розподілити додаток між сервером і клієнтом.

(Я працюю, припускаючи, що у вас встановлені Node.js та NPM. Швидкий пошук у Google покаже, як їх встановити, якщо цього не зробити.)

02. Голі кістки

Отже, щоб створити голі кістки сервера, нам потрібно зробити кілька речей, щоб почати працювати.

// app.js

// А.1
var express = require (’express’),
app = express ();
server = require (‘http’). createServer (додаток),
io = require (’socket.io’). listen (сервер);

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

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

A.1 Ми оголошуємо та створюємо екземпляр наших модулів Node.js, щоб ми могли використовувати їх у своєму додатку. Ми оголошуємо Express, створюємо екземпляр Express, а потім створюємо HTTP-сервер і надсилаємо в нього екземпляр Express. А звідти ми створюємо примірник Socket.io і просимо його стежити за нашим екземпляром сервера.

A.2 Потім ми просимо наш додаток Express використовувати наш загальнодоступний каталог для обслуговування файлів.

A.3 Ми запускаємо сервер і просимо його прослуховувати через порт 1337.

Поки що це було досить безболісно та швидко. Я вважаю, що нам менше 10 рядків у коді, і ми вже маємо функціональний сервер Node.js. Вперед!

03. Заявіть про свої залежності

// пакети.json
{
"name": "кутова дошка",
"description": "Рада співпраці AngularJS",
"версія": "0.0.1-1",
"приватний": правда,
"залежності": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Однією з найкращих особливостей NPM є можливість оголосити свої залежності в пакети.json файл, а потім автоматично встановити їх через npm встановити у командному рядку.

04. Підключіть розетку.io

Ми вже визначили основні функції, які ми хочемо мати в програмі, і тому нам потрібно налаштувати прослуховувачі подій Socket.io та відповідне закриття для обробки події для кожної операції.

У наведеному нижче коді ви помітите, що це, по суті, конфігурація прослуховувачів подій та зворотних викликів. Перша подія - з'єднання подія, яку ми використовуємо для підключення інших наших подій до закриття.

io.sockets.on (‘підключення’, функція (сокет) {
socket.on ('createNote', функція (дані) {
socket.broadcast.emit (‘onNoteCreated’, дані);
});

socket.on (‘updateNote’, функція (дані) {
socket.broadcast.emit (‘onNoteUpdated’, дані);
});

socket.on ('deleteNote', функція (дані) {
socket.broadcast.emit (‘onNoteDeleted’, дані);
});

socket.on ('moveNote', функція (дані) {
socket.broadcast.emit (‘onNoteMoved’, дані);
});
});

Звідси ми додаємо слухачів createNote, updateNote, deleteПримітка і перемістити Примітка. А у функції зворотного виклику ми просто транслюємо, яка подія сталася, щоб будь-який прослуховуючий клієнт міг отримати сповіщення про те, що подія сталася.

Є кілька речей, на які варто звернути увагу щодо функцій зворотного виклику в окремих обробниках подій. По-перше, якщо ви хочете надіслати подію всім іншим, крім клієнта, який передав подію, яку ви вставили мовлення перед виділяти виклик функції. По-друге, ми просто передаємо корисне навантаження заходу зацікавленим сторонам, щоб вони могли обробити його, як вважають за потрібне.

05. Запустіть двигуни!

Тепер, коли ми визначили свої залежності та налаштували наш додаток Node.js із повноваженнями Express і Socket.io, ініціалізувати сервер Node.js досить просто.

Спочатку ви встановлюєте свої залежності Node.js так:

npm встановити

І тоді ви запускаєте сервер так:

вузол app.js

І потім! Ви переходите за цією адресою у своєму браузері. Бам!

06. Кілька відвертих думок перед тим, як рухатись далі

Я в основному розробник інтерфейсів, і спочатку мене трохи залякали підключенням сервера Node.js до мого додатка. Частина AngularJS була швидкою, але JavaScript на стороні сервера? Черга моторошної музики від фільму жахів.

Але мені було абсолютно зручно виявити, що я можу встановити статичний веб-сервер лише за кілька рядків коду, а ще за кілька рядків використовую Socket.io для обробки всіх подій між браузерами. І це все ще був просто JavaScript! Задля своєчасності ми розглядаємо лише деякі особливості, але я сподіваюся, що до кінця статті ви побачите, що плавати легко - і глибокий кінець басейну не такий вже і страшний.

07. Клієнт

Тепер, коли у нас є міцна основа з нашим сервером, перейдемо до моєї улюбленої частини - клієнта! Ми будемо використовувати AngularJS, jQueryUI для частини, що перетягується, та Twitter Bootstrap для основи стилю.

08. Голі кістки

Що стосується особистих уподобань, коли я запускаю нову програму AngularJS, мені подобається швидко визначати мінімальний мінімум, який, як я знаю, мені знадобиться, щоб розпочати, а потім починати ітерацію над цим якомога швидше.

Кожен додаток AngularJS повинен бути завантажений із принаймні одним контролером, тому я, як правило, тут завжди починаю.

Для автоматичного завантаження програми потрібно просто додати ng-app до вузла HTML, в якому ви хочете, щоб програма працювала. Здебільшого додавання його до HTML-тегу буде цілком прийнятним. Я також додав атрибут до ng-app сказати йому, що я хочу використовувати додаток модуль, який я визначу буквально за мить.

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

Я знаю, що мені знадобиться принаймні один контролер, і тому я покличу це за допомогою ng-контролер і присвоєння йому властивості MainCtrl.

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

Отож, ми вже готові до модуля з іменем додаток і контролер з іменем MainCtrl. Давайте продовжимо і створимо їх зараз.

Створення модуля досить просто. Ви визначаєте це за допомогою дзвінка кутовий.модуль і давши йому назву. Для подальшої довідки другим параметром порожнього масиву є те, де ви можете вводити підмодулі для використання в програмі. Це виходить за рамки цього підручника, але зручно, коли ваша програма починає зростати в міру ускладнення та потреб.

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

Ми збираємось оголосити кілька порожніх заповнювачів у додаток модуль, що починається з MainCtrl нижче.Ми все це заповнимо пізніше, але я хотів проілюструвати основну структуру з самого початку.

app.controller (‘MainCtrl’, функція ($ scope) {});

Ми також збираємось обернути функціонал Socket.io у файл розетка служби, щоб ми могли інкапсулювати цей об’єкт і не залишати його плаваючим у глобальному просторі імен.

app.factory (‘сокет’, функція ($ rootScope) {});

І поки ми це зробимо, ми збираємось оголосити директиву, яка називається липкий Примітка що ми будемо використовувати для інкапсуляції функцій липкої ноти в.

app.directive (’stickyNote’, функція (сокет) {});

Тож давайте розглянемо те, що ми зробили до цього часу. Ми завантажили програму за допомогою ng-app і оголосив наш контролер додатків у HTML. Ми також визначили модуль програми та створили MainCtrl контролер, розетка служби та липкий Примітка директива.

09. Створення наліпки

Тепер, коли у нас є скелет програми AngularJS, ми почнемо розробляти функцію створення.

app.controller (‘MainCtrl’, функція ($ scope, socket) {// B.1
$ scope.notes = []; // В.2

// Вхідний
socket.on (‘onNoteCreated’, функція (дані) {// B.3
$ scope.notes.push (дані);
});

// вихідний
$ scope.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
заголовок: 'Нова примітка',
body: „Очікує”
};

$ scope.notes.push (примітка);
socket.emit (‘createNote’, примітка);
};

B.1 AngularJS має вбудовану функцію введення залежностей, тому ми вводимо a $ сфера об'єкт і розетка обслуговування. $ сфера об'єкт служить ViewModel і в основному являє собою об'єкт JavaScript з деякими подіями, запеченими в ньому, щоб забезпечити двосторонню прив'язку даних.

B.2 Ми оголошуємо масив, в якому будемо використовувати прив'язку подання.

B.3 Ми додаємо слухача для onNoteCreated подія на розетка сервіс і висунення корисного навантаження події в $ scope.notes масив.

B.4 Ми оголосили: createNote метод, який створює за замовчуванням Примітка об'єкт і штовхає його в $ scope.notes масив. Він також використовує розетка послуга для випуску createNote події та передайте нова примітка об'єкт уздовж.

Отже, тепер, коли у нас є метод створення примітки, як ми це називаємо? Це хороше питання! У файл HTML ми додаємо вбудовану директиву AngularJS клацніть нг до кнопки, а потім додайте createNote виклик методу як значення атрибута.

button id = "createButton" ng-click = "createNote ()"> Створити примітку / кнопку>

Час для швидкого перегляду того, що ми зробили до цього часу. Ми додали масив до $ сфера об'єкт у MainCtrl що містить усі примітки до заявки. Ми також додали a createNote метод на $ сфера об'єкт, щоб створити нову локальну нотатку, а потім транслювати цю нотатку до інших клієнтів через розетка обслуговування. Ми також додали прослуховувач подій на розетка послуга, щоб ми могли знати, коли інші клієнти створили нотатку, щоб ми могли додати її до своєї колекції.

10. Відображення наліпок

Тепер у нас є можливість створити об’єкт нотатки та поділитися ним між браузерами, але як насправді відображати його? Тут з’являються директиви.

Директиви та їх хитросплетіння - велика тема, але коротка версія полягає в тому, що вони надають спосіб розширити елементи та атрибути за допомогою спеціальних функціональних можливостей. Директиви - це моя найулюбленіша частина про AngularJS, оскільки вона дозволяє по суті створити цілий DSL (доменна мова) навколо вашої програми в HTML.

Цілком природно, що оскільки ми збираємося створювати липкі нотатки для нашої ради співпраці, ми повинні створити липкий Примітка директива. Директиви визначаються викликом методу директиви в модулі, в якому ви хочете його оголосити, і передачею імені та функції, які повертають об'єкт визначення директиви. Об’єкт визначення директиви має безліч можливих властивостей, які ви можете визначити на ньому, але ми для цього використовуємо лише декілька.

Я рекомендую вам переглянути документацію AngularJS, щоб побачити цілі списки властивостей, які ви можете визначити в об'єкті визначення директиви.

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

контролер var = функція ($ scope) {};

повернути {
обмежити: ‘A’, // C.1
посилання: linker, // C.2
контролер: контролер, // C.3
обсяг: {// C.4
примітка: ’=’,
ondelete: ’&’
}
};
});

C.1 Ви можете обмежити свою директиву певним типом елемента HTML. Два найпоширеніші - це елемент або атрибут, який ви заявляєте, використовуючи Е і A відповідно. Ви також можете обмежити його класом CSS або коментарем, але це не так часто.

C.2 Функція посилання - це місце, куди ви поміщаєте весь код маніпуляції DOM. Є кілька винятків, які я знайшов, але це завжди правда (принаймні 99 відсотків часу). Це фундаментальне основне правило AngularJS, і саме тому я це наголосив.

C.3 Функція контролера працює так само, як основний контролер, який ми визначили для програми, але $ сфера об’єкт, який ми передаємо, є специфічним для елемента DOM, на якому живе директива.

C.4 AngularJS має концепцію ізольованої області дії, яка дозволяє чітко визначити, як сфера дії директиви взаємодіє із зовнішнім світом. Якби ми не оголосили сферу дії, директива неявно успадкувала б від батьківської області взаємозв'язку батьків і дітей. У багатьох випадках це не є оптимальним. Виділяючи сферу застосування, ми зменшуємо шанси того, що зовнішній світ може ненавмисно та негативно вплинути на стан вашої директиви.

Я оголосив двосторонню прив'язку даних до Примітка за допомогою = символ та вираз, прив'язаний до відновити за допомогою & символ. Будь ласка, прочитайте документацію AngularJS, щоб отримати повне пояснення ізольованого обсягу, оскільки це одна із найскладніших тем у рамках.

Тож давайте насправді додамо липку нотатку до DOM.

Як і будь-який хороший фреймворк, AngularJS має кілька справді чудових функцій прямо зараз. Однією з найзручніших функцій є нг-повторити. Ця директива AngularJS дозволяє передавати масив об'єктів і дублює будь-який тег, на якому він знаходиться, стільки разів, скільки елементів у масиві. У наведеному нижче випадку ми робимо ітерацію над нотатки і дублювання файлу див елемента та його нащадків на довжину нотатки масив.

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.body}} / textarea>
/ div>

Краса Росії нг-повторити полягає в тому, що він прив’язаний до будь-якого масиву, який ви передаєте, і, коли ви додаєте елемент до масиву, ваш елемент DOM автоматично оновлюється. Ви можете зробити цей крок далі і повторити не тільки стандартні елементи DOM, але й інші користувацькі директиви. Ось чому ти бачиш наліпка як атрибут елемента.

Є ще два біти користувацького коду, які потрібно уточнити. Ми виділили область застосування на замітки директива про дві властивості. Перший - це прив'язка визначеної ізольованої області на Примітка майно. Це означає, що всякий раз, коли об’єкт примітки змінюється в батьківській області, він автоматично оновлює відповідний об’єкт примітки в директиві і навпаки. Інший визначений ізольований обсяг знаходиться на відновити атрибут. Це означає, що коли відновити викликається в директиві, вона буде викликати будь-який вираз, що міститься в відновити атрибут елемента DOM, який створює екземпляр директиви.

Коли інстанціюється директива, вона додається до DOM і викликається функція зв’язку. Це чудова можливість встановити деякі властивості DOM за замовчуванням для елемента. Параметр елемента, який ми передаємо, насправді є об’єктом jQuery, тому ми можемо виконувати над ним операції jQuery.

(AngularJS насправді має вбудовану в нього підмножину jQuery, але якщо ви вже включили повну версію jQuery, AngularJS відповідатиме цьому.)

app.directive (’stickyNote’, function (socket) {
var linker = function (scope, element, attrs) {
// Деякі ініціації DOM, щоб зробити це приємно
element.css («ліворуч», «10 пікс.»);
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

У наведеному вище коді ми просто розміщуємо липку записку на сцені і вицвітаємо.

11.Видалення наліпки

Отже, тепер, коли ми можемо додавати та відображати липку нотатку, настав час їх видалити. Створення та видалення липких нотаток - це питання додавання та видалення елементів із масиву, до якого нотатки прив’язані. Це відповідальність батьківської області для підтримання цього масиву, саме тому ми беремо початок запиту на видалення з директиви, але нехай батьківська область робить фактичну важку роботу.

Ось чому ми пройшли через усі труднощі зі створенням визначеного виразом ізольованого обсягу в директиві: так директива могла приймати подію delete внутрішньо і передавати її своєму батькові для обробки.

Зверніть увагу на HTML всередині директиви.

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

Наступне, що я збираюся сказати, може здатися довгим шляхом, але пам’ятайте, що ми на одній стороні, і це матиме сенс після того, як я детально розберусь. Коли натискається кнопка у верхньому правому куті наліпки, ми телефонуємо deleteПримітка на контролері директиви та передачі в note.id значення. Потім контролер дзвонить відновити, який потім виконує будь-який вираз, який ми до нього підключили. Все йде нормально? Ми викликаємо локальний метод на контролері, який потім передає його, викликаючи будь-який вираз, визначений в ізольованій області. Вираз, який викликається у батьків, просто викликається deleteПримітка так само.

app.directive (’stickyNote’, function (socket) {
контролер var = функція ($ scope) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
я робив
});
};
};

повернути {
обмежити: 'A',
посилання: linker,
контролер: контролер,
сфера: {
примітка: ’=’,
ondelete: ’&’
}
};
});

(При використанні визначеної виразом ізольованої області дії параметри надсилаються на карту об’єктів.)

У батьківській області, deleteПримітка викликається і виконує досить стандартне видалення за допомогою кутовий. для кожного функція утиліти для перебору масиву нот. Як тільки функція впорається з місцевим бізнесом, вона продовжує і випускає подію для решти світу, щоб реагувати відповідним чином.

app.controller (‘MainCtrl’, функція ($ scope, socket) {
$ scope.notes = [];

// Вхідний
socket.on (‘onNoteDeleted’, функція (дані) {
$ scope.deleteNote (data.id);
});

// вихідний
$ scope.deleteNote = function (id) {
var oldNotes = $ scope.notes,
newNotes = [];

angular.forEach (oldNotes, function (note) {
if (note.id! == id) newNotes.push (примітка);
});

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

12. Оновлення липкої записки

Ми досягаємо фантастичного прогресу! На даний момент я сподіваюся, що ви починаєте бачити деякі закономірності, що випливають із цього вихрового туру, який ми проводимо. Наступним пунктом у списку є функція оновлення.

Ми почнемо з фактичних елементів DOM і прослідкуємо за ними аж до сервера та назад до клієнта. Спочатку нам потрібно знати, коли змінюється заголовок чи текст наліпки. AngularJS трактує елементи форми як частину моделі даних, щоб ви могли швидко підключити двостороннє прив'язку даних. Для цього використовуйте ng-модель директиву та вставте властивість, до якої ви хочете прив’язати. У цьому випадку ми будемо використовувати примітка.заголовок і note.body відповідно.

Коли будь-яке з цих властивостей змінюється, ми хочемо зафіксувати цю інформацію для передачі. Ми досягаємо цього за допомогою нг-зміна директиву і використовувати його для виклику updateNote і передайте сам об’єкт примітки. AngularJS робить дуже розумну перевірку бруду, щоб виявити, чи є значення будь-якого значення ng-модель змінився, а потім виконує вираз, який є в нг-зміна.

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

Перевага використання нг-зміна полягає в тому, що локальна трансформація вже відбулася, і ми просто відповідаємо за передачу повідомлення. У контролері, updateNote називається, і звідти ми збираємося випускати updateNote подія для нашого сервера для трансляції для інших клієнтів.

app.directive (’stickyNote’, function (socket) {
контролер var = функція ($ scope) {
$ scope.updateNote = функція (примітка) {
socket.emit (‘updateNote’, примітка);
};
};
});

І в контролері директив ми слухаємо onNoteUpdated подія, щоб знати, коли оновлення нотатки від іншого клієнта оновилося, щоб ми могли оновити нашу локальну версію.

контролер var = функція ($ scope) {
// Вхідний
socket.on (‘onNoteUpdated’, функція (дані) {
// Оновлення, якщо та сама примітка
if (data.id == $ scope.note.id) {

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

13. Переміщення наліпки

На цьому етапі ми в основному зробили коло навколо CRUD дитячого басейну, і життя добре! Тільки задля приємного трюку, щоб вразити своїх друзів, ми додамо можливість переміщати нотатки по екрану та оновлювати координати в режимі реального часу. Не панікуйте - це лише кілька рядків коду. Вся ця важка праця окупиться. Я обіцяю!

Ми запросили на вечірку спеціального гостя, jQueryUI, і зробили все це для перетягувань. Додавання можливості перетягування примітки локально займає лише один рядок коду. Якщо ви додасте element.draggable (); до функції зв’язування ви почнете чути «Око тигра» від Survivor, тому що тепер ви можете перетягувати свої нотатки.

Ми хочемо знати, коли перетягування зупинилося, і зафіксувати нові координати для передачі. jQueryUI був побудований деякими дуже розумними людьми, тому, коли перетягування зупиняється, вам просто потрібно визначити функцію зворотного виклику для події зупинки. Ми захоплюємо note.id від об'єкта сфери дії та лівого та верхнього значень CSS з користувацький інтерфейс об'єкт. З цими знаннями ми робимо те, що робили весь час: випромінюємо!

app.directive (’stickyNote’, function (socket) {
var linker = function (scope, element, attrs) {
element.draggable ({
stop: function (event, ui) {
socket.emit ('moveNote', {
ідентифікатор: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (‘onNoteMoved’, функція (дані) {
// Оновлення, якщо та сама примітка
if (data.id == scope.note.id) {
element.animate ({
ліворуч: data.x,
зверху: дані.y
});
}
});
};
});

На цьому етапі не повинно бути несподіванкою, що ми також слухаємо подію, пов’язану з переїздом, із сервісу socket. У цьому випадку це onNoteMoved подія, і якщо примітка збігається, ми оновлюємо ліві та верхні властивості CSS. Бам! Готово!

14. Бонус

Це розділ бонусів, якого я б не включив, якби я не був абсолютно впевнений, що ви зможете його досягти менш ніж за 10 хвилин. Ми збираємось розгортатись на реальному сервері (я все ще вражений тим, як легко це зробити).

По-перше, вам потрібно підписатися на безкоштовну пробну версію Nodejitsu. Пробна версія безкоштовна протягом 30 днів, що ідеально підходить для промокання ніг.

Після створення облікового запису вам потрібно встановити пакет джитсу, що можна зробити з командного рядка через $ npm встановити джитсу -g.

Потім вам потрібно увійти в систему з командного рядка через $ jitsu login і введіть свої дані.

Переконайтесь, що ви знаходитесь безпосередньо у своєму додатку, введіть Розгортання $ jitsu і крок за запитаннями. Зазвичай я залишаю якомога більше за замовчуванням, що означає, що я даю своїй програмі ім'я, але не субдомен тощо.

І, мої дорогі друзі, це все! Ви отримаєте URL-адресу вашого додатка з вихідних даних сервера, як тільки він буде розгорнутий і готовий до роботи.

15. Висновок

У цій статті ми висвітлили багато питань AngularJS, і, сподіваюся, вам було дуже цікаво в процесі. Я думаю, це дуже акуратно, що ви можете досягти за допомогою AngularJS та Socket.io приблизно за 200 рядків коду.

Було кілька речей, які я не висвітлював задля зосередження на основних моментах, але я закликаю вас витягнути джерело та пограти з додатком. Ми створили міцну основу, але є ще багато можливостей, які ви можете додати. Отримайте хакерство!

Лукас Рюббельке - ентузіаст технологій і є співавтором AngularJS in Action for Manning Publications. Його улюблена справа - це так само захопити людей новими технологіями, як і він. Він керує групою користувачів веб-додатків Фенікс і проводив кілька хакатонів зі своїми колегами-злочинцями.

Сподобалось? Прочитайте це!

• Як зробити додаток
• Наші улюблені веб-шрифти - і вони не коштують ні копійки
• Дізнайтеся, що буде далі з доповненою реальністю
• Завантажте безкоштовні текстури: висока роздільна здатність і готові до використання зараз