Papan kolaborasi AngularJS dengan Socket.io

Pengarang: Peter Berry

Tanggal Pembuatan: 14 Juli 2021

Tanggal Pembaruan: 13 Boleh 2024

Video: Develop Collaborative White Board : Web socket, Node JS & React JS

Isi

01. Server
02. Tulang telanjang
03. Nyatakan ketergantungan Anda
04. Hubungkan Socket.io
05. Nyalakan mesin Anda!
06. Beberapa pemikiran jujur sebelum melanjutkan
07. Klien
08. Tulang telanjang
09. Membuat catatan tempel
10. Menampilkan catatan tempel
11. Menghapus catatan tempel
12. Memperbarui catatan tempel
13. Memindahkan catatan tempel
14. Bonus
15. Kesimpulan
Suka ini? Baca ini!

Pengetahuan yang dibutuhkan: JavaScript Menengah
Membutuhkan: Node.js, NPM
Waktu Proyek: 2 jam

AngularJS sangat cocok untuk membuat aplikasi sisi klien yang kaya di browser dan, ketika Anda menambahkan sedikit Socket.io ke dalam campuran, semuanya menjadi sangat menarik. Pada artikel ini kita akan membuat papan kolaborasi waktu nyata yang menggunakan AngularJS untuk aplikasi sisi klien dan Socket.io untuk berbagi status antara semua klien yang terhubung.

Mari kita bahas sedikit pekerjaan rumah tangga sebelum kita mulai. Saya akan berasumsi bahwa Anda memiliki pemahaman mendasar tentang HTML dan JavaScript karena saya tidak akan membahas setiap sudut kecil kode. Misalnya, saya tidak akan memanggil file CSS dan JavaScript yang telah saya sertakan di bagian atas file HTML karena tidak ada informasi baru di sana.

Juga, saya mendorong Anda untuk mengambil kode dari akun GitHub saya untuk mengikuti. Teman baik saya Brian Ford juga memiliki benih Socket.io yang sangat baik, yang menjadi dasar beberapa ide orisinal saya.

Empat fitur utama yang kami inginkan di papan kolaborasi adalah kemampuan untuk membuat catatan, membaca catatan, memperbarui catatan, menghapus catatan dan, untuk bersenang-senang, memindahkan catatan di papan tulis. Ya, benar, kami berfokus pada fitur CRUD standar. Saya percaya bahwa dengan berfokus pada fitur-fitur fundamental ini, kita akan membahas cukup banyak kode agar pola muncul sehingga Anda dapat mengambilnya dan menerapkannya di tempat lain.

01. Server

Kita akan mulai dengan server Node.js terlebih dahulu karena ini akan berfungsi sebagai fondasi yang akan kita gunakan untuk membangun semua yang lain.

Kami akan membangun server Node.js dengan Express dan Socket.io. Alasan kami menggunakan Express adalah karena ia menyediakan mekanisme yang bagus untuk menyiapkan server aset statis dalam Node.js. Express hadir dengan banyak fitur yang sangat mengagumkan, tetapi dalam hal ini, kami akan menggunakannya untuk membagi aplikasi secara rapi antara server dan klien.

(Saya beroperasi dengan asumsi bahwa Anda telah memasang Node.js dan NPM. Pencarian Google cepat akan menunjukkan kepada Anda bagaimana cara memasangnya jika Anda belum memasangnya.)

02. Tulang telanjang

Jadi untuk membangun tulang punggung server, kita perlu melakukan beberapa hal untuk bangun dan berjalan.

// app.js

// A.1
var express = membutuhkan ('express'),
app = express ();
server = membutuhkan (’http’). createServer (app),
io = membutuhkan (’socket.io’). dengar (server);

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

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

A.1 Kami mendeklarasikan dan membuat instance modul Node.js kami sehingga kami dapat menggunakannya dalam aplikasi kami. Kami mendeklarasikan Express, membuat instance Express lalu membuat server HTTP dan mengirimkan instance Express ke dalamnya. Dan dari sana kami membuat instance Socket.io dan memintanya untuk mengawasi instance server kami.

A.2 Kemudian kami memberi tahu aplikasi Express kami untuk menggunakan direktori publik kami untuk melayani file.

A.3 Kami memulai server dan memintanya untuk mendengarkan di port 1337.

Sejauh ini hal itu tidak menimbulkan rasa sakit dan cepat. Saya yakin kita kurang dari 10 baris ke dalam kode dan kita sudah memiliki server Node.js yang berfungsi. Maju!

03. Nyatakan ketergantungan Anda

// packages.json
{
"name": "angular-collab-board",
"description": "AngularJS Collaboration Board",
"versi": "0.0.1-1",
"pribadi": benar,
"ketergantungan": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Salah satu fitur terbaik dari NPM adalah kemampuannya untuk mendeklarasikan dependensi Anda dalam file package.json file dan kemudian secara otomatis menginstalnya melalui npm install di baris perintah.

04. Hubungkan Socket.io

Kami telah mendefinisikan fitur inti yang kami inginkan dalam aplikasi dan jadi kami perlu menyiapkan pendengar acara Socket.io dan penutupan yang sesuai untuk menangani acara untuk setiap operasi.

Pada kode di bawah ini, Anda akan melihat bahwa pada dasarnya ini adalah konfigurasi pemroses peristiwa dan callback. Acara pertama adalah koneksi acara, yang kami gunakan untuk memasang acara kami lainnya di penutupan.

io.sockets.on ('koneksi', fungsi (soket) {
socket.on (’createNote’, function (data) {
socket.broadcast.emit (’onNoteCreated’, data);
});

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

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

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

Dari sini kami menambahkan pendengar ke createNote, updateNote, deleteNote dan moveNote. Dan dalam fungsi panggilan balik, kami hanya menyiarkan peristiwa apa yang terjadi sehingga setiap klien yang mendengarkan dapat diberi tahu bahwa peristiwa tersebut terjadi.

Ada beberapa hal yang perlu diperhatikan tentang fungsi callback di event handler individu. Satu, jika Anda ingin mengirim acara ke orang lain kecuali klien yang mengeluarkan acara yang Anda masukkan siaran sebelum memancarkan panggilan fungsi. Kedua, kami hanya meneruskan muatan acara kepada pihak yang berkepentingan sehingga mereka dapat memprosesnya sesuai keinginan mereka.

05. Nyalakan mesin Anda!

Sekarang setelah kita mendefinisikan dependensi dan menyiapkan aplikasi Node.js dengan kekuatan Express dan Socket.io, cukup mudah untuk menginisialisasi server Node.js.

Pertama Anda menginstal dependensi Node.js Anda seperti ini:

npm install

Dan kemudian Anda memulai server seperti ini:

node app.js

Lalu! Anda pergi ke alamat ini di browser Anda. Bam!

06. Beberapa pemikiran jujur sebelum melanjutkan

Saya pada dasarnya adalah pengembang frontend dan awalnya saya sedikit terintimidasi dengan menghubungkan server Node.js ke aplikasi saya. Bagian AngularJS mudah, tetapi JavaScript sisi server? Mengantre musik menyeramkan dari film horor.

Tapi, saya benar-benar terkejut menemukan bahwa saya dapat mengatur server web statis hanya dalam beberapa baris kode dan dalam beberapa baris lagi menggunakan Socket.io untuk menangani semua kejadian di antara browser. Dan itu masih hanya JavaScript! Demi ketepatan waktu, kami hanya membahas beberapa fitur, tetapi saya harap di akhir artikel Anda akan melihat bahwa berenang mudah - dan kedalaman kolam tidak begitu menakutkan.

07. Klien

Sekarang setelah kita memiliki dasar yang kuat dengan server kita, mari beralih ke bagian favorit saya - klien! Kami akan menggunakan AngularJS, jQueryUI untuk bagian yang dapat diseret dan Twitter Bootstrap untuk basis gaya.

08. Tulang telanjang

Mengenai preferensi pribadi, ketika saya memulai aplikasi AngularJS baru, saya ingin dengan cepat mendefinisikan minimal minimal yang saya tahu saya akan perlu untuk memulai dan kemudian mulai mengulanginya secepat mungkin.

Setiap aplikasi AngularJS perlu di-bootstrap dengan setidaknya satu pengontrol yang ada, jadi di sinilah saya selalu memulai.

Untuk mem-bootstrap aplikasi secara otomatis, Anda hanya perlu menambahkan ng-aplikasi ke node HTML tempat Anda ingin menjalankan aplikasi. Seringkali, menambahkannya ke tag HTML akan sangat diterima. Saya juga menambahkan atribut ke ng-aplikasi untuk mengatakan bahwa saya ingin menggunakan aplikasi modul, yang akan saya jelaskan sebentar lagi.

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

Saya tahu saya akan membutuhkan setidaknya satu pengontrol dan saya akan menyebutnya menggunakan ng-controller dan menetapkannya sebagai properti MainCtrl.

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

Jadi sekarang kita siap untuk modul bernama aplikasi dan pengontrol bernama MainCtrl. Mari kita lanjutkan dan buat sekarang.

Membuat modul cukup mudah. Anda mendefinisikannya dengan menelepon angular.module dan memberinya nama. Untuk referensi di masa mendatang, parameter kedua dari larik kosong adalah tempat Anda dapat memasukkan sub-modul untuk digunakan dalam aplikasi. Ini berada di luar cakupan tutorial ini, tetapi berguna ketika aplikasi Anda mulai berkembang dalam kompleksitas dan kebutuhan.

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

Kami akan mengumumkan beberapa placeholder kosong di aplikasi modul dimulai dengan MainCtrl di bawah.Kita akan mengisi semua ini nanti tetapi saya ingin mengilustrasikan struktur dasar dari awal.

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

Kami juga akan membungkus fungsionalitas Socket.io dalam file stopkontak layanan sehingga kita dapat merangkum objek itu dan tidak membiarkannya mengambang di namespace global.

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

Dan sementara kita melakukannya, kita akan mendeklarasikan perintah yang dipanggil pesan tempel yang akan kita gunakan untuk merangkum fungsionalitas catatan tempel di.

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

Jadi mari kita ulas apa yang telah kita lakukan selama ini. Kami telah mem-bootstrap aplikasi menggunakan ng-aplikasi dan mendeklarasikan pengontrol aplikasi kami di HTML. Kami juga telah menentukan modul aplikasi dan membuat MainCtrl pengontrol, itu stopkontak layanan dan pesan tempel pengarahan.

09. Membuat catatan tempel

Sekarang kita memiliki kerangka aplikasi AngularJS, kita akan mulai membangun fitur pembuatan.

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

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

// Keluar
$ scope.createNote = function () {// B.4
var note = {
id: Tanggal baru (). getTime (),
judul: 'Catatan Baru',
body: 'Tertunda'
};

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

B.1 AngularJS memiliki fitur injeksi ketergantungan yang terpasang di dalamnya sehingga kami memasukkan a $ scope objek dan stopkontak layanan. Itu $ scope objek berfungsi sebagai ViewModel dan pada dasarnya adalah objek JavaScript dengan beberapa peristiwa yang dimasukkan ke dalamnya untuk mengaktifkan penyatuan data dua arah.

B.2 Kami mendeklarasikan larik yang akan kami gunakan untuk mengikat tampilan.

B.3 Kami menambahkan pendengar untuk onNoteCreated acara di stopkontak layanan dan mendorong payload acara ke $ scope.notes Himpunan.

B.4 Kami telah mendeklarasikan a createNote metode yang membuat default catatan objek dan mendorongnya ke dalam $ scope.notes Himpunan. Ini juga menggunakan stopkontak layanan untuk memancarkan createNote acara dan lulus catatan baru keberatan bersama.

Jadi sekarang kita memiliki metode untuk membuat catatan, bagaimana kita menyebutnya? Itu pertanyaan yang bagus! Di file HTML, kami menambahkan direktif AngularJS bawaan ng-klik ke tombol lalu tambahkan createNote panggilan metode sebagai nilai atribut.

tombol id = "createButton" ng-click = "createNote ()"> Buat Catatan / tombol>

Saatnya meninjau singkat tentang apa yang telah kita lakukan sejauh ini. Kami telah menambahkan larik ke $ scope objek di MainCtrl yang akan menampung semua catatan untuk aplikasi tersebut. Kami juga menambahkan file createNote metode di $ scope objek untuk membuat catatan lokal baru dan kemudian menyiarkan catatan itu ke klien lain melalui stopkontak layanan. Kami juga telah menambahkan pendengar acara di stopkontak layanan sehingga kami dapat mengetahui ketika klien lain telah membuat catatan sehingga kami dapat menambahkannya ke koleksi kami.

10. Menampilkan catatan tempel

Kami sekarang memiliki kemampuan untuk membuat objek catatan dan membagikannya di antara browser, tetapi bagaimana kami sebenarnya menampilkannya? Di sinilah arahan masuk.

Arahan dan kerumitannya adalah subjek yang luas, tetapi versi singkatnya adalah bahwa mereka menyediakan cara untuk memperluas elemen dan atribut dengan fungsionalitas khusus. Direktif adalah bagian favorit saya tentang AngularJS karena pada dasarnya memungkinkan Anda untuk membuat seluruh DSL (Domain Specific Language) di sekitar aplikasi Anda dalam HTML.

Wajar jika karena kami akan membuat catatan tempel untuk papan kolaborasi kami, kami harus membuat file pesan tempel pengarahan. Direktif didefinisikan dengan memanggil metode direktif pada modul tempat Anda ingin mendeklarasikannya dan meneruskan nama dan fungsi yang mengembalikan objek definisi direktif. Objek definisi direktif memiliki banyak kemungkinan properti yang dapat Anda tentukan di atasnya, tetapi kami akan menggunakan hanya beberapa untuk tujuan kami di sini.

Saya menyarankan Anda memeriksa dokumentasi AngularJS untuk melihat seluruh daftar properti yang dapat Anda tentukan pada objek definisi direktif.

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

var controller = function ($ scope) {};

kembali {
batasi: ’A’, // C.1
link: linker, // C.2
controller: controller, // C.3
cakupan: {// C.4
catatan: ’=’,
ondelete: ’&’
}
};
});

C.1 Anda dapat membatasi arahan Anda ke jenis elemen HTML tertentu. Dua yang paling umum adalah elemen atau atribut, yang Anda nyatakan menggunakan E dan SEBUAH masing-masing. Anda juga dapat membatasinya untuk kelas CSS atau komentar, tetapi ini tidak umum.

C.2 Fungsi tautan adalah tempat Anda meletakkan semua kode manipulasi DOM Anda. Ada beberapa pengecualian yang saya temukan, tetapi ini selalu benar (setidaknya 99 persen dari waktu). Ini adalah aturan dasar yang mendasar dari AngularJS dan itulah mengapa saya menekankannya.

C.3 Fungsi pengontrol bekerja seperti pengontrol utama yang kita definisikan untuk aplikasi tetapi $ scope objek yang kami sampaikan khusus untuk elemen DOM tempat perintah tersebut berada.

C.4 AngularJS memiliki konsep lingkup terisolasi, yang memungkinkan Anda untuk secara eksplisit menentukan bagaimana ruang lingkup direktif berkomunikasi dengan dunia luar. Jika kita tidak mendeklarasikan scope, direktif akan secara implisit diwarisi dari lingkup induk dengan hubungan orangtua-anak. Dalam banyak kasus, ini tidak optimal. Dengan mengisolasi ruang lingkup, kami mengurangi kemungkinan bahwa dunia luar dapat secara tidak sengaja dan berdampak buruk pada status arahan Anda.

Saya telah menyatakan pengikatan data dua arah ke catatan dengan = simbol dan ekspresi yang mengikat ondelete dengan & simbol. Silakan baca dokumentasi AngularJS untuk penjelasan lengkap tentang lingkup terisolasi karena ini adalah salah satu subjek yang lebih rumit dalam kerangka kerja.

Jadi mari kita tambahkan catatan tempel ke DOM.

Seperti kerangka kerja yang bagus, AngularJS hadir dengan beberapa fitur hebat langsung dari kotak. Salah satu fitur yang paling berguna adalah ng-ulangi. Direktif AngularJS ini memungkinkan Anda untuk mengirimkan larik objek dan menduplikasi tag apa pun yang ada di dalamnya sebanyak item dalam larik. Dalam kasus di bawah ini, kami mengulangi catatan array dan menduplikasi file div elemen dan turunannya untuk panjang catatan Himpunan.

div sticky-note ng-repeat = "catatan dalam catatan" note = "note" ondelete = "deleteNote (id)">
tombol type = "button" ng-click = "deleteNote (note.id)"> × / button>
masukan ng-model = "note.title" ng-change = "updateNote (catatan)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (catatan)"
> {{note.body}} / textarea>
/ div>

Keindahan ng-ulangi adalah bahwa ia terikat ke larik apa pun yang Anda berikan dan, saat Anda menambahkan item ke larik, elemen DOM Anda akan diperbarui secara otomatis. Anda dapat mengambil langkah lebih jauh dan mengulangi tidak hanya elemen DOM standar tetapi juga arahan khusus lainnya. Itulah mengapa Anda melihat pesan tempel sebagai atribut pada elemen.

Ada dua bit kode khusus lainnya yang perlu diklarifikasi. Kami telah mengisolasi ruang lingkup pada catatan tempel direktif pada dua properti. Yang pertama adalah lingkup terisolasi yang ditetapkan mengikat pada catatan Properti. Ini berarti bahwa setiap kali objek note berubah dalam lingkup induk, itu akan secara otomatis memperbarui objek note yang sesuai di direktif dan sebaliknya. Lingkup terisolasi lain yang ditentukan ada di ondelete atribut. Artinya adalah kapan ondelete disebut di direktif, itu akan memanggil ekspresi apa pun yang ada di ondelete atribut pada elemen DOM yang memberi contoh direktif.

Saat direktif dibuat, itu ditambahkan ke DOM dan fungsi tautan dipanggil. Ini adalah kesempatan sempurna untuk menyetel beberapa properti DOM default pada elemen. Parameter elemen yang kita kirimkan sebenarnya adalah objek jQuery sehingga kita dapat melakukan operasi jQuery padanya.

(AngularJS sebenarnya hadir dengan subset dari jQuery yang dibangun di dalamnya tetapi jika Anda telah menyertakan versi lengkap jQuery, AngularJS akan tunduk padanya.)

app.directive (’stickyNote’, function (socket) {
var linker = function (scope, element, attrs) {
// Beberapa inisiasi DOM untuk membuatnya bagus
element.css ('left', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

Dalam kode di atas kita hanya memposisikan catatan tempel di atas panggung dan memudarkannya.

11. Menghapus catatan tempel

Jadi sekarang kita dapat menambahkan dan menampilkan catatan tempel, sekarang saatnya untuk menghapus catatan tempel. Pembuatan dan penghapusan catatan tempel adalah masalah menambah dan menghapus item dari larik tempat catatan terikat. Ini adalah tanggung jawab lingkup induk untuk mempertahankan larik itu, itulah sebabnya kita membuat permintaan hapus dari dalam direktif, tetapi biarkan lingkup induk melakukan pengangkatan berat yang sebenarnya.

Inilah sebabnya mengapa kami mengalami semua masalah dalam membuat ekspresi terdefinisi cakupan terisolasi pada direktif: sehingga direktif dapat menerima peristiwa delete secara internal dan meneruskannya ke induknya untuk diproses.

Perhatikan HTML di dalam direktif.

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

Hal berikutnya yang akan saya katakan mungkin tampak jauh, tetapi ingat kita berada di sisi yang sama dan itu akan masuk akal setelah saya menjelaskannya. Ketika tombol di sudut kanan atas catatan tempel diklik, kami memanggil deleteNote pada pengontrol direktif dan meneruskan file note.id nilai. Pengontrol kemudian memanggil ondelete, yang kemudian mengeksekusi ekspresi apa pun yang kami sambungkan. Sejauh ini bagus? Kami memanggil metode lokal pada pengontrol yang kemudian menyerahkannya dengan memanggil ekspresi apa pun yang didefinisikan dalam cakupan yang terisolasi. Ekspresi yang dipanggil pada orang tua kebetulan dipanggil deleteNote demikian juga.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ scope) {
$ scope.deleteNote = function (id) {
$ scope.ondelete ({
aku melakukannya
});
};
};

kembali {
batasi: ’A’,
link: linker,
pengontrol: pengontrol,
cakupan: {
catatan: ’=’,
ondelete: ’&’
}
};
});

(Saat menggunakan cakupan terisolasi yang ditentukan ekspresi, parameter dikirim dalam peta objek.)

Dalam lingkup induk, deleteNote dipanggil dan melakukan penghapusan yang cukup standar menggunakan angular.forEach fungsi utilitas untuk mengulang di atas larik notes. Setelah fungsi tersebut menangani bisnis lokalnya, fungsi tersebut akan melanjutkan dan memancarkan acara tersebut ke seluruh dunia untuk bereaksi sesuai dengan itu.

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

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

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

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

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

12. Memperbarui catatan tempel

Kami membuat kemajuan yang luar biasa! Sekarang saya harap Anda mulai melihat beberapa pola yang muncul dari tur angin puyuh yang kami lakukan ini. Item berikutnya dalam daftar adalah fitur pembaruan.

Kita akan mulai dari elemen DOM yang sebenarnya dan menindaklanjutinya sampai ke server dan kembali ke klien. Pertama kita perlu tahu kapan judul atau badan catatan tempel diubah. AngularJS memperlakukan elemen formulir sebagai bagian dari model data sehingga Anda bisa menghubungkan pengikatan data dua arah dalam sekejap. Untuk melakukan ini gunakan ng-model direktif dan dimasukkan ke dalam properti yang ingin Anda ikat. Dalam hal ini kami akan menggunakan note.title dan note.body masing-masing.

Ketika salah satu dari properti ini berubah, kami ingin menangkap informasi itu untuk diteruskan. Kami mencapai ini dengan ng-berubah direktif dan menggunakannya untuk menelepon updateNote dan meneruskan objek catatan itu sendiri. AngularJS melakukan pemeriksaan kotor yang sangat cerdik untuk mendeteksi apakah ada nilai yang masuk ng-model telah berubah dan kemudian mengeksekusi ekspresi yang ada di dalam ng-berubah.

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

Keuntungan penggunaan ng-berubah adalah bahwa transformasi lokal telah terjadi dan kami hanya bertanggung jawab untuk menyampaikan pesan tersebut. Di pengontrol, updateNote dipanggil dan dari sana kami akan memancarkan updateNote acara untuk server kami untuk disiarkan ke klien lain.

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

Dan di pengontrol direktif, kami mendengarkan onNoteUpdated acara untuk mengetahui ketika catatan dari klien lain telah diperbarui sehingga kami dapat memperbarui versi lokal kami.

13. Memindahkan catatan tempel

Pada titik ini kita pada dasarnya telah melakukan putaran di sekitar CRUD kiddie pool dan hidup itu baik! Hanya demi trik ruang tamu untuk mengesankan teman Anda, kami akan menambahkan kemampuan untuk memindahkan catatan di sekitar layar dan memperbarui koordinat secara waktu nyata. Jangan panik - itu hanya beberapa baris kode lagi. Semua kerja keras ini akan membuahkan hasil. Saya berjanji!

Kami telah mengundang tamu istimewa, jQueryUI, ke pesta tersebut, dan kami melakukan semuanya untuk draggable. Menambahkan kemampuan untuk menyeret catatan secara lokal hanya membutuhkan satu baris kode. Jika Anda menambahkan element.draggable (); ke fungsi linker Anda, Anda akan mulai mendengar 'Eye of the Tiger' oleh Survivor karena Anda sekarang dapat menyeret catatan Anda.

Kami ingin tahu kapan penarikan telah berhenti dan menangkap koordinat baru untuk diteruskan. jQueryUI dibangun oleh beberapa orang yang sangat pintar, jadi ketika menyeret berhenti Anda hanya perlu mendefinisikan fungsi panggilan balik untuk acara penghentian. Kami mengambil note.id dari objek lingkup dan nilai CSS kiri dan atas dari ui obyek. Dengan pengetahuan itu kita melakukan apa yang telah kita lakukan selama ini: emit!

app.directive (’stickyNote’, function (socket) {
var linker = function (scope, element, attrs) {
element.draggable ({
stop: function (event, ui) {
socket.emit (’moveNote’, {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on (’onNoteMoved’, function (data) {
// Perbarui jika catatan yang sama
if (data.id == scope.note.id) {
element.animate ({
kiri: data.x,
atas: data.y
});
}
});
};
});

Pada titik ini, tidak mengherankan bahwa kami juga mendengarkan peristiwa terkait perpindahan dari layanan soket. Dalam hal ini adalah onNoteMoved acara dan jika catatannya cocok maka kami memperbarui properti CSS kiri dan atas. Bam! Selesai!

14. Bonus

Ini adalah bagian bonus yang tidak akan saya sertakan jika saya tidak sepenuhnya yakin Anda dapat mencapainya dalam waktu kurang dari 10 menit. Kami akan menerapkan ke server langsung (saya masih kagum dengan betapa mudahnya melakukannya).

Pertama, Anda harus mendaftar untuk uji coba Nodejitsu gratis. Uji coba ini gratis selama 30 hari, yang sempurna untuk membuat kaki Anda basah.

Setelah Anda membuat akun, Anda perlu menginstal paket jitsu, yang dapat Anda lakukan dari baris perintah melalui $ npm instal jitsu -g.

Kemudian Anda harus masuk dari baris perintah melalui $ jitsu login dan masukkan kredensial Anda.

Pastikan Anda berada di aplikasi Anda secara langsung, ketik penerapan $ jitsu dan menjawab pertanyaan. Saya biasanya membiarkan sebanyak mungkin ke default, yang berarti saya memberi nama aplikasi saya tetapi bukan subdomain, dll.

Dan, teman-teman terkasih, hanya itu saja! Anda akan mendapatkan URL ke aplikasi Anda dari output server setelah diterapkan dan siap digunakan.

15. Kesimpulan

Kami telah membahas banyak bidang AngularJS dalam artikel ini dan saya harap Anda bersenang-senang dalam prosesnya. Saya pikir sangat rapi apa yang dapat Anda capai dengan AngularJS dan Socket.io dalam sekitar 200 baris kode.

Ada beberapa hal yang tidak saya bahas demi fokus pada poin utama, tetapi saya mendorong Anda untuk menurunkan sumbernya dan bermain-main dengan aplikasinya. Kami telah membangun fondasi yang kuat, tetapi masih banyak fitur yang dapat Anda tambahkan. Meretas!

Lukas Ruebbelke adalah penggemar teknologi dan ikut menulis AngularJS dalam Action for Manning Publications. Hal favoritnya adalah membuat orang bersemangat tentang teknologi baru seperti dirinya. Dia menjalankan Grup Pengguna Aplikasi Web Phoenix dan telah menyelenggarakan beberapa hackathon dengan rekan-rekannya dalam kejahatan.