ຄະນະຮ່ວມມື AngularJS ກັບ Socket.io

ກະວີ: Peter Berry
ວັນທີຂອງການສ້າງ: 14 ເດືອນກໍລະກົດ 2021
ວັນທີປັບປຸງ: 13 ເດືອນພຶດສະພາ 2024
Anonim
ຄະນະຮ່ວມມື AngularJS ກັບ Socket.io - Creative
ຄະນະຮ່ວມມື AngularJS ກັບ Socket.io - Creative

ເນື້ອຫາ

  • ຄວາມຮູ້ທີ່ຕ້ອງການ: ລະດັບປານກາງ JavaScript
  • ຕ້ອງການ: Node.js, NPM
  • ເວລາຂອງໂຄງການ: 2 ຊົ່ວ​ໂມງ

AngularJS ແມ່ນມີຄວາມ ເໝາະ ສົມເປັນພິເສດ ສຳ ລັບການສ້າງໂປແກຼມໃຊ້ ສຳ ລັບລູກຄ້າທີ່ອຸດົມສົມບູນໃນ browser ແລະເມື່ອທ່ານຕື່ມໃສ່ Socket.io ເລັກ ໜ້ອຍ ເຂົ້າໄປໃນການປະສົມ, ສິ່ງຕ່າງໆກໍ່ ໜ້າ ສົນໃຈຫຼາຍ. ໃນບົດຂຽນນີ້ພວກເຮົາ ກຳ ລັງຈະສ້າງກະດານຮ່ວມມືໃນເວລາທີ່ແທ້ຈິງເຊິ່ງໃຊ້ AngularJS ສຳ ລັບໂປແກຼມ ນຳ ໃຊ້ກັບລູກຄ້າແລະ Socket.io ເພື່ອແບ່ງປັນສະຖານະພາບລະຫວ່າງລູກຄ້າທີ່ເຊື່ອມຕໍ່ທັງ ໝົດ.

ໃຫ້ມີການດູແລຮັກສາເຮືອນຫລາຍກ່ອນທີ່ພວກເຮົາຈະເລີ່ມຕົ້ນ. ຂ້າພະເຈົ້າຈະຄາດເດົາວ່າທ່ານມີຄວາມເຂົ້າໃຈພື້ນຖານຂອງ HTML ແລະ JavaScript ຍ້ອນວ່າຂ້າພະເຈົ້າຈະບໍ່ປົກຄຸມທຸກແຈຂອງລະຫັດ. ຍົກຕົວຢ່າງ, ຂ້ອຍຈະບໍ່ຮຽກຮ້ອງເອກະສານ CSS ແລະ JavaScript ທີ່ຂ້ອຍລວມຢູ່ໃນຫົວຂອງເອກະສານ HTML ເພາະວ່າບໍ່ມີຂໍ້ມູນ ໃໝ່ ຢູ່ທີ່ນັ້ນ.

ນອກຈາກນີ້, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ທ່ານຈັບເອົາລະຫັດຈາກບັນຊີ GitHub ຂອງຂ້ອຍເພື່ອຕິດຕາມ. ເພື່ອນທີ່ດີຂອງຂ້ອຍ Brian Ford ຍັງມີແກ່ນ Socket.io ທີ່ດີເລີດ, ເຊິ່ງຂ້ອຍໄດ້ອີງໃສ່ແນວຄວາມຄິດເດີມໆຂອງຂ້ອຍ.

4 ລັກສະນະຕົ້ນຕໍທີ່ພວກເຮົາຕ້ອງການໃນກະດານຮ່ວມມືແມ່ນຄວາມສາມາດໃນການສ້າງປື້ມບັນທຶກ, ອ່ານບັນທຶກ, ປັບປຸງບັນທຶກ, ລົບບັນທຶກແລະເພື່ອຄວາມມ່ວນ, ຍ້າຍບັນທຶກໃສ່ກະດານ. ແມ່ນແລ້ວ, ນັ້ນແມ່ນຖືກຕ້ອງ, ພວກເຮົາ ກຳ ລັງສຸມໃສ່ຄຸນລັກສະນະ CRUD ມາດຕະຖານ. ຂ້າພະເຈົ້າເຊື່ອວ່າໂດຍການສຸມໃສ່ຄຸນລັກສະນະພື້ນຖານເຫຼົ່ານີ້, ພວກເຮົາຈະໄດ້ກວມເອົາລະຫັດພຽງພໍ ສຳ ລັບຮູບແບບຕ່າງໆທີ່ຈະອອກມາເພື່ອໃຫ້ທ່ານສາມາດ ນຳ ໃຊ້ແລະ ນຳ ໃຊ້ມັນຢູ່ບ່ອນອື່ນ.


01. ເຄື່ອງແມ່ຂ່າຍ

ພວກເຮົາ ກຳ ລັງຈະເລີ່ມຕົ້ນກັບ Node.js server ກ່ອນເພາະມັນຈະເປັນພື້ນຖານທີ່ພວກເຮົາຈະສ້າງທຸກສິ່ງທຸກຢ່າງອື່ນ.

ພວກເຮົາ ກຳ ລັງຈະສ້າງ server Node.js ດ້ວຍ Express ແລະ Socket.io. ເຫດຜົນທີ່ພວກເຮົາໃຊ້ Express ແມ່ນຍ້ອນວ່າມັນສະ ໜອງ ກົນໄກທີ່ດີ ສຳ ລັບການຕັ້ງຄ່າເຊີຟເວີຊັບສິນຄົງທີ່ພາຍໃນ Node.js. ການສະແດງອອກແມ່ນມາພ້ອມກັບຄຸນລັກສະນະທີ່ ໜ້າ ເກງຂາມແທ້ໆ, ແຕ່ໃນກໍລະນີນີ້, ພວກເຮົາຈະໃຊ້ມັນເພື່ອຂັດຂວາງການ ນຳ ໃຊ້ໂປແກຼມທີ່ສະອາດລະຫວ່າງເຊີບເວີແລະລູກຄ້າ.

(ຂ້ອຍ ກຳ ລັງ ດຳ ເນີນງານພາຍໃຕ້ການສົມມຸດວ່າທ່ານໄດ້ຕິດຕັ້ງ Node.js ແລະ NPM. ການຄົ້ນຫາ Google ໄວໆຈະສະແດງວິທີການຕິດຕັ້ງເຫຼົ່ານັ້ນຖ້າທ່ານບໍ່ຕ້ອງການ.)

02. ກະດູກເປົ່າ

ສະນັ້ນເພື່ອສ້າງກະດູກທີ່ເປົ່າຂອງເຊີບເວີ, ພວກເຮົາຕ້ອງເຮັດສອງສາມຢ່າງເພື່ອໃຫ້ລຸກຂຶ້ນແລະແລ່ນ.

// app.js

// A.1
var express = ຕ້ອງການ ('ສະແດງອອກ'),
app = ສະແດງອອກ ();
server = ຕ້ອງການ ('http'). createServer (app),
ຟັງ (server);

// ກ .2
app.configure (function () {
app.use (express.static (__ dirname + '/ ສາທາລະນະ'));
});

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


A.1 ພວກເຮົາ ກຳ ລັງປະກາດແລະປັບຕົວໂມດູນ Node.js ຂອງພວກເຮົາເພື່ອໃຫ້ພວກເຮົາສາມາດ ນຳ ໃຊ້ມັນໃນ ຄຳ ຮ້ອງສະ ໝັກ ຂອງພວກເຮົາ. ພວກເຮົາ ກຳ ລັງປະກາດດ່ວນ, ດ່ວນດ່ວນແລະຫຼັງຈາກນັ້ນສ້າງ server HTTP ແລະສົ່ງໃນຕົວຢ່າງ Express ເຂົ້າໄປໃນນັ້ນ. ແລະຈາກບ່ອນນັ້ນພວກເຮົາ ກຳ ລັງເລັ່ງ Socket.io ແລະບອກມັນໃຫ້ເບິ່ງຢູ່ໃນຕົວຢ່າງຂອງເຊີບເວີຂອງພວກເຮົາ.

A.2 ຈາກນັ້ນພວກເຮົາ ກຳ ລັງບອກແອັບ Express Express ຂອງພວກເຮົາໃຫ້ໃຊ້ລະບົບສາທາລະນະຂອງພວກເຮົາເພື່ອຮັບໃຊ້ໄຟລ໌ຈາກ.

A.3 ພວກເຮົາເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍແລະບອກໃຫ້ຟັງຢູ່ໃນພອດ 1337.

ມາຮອດປະຈຸບັນນີ້ບໍ່ໄດ້ມີຄວາມເຈັບປວດແລະວ່ອງໄວ. ຂ້າພະເຈົ້າເຊື່ອວ່າພວກເຮົາ ກຳ ລັງເຂົ້າລະຫັດ ໜ້ອຍ ກວ່າ 10 ເສັ້ນແລະພວກເຮົາມີ server Node.js ທີ່ມີປະໂຫຍດຢູ່ແລ້ວ. ເປັນຕົ້ນໄປ!

03. ປະກາດຄວາມເພິ່ງພາອາໄສຂອງທ່ານ

// packages.json
{
"ຊື່": "angular-collab-board",
"ຄຳ ອະທິບາຍ": "ຄະນະ ກຳ ມະການຮ່ວມມື AngularJS",
"ລຸ້ນ": "0.0.1-1",
"ສ່ວນຕົວ": ຄວາມຈິງ,
"ເພິ່ງພາອາໄສ": {
"ສະແດງ": "3.x",
"socket.io": "0.9.x"
}
}

ໜຶ່ງ ໃນຄຸນລັກສະນະທີ່ດີທີ່ສຸດຂອງ NPM ແມ່ນຄວາມສາມາດໃນການປະກາດຄວາມເພິ່ງພາອາໄສຂອງທ່ານໃນ a packages.json ແລະຫຼັງຈາກນັ້ນຕິດຕັ້ງພວກມັນໂດຍອັດຕະໂນມັດ npm ຕິດຕັ້ງ ໃນເສັ້ນຄໍາສັ່ງ.


04. ລວດລາຍ Socket.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, DeleteNote ແລະ ຍ້າຍ. ແລະໃນ ໜ້າ ທີ່ການເອີ້ນຄືນ, ພວກເຮົາພຽງແຕ່ອອກອາກາດເຫດການທີ່ເກີດຂື້ນເພື່ອໃຫ້ລູກຄ້າທຸກຄົນໄດ້ຮັບການແຈ້ງເຕືອນວ່າເຫດການເກີດຂື້ນ.

ມີບາງສິ່ງທີ່ມີຄຸນຄ່າໃນການຊີ້ແຈງກ່ຽວກັບ ໜ້າ ທີ່ການເອີ້ນຄືນໃນຜູ້ຈັດການເຫດການແຕ່ລະຄົນ. ໜຶ່ງ, ຖ້າທ່ານຕ້ອງການສົ່ງເຫດການໄປຫາທຸກຄົນອື່ນແຕ່ລູກຄ້າທີ່ປ່ອຍຕົວເຫດການທີ່ທ່ານໃສ່ໄວ້ ອອກອາກາດ ກ່ອນທີ່ຈະ ປ່ອຍຕົວ function ໂທ. ອັນທີສອງ, ພວກເຮົາພຽງແຕ່ໂອນບັນຊີຂອງເຫດການໄປໃຫ້ພາກສ່ວນທີ່ສົນໃຈເພື່ອໃຫ້ພວກເຂົາສາມາດປະມວນຜົນໄດ້ຕາມຄວາມ ເໝາະ ສົມ.

05. ເລີ່ມຕົ້ນເຄື່ອງຈັກຂອງທ່ານ!

ຕອນນີ້ພວກເຮົາໄດ້ ກຳ ນົດຄວາມເພິ່ງພາອາໄສຂອງພວກເຮົາແລະຕັ້ງຄ່າໂປແກຼມ Node.js ຂອງພວກເຮົາດ້ວຍ ອຳ ນາດດ່ວນແລະ Socket.io, ມັນງ່າຍດາຍທີ່ຈະເລີ່ມຕົ້ນ server Node.js.

ທຳ ອິດທ່ານຕິດຕັ້ງ Node.js ຂື້ນກັບຄວາມເພິ່ງພາອາໃສຂອງທ່ານເຊັ່ນນັ້ນ:

npm ຕິດຕັ້ງ

ແລະຫຼັງຈາກນັ້ນທ່ານເລີ່ມຕົ້ນ server ດັ່ງນີ້:

node app.js

ແລະຫຼັງຈາກນັ້ນ! ທ່ານໄປທີ່ຢູ່ນີ້ໃນເບົາເຊີຂອງທ່ານ. Bam!

06. ຄວາມຄິດທີ່ເປີດເຜີຍສອງສາມຢ່າງກ່ອນທີ່ຈະກ້າວຕໍ່ໄປ

ຂ້ອຍສ່ວນໃຫຍ່ແມ່ນນັກພັດທະນາດ້ານຫນ້າແລະຂ້ອຍໄດ້ຮັບຄວາມຢ້ານກົວຫລາຍໃນການເຂົ້າເບິ່ງເຄື່ອງແມ່ຂ່າຍ Node.js ໃນໂປແກຼມຂອງຂ້ອຍ. ສ່ວນ AngularJS ແມ່ນ ໜ້າ ຈໍແຕ່ວ່າ JavaScript ຢູ່ຂ້າງ server? ຈັດລຽງ ລຳ ດັບເພງດັງໆຈາກສຽງດັງທີ່ ໜ້າ ຢ້ານ.

ແຕ່ວ່າ, ຂ້ອຍຮູ້ສຶກແປກປະຫຼາດແທ້ໆທີ່ຄົ້ນພົບວ່າຂ້ອຍສາມາດຕັ້ງ server web static ໃນພຽງແຕ່ສອງສາມແຖວຂອງລະຫັດແລະໃນອີກສອງສາມສາຍທີ່ໃຊ້ Socket.io ເພື່ອຈັດການທຸກໆເຫດການລະຫວ່າງ browser. ແລະມັນຍັງເປັນພຽງແຕ່ JavaScript ເທົ່ານັ້ນ! ເພື່ອຄວາມທັນເວລາ, ພວກເຮົາພຽງແຕ່ເວົ້າເຖິງສອງສາມລັກສະນະເທົ່ານັ້ນ, ແຕ່ຂ້າພະເຈົ້າຫວັງວ່າໃນຕອນທ້າຍຂອງບົດຂຽນທ່ານຈະເຫັນວ່າມັນງ່າຍທີ່ຈະລອຍນ້ ຳ - ແລະສຸດທ້າຍເລິກຂອງສະລອຍນ້ ຳ ກໍ່ບໍ່ເປັນຕາຢ້ານເລີຍ.

07. ລູກຄ້າ

ດຽວນີ້ພວກເຮົາມີພື້ນຖານອັນ ແໜ້ນ ໜາ ຂອງພວກເຮົາຢູ່ກັບເຊີບເວີຂອງພວກເຮົາ, ໃຫ້ກ້າວໄປຫາສ່ວນທີ່ຂ້ອຍມັກທີ່ສຸດ - ລູກຄ້າ! ພວກເຮົາ ກຳ ລັງ ນຳ ໃຊ້ AngularJS, jQueryUI ສຳ ລັບສ່ວນທີ່ສາມາດລາກໄດ້ແລະ Twitter Bootstrap ສຳ ລັບພື້ນຖານຮູບແບບ.

08. ກະດູກເປົ່າ

ໃນຖານະເປັນບັນຫາຂອງຄວາມມັກສ່ວນບຸກຄົນ, ເມື່ອຂ້ອຍເລີ່ມຕົ້ນສະ ໝັກ AngularJS ໃໝ່ ຂ້ອຍມັກ ກຳ ນົດ ຕຳ ່ສຸດທີ່ເປົ່າຫວ່າງທີ່ຂ້ອຍຮູ້ວ່າຂ້ອຍ ຈຳ ເປັນຕ້ອງເລີ່ມຕົ້ນແລະຫຼັງຈາກນັ້ນເລີ່ມຕົ້ນແກ້ໄຂໄວທີ່ສຸດ.

ທຸກໆໂປແກຼມ AngularJS ຕ້ອງໄດ້ຮັບການບູລະນະໂດຍມີເຄື່ອງຄວບຄຸມຢ່າງ ໜ້ອຍ ໜຶ່ງ ເຄື່ອງແລະສະນັ້ນນີ້ໂດຍທົ່ວໄປຂ້ອຍມັກຈະເລີ່ມຕົ້ນສະ ເໝີ.

ເພື່ອອັດຕະໂນມັດ bootstrap ຄໍາຮ້ອງສະຫມັກທີ່ທ່ານຕ້ອງການພຽງແຕ່ເພີ່ມ ng-app ເຖິງຂໍ້ຂອງ HTML ທີ່ທ່ານຕ້ອງການໃຫ້ແອັບພລິເຄຊັນມີຊີວິດຢູ່. ໂດຍສ່ວນໃຫຍ່ແລ້ວ, ການເພີ່ມໃສ່ແທັກ HTML ແມ່ນຈະເປັນທີ່ຍອມຮັບໄດ້ຢ່າງສົມບູນ. ຂ້ອຍຍັງໄດ້ເພີ່ມຄຸນລັກສະນະໃຫ້ ng-app ເພື່ອບອກມັນວ່າຂ້ອຍຕ້ອງການໃຊ້ app ໂມດູນ, ເຊິ່ງຂ້ອຍຈະ ກຳ ນົດໃນເວລາດຽວກັນ.

// public / index.html
html ng-app = "ແອັບ" ">

ຂ້ອຍຮູ້ວ່າຂ້ອຍ ຈຳ ເປັນຕ້ອງມີຜູ້ຄວບຄຸມຢ່າງ ໜ້ອຍ ໜຶ່ງ ຄົນແລະຂ້ອຍຈະໂທຫາມັນໂດຍໃຊ້ ng-controller ແລະມອບ ໝາຍ ໃຫ້ມັນເປັນຊັບສິນຂອງ MainCRL.

body ng-controller = "MainCRL"> / ຮ່າງກາຍ>

ສະນັ້ນຕອນນີ້ພວກເຮົາ ກຳ ລັງເຊື່ອມໂຍງກັບໂມດູນທີ່ມີຊື່ app ແລະເຄື່ອງຄວບຄຸມຊື່ MainCRL. ຂໍໃຫ້ພວກເຮົາສືບຕໍ່ເດີນຫນ້າແລະສ້າງພວກມັນດຽວນີ້.

ການສ້າງແບບໂມດູນແມ່ນກົງໄປກົງມາ. ທ່ານ ກຳ ນົດມັນໂດຍການໂທ angular.module ແລະຕັ້ງຊື່ໃຫ້ມັນ. ສໍາລັບການອ້າງອີງໃນອະນາຄົດ, ຕົວກໍານົດການທີສອງຂອງຂບວນເປົ່າແມ່ນບ່ອນທີ່ທ່ານສາມາດສີດໂມດູນຍ່ອຍສໍາລັບການນໍາໃຊ້ໃນຄໍາຮ້ອງສະຫມັກ. ມັນບໍ່ໄດ້ຢູ່ໃນຂອບເຂດຂອງບົດແນະ ນຳ ນີ້, ແຕ່ຈະໃຊ້ໄດ້ງ່າຍເມື່ອ ຄຳ ຮ້ອງສະ ໝັກ ຂອງທ່ານເລີ່ມເຕີບໃຫຍ່ຂື້ນໃນຄວາມສັບສົນແລະຄວາມຕ້ອງການ.

// ສາທາລະນະ / js / collab.js
var app = angular.module ('app', []);

ພວກເຮົາ ກຳ ລັງຈະປະກາດບ່ອນຫວ່າງຫວ່າງບໍ່ຫຼາຍປານໃດໃນ app ໂມດູນເລີ່ມຕົ້ນດ້ວຍ MainCRL ດ້ານລຸ່ມ.ພວກເຮົາຈະຕື່ມຂໍ້ມູນທັງ ໝົດ ນີ້ໃນພາຍຫລັງແຕ່ຂ້ອຍຢາກສະແດງໃຫ້ເຫັນເຖິງໂຄງສ້າງພື້ນຖານຕັ້ງແຕ່ເລີ່ມຕົ້ນ.

app.controller ('MainCRL', ໜ້າ ທີ່ ($ ຂອບເຂດ) {});

ພວກເຮົາ ກຳ ລັງຈະຫໍ່ ໜ້າ ທີ່ Socket.io ໃນ a ເຕົ້າຮັບ ການບໍລິການດັ່ງນັ້ນພວກເຮົາສາມາດ encapsulate ວັດຖຸທີ່ແລະບໍ່ປ່ອຍໃຫ້ມັນເລື່ອນປະມານໃນ namespace ໂລກ.

app.factory ('ຊັອກເກັດ', ໜ້າ ທີ່ ($ rootScope) {});

ແລະໃນຂະນະທີ່ພວກເຮົາ ກຳ ລັງຢູ່ມັນ, ພວກເຮົາ ກຳ ລັງຈະປະກາດ ຄຳ ສັ່ງທີ່ຖືກເອີ້ນ stickNote ທີ່ພວກເຮົາ ກຳ ລັງຈະ ນຳ ໃຊ້ເພື່ອເຮັດ ໜ້າ ທີ່ບັນທຶກທີ່ຕິດຢູ່ໃນ.

app.directive ('adhesiveNote', ໜ້າ ທີ່ (ເຕົ້າຮັບ) {});

ສະນັ້ນໃຫ້ພວກເຮົາທົບທວນຄືນສິ່ງທີ່ພວກເຮົາໄດ້ເຮັດມາຈົນເຖິງປະຈຸບັນ. ພວກເຮົາໄດ້ເລີ່ມຕົ້ນ ຄຳ ຮ້ອງສະ ໝັກ ໂດຍໃຊ້ຂັ້ນຕອນ ng-app ແລະປະກາດຜູ້ຄວບຄຸມແອັບພລິເຄຊັນຂອງພວກເຮົາໃນ HTML. ພວກເຮົາຍັງໄດ້ ກຳ ນົດໂມດູນການ ນຳ ໃຊ້ແລະສ້າງ MainCRL ຄວບຄຸມ, ໄດ້ ເຕົ້າຮັບ ການບໍລິການແລະ stickNote ທິດທາງ.

09. ການສ້າງບັນທຶກ ໜຽວ

ຕອນນີ້ພວກເຮົາມີໂຄງກະດູກຂອງໂປແກມ AngularJS ຢູ່ໃນສະຖານທີ່, ພວກເຮົາຈະເລີ່ມຕົ້ນສ້າງຄຸນລັກສະນະການສ້າງ.

app.controller ('MainCRL', ໜ້າ ທີ່ ($ ຂອບເຂດ, ເຕົ້າຮັບ) {// B.1
$ scope.notes = []; // B.2

// ເຂົ້າມາ
socket.on ('onNoteCreated', ໜ້າ ທີ່ (ຂໍ້ມູນ) {// B.3
$ scope.notes.push (ຂໍ້ມູນ);
});

// ຂາອອກ
$ scope.createNote = function () {// B.4
var note = {
id: ວັນທີ ໃໝ່ (). getTime (),
ຫົວຂໍ້: 'ໝາຍ ເຫດ ໃໝ່',
ຮ່າງກາຍ: 'ລໍຖ້າ'
};

$ scope.notes.push (ບັນທຶກ);
socket.emit ('createNote', ບັນທຶກ);
};

B.1 AngularJS ມີຄຸນສົມບັດການສີດຢາເພິ່ງພາອາໄສທີ່ຖືກສ້າງຂຶ້ນໃນມັນດັ່ງນັ້ນພວກເຮົາ ກຳ ລັງສັກຢາ a ຂອບເຂດ $ ຈຸດປະສົງແລະ ເຕົ້າຮັບ ການບໍລິການ. ທ ຂອບເຂດ $ object ເຮັດ ໜ້າ ທີ່ເປັນ ViewModel ແລະໂດຍພື້ນຖານແລ້ວແມ່ນວັດຖຸ JavaScript ໂດຍມີບາງເຫດການທີ່ອົບເຂົ້າໄປໃນມັນເພື່ອໃຫ້ສາມາດຖານຂໍ້ມູນສອງທາງໄດ້.

B.2 ພວກເຮົາ ກຳ ລັງປະກາດຂອບເຂດທີ່ພວກເຮົາຈະໃຊ້ເພື່ອຜູກມັດມຸມມອງ.

B.3 ພວກເຮົາ ກຳ ລັງເພີ່ມຜູ້ຟັງ ສຳ ລັບ ຄຳ ແນະ ນຳ onNoteCreated ເຫດການໃນ ເຕົ້າຮັບ ການບໍລິການແລະການຊຸກຍູ້ການຈ່າຍເງິນເຂົ້າໃນເຫດການ $ scope.notes ຂບວນ.

B.4 ພວກເຮົາໄດ້ປະກາດເປັນກ createNote ວິທີການທີ່ສ້າງຄ່າເລີ່ມຕົ້ນ ຫມາຍ​ເຫດ​ ຄັດຄ້ານແລະຍູ້ມັນເຂົ້າໄປໃນ $ scope.notes ຂບວນ. ມັນຍັງໃຊ້ ຊັອກເກັດ ການບໍລິການເພື່ອການສະແດງ createNote ເຫດການແລະຜ່ານ ບັນທຶກ ໃໝ່ object ຕາມ.

ສະນັ້ນດຽວນີ້ພວກເຮົາມີວິທີການສ້າງບັນທຶກ, ພວກເຮົາຈະເອີ້ນແນວໃດ? ນັ້ນແມ່ນ ຄຳ ຖາມທີ່ດີ! ໃນເອກະສານ HTML, ພວກເຮົາເພີ່ມ ຄຳ ສັ່ງທີ່ສ້າງຂຶ້ນໃນ ຄຳ ສັ່ງ AngularJS ng-click ກັບປຸ່ມແລະຫຼັງຈາກນັ້ນຕື່ມການ createNote ວິທີການເອີ້ນວ່າເປັນຄຸນລັກສະນະຄຸນຄ່າ.

button id = "createButton" ng-click = "createNote ()"> ສ້າງບັນທຶກ / ປຸ່ມ>

ເຖິງເວລາ ສຳ ລັບການທົບທວນຄືນຢ່າງໄວວາກ່ຽວກັບສິ່ງທີ່ພວກເຮົາໄດ້ເຮັດມາຮອດປະຈຸບັນ. ພວກເຮົາໄດ້ເພີ່ມແຖວເຂົ້າເວັບ ຂອບເຂດ $ ຈຸດປະສົງໃນ MainCRL ວ່າຈະຖືບັນທຶກທຸກຢ່າງ ສຳ ລັບການສະ ໝັກ. ພວກເຮົາຍັງໄດ້ເພີ່ມ a createNote ວິທີການກ່ຽວກັບການ ຂອບເຂດ $ ຄັດຄ້ານການສ້າງບັນທຶກທ້ອງຖິ່ນ ໃໝ່ ແລະຈາກນັ້ນອອກອາກາດບັນທຶກນັ້ນໃຫ້ລູກຄ້າຄົນອື່ນຜ່ານທາງ ເຕົ້າຮັບ ການບໍລິການ. ພວກເຮົາຍັງໄດ້ເພີ່ມຜູ້ຟັງເຫດການໃນເວັບໄຊທ໌້ ເຕົ້າຮັບ ການບໍລິການດັ່ງນັ້ນພວກເຮົາສາມາດຮູ້ເວລາທີ່ລູກຄ້າຄົນອື່ນໄດ້ສ້າງບັນທຶກເພື່ອໃຫ້ພວກເຮົາສາມາດເພີ່ມມັນເຂົ້າໃນຊຸດສະສົມຂອງພວກເຮົາ.

10. ການສະແດງບັນທຶກ ໜຽວ

ດຽວນີ້ພວກເຮົາມີຄວາມສາມາດໃນການສ້າງວັດຖຸບັນທຶກແລະແບ່ງປັນມັນລະຫວ່າງໂປຣແກຣມທ່ອງເວັບແຕ່ພວກເຮົາຈະສະແດງມັນແນວໃດ? ນີ້ແມ່ນບ່ອນທີ່ ຄຳ ສັ່ງແນະ ນຳ ເຂົ້າມາ.

ທິດທາງແລະສະລັບສັບຊ້ອນຂອງພວກເຂົາແມ່ນຫົວຂໍ້ທີ່ກວ້າງຂວາງ, ແຕ່ວ່າສະບັບສັ້ນແມ່ນວ່າພວກເຂົາສະຫນອງວິທີການທີ່ຈະຂະຫຍາຍອົງປະກອບແລະຄຸນລັກສະນະຕ່າງໆດ້ວຍການເຮັດວຽກທີ່ ກຳ ຫນົດເອງ. ທິດທາງແມ່ນພາກສ່ວນທີ່ຂ້ອຍມັກທີ່ສຸດກ່ຽວກັບ AngularJS ເພາະວ່າມັນຊ່ວຍໃຫ້ທ່ານສາມາດສ້າງ DSL ທັງ ໝົດ (ໂດເມນສະເພາະຂອງພາສາ) ທີ່ອ້ອມຮອບໂປແກຼມຂອງທ່ານໃນ HTML.

ມັນເປັນເລື່ອງ ທຳ ມະດາທີ່ພວກເຮົາຈະສ້າງບົດບັນທຶກທີ່ຕິດຄັດມາ ສຳ ລັບຄະນະຮ່ວມມືຂອງພວກເຮົາທີ່ພວກເຮົາຄວນສ້າງ stickNote ທິດທາງ. ທິດທາງແມ່ນຖືກ ກຳ ນົດໂດຍການໂທຫາວິທີການຊີ້ ນຳ ກ່ຽວກັບໂມດູນທີ່ທ່ານຕ້ອງການປະກາດມັນແລະຖ່າຍທອດຊື່ແລະ ໜ້າ ທີ່ທີ່ສົ່ງຄືນວັດຖຸນິຍາມ ຄຳ ນິຍາມ. ຈຸດປະສົງນິຍາມ ຄຳ ສັ່ງມີຫລາຍໆຄຸນສົມບັດທີ່ເປັນໄປໄດ້ທີ່ທ່ານສາມາດ ກຳ ນົດມັນໄດ້, ແຕ່ພວກເຮົາຈະໃຊ້ສອງສາມຈຸດເພື່ອຈຸດປະສົງຂອງພວກເຮົາທີ່ນີ້.

ຂ້ອຍຂໍແນະ ນຳ ໃຫ້ທ່ານກວດເບິ່ງເອກະສານ AngularJS ເພື່ອເບິ່ງລາຍຊື່ທັງ ໝົດ ຂອງຄຸນສົມບັດທີ່ທ່ານສາມາດ ກຳ ນົດໃນວັດຖຸນິຍາມ ຄຳ ນິຍາມ.

app.directive ('StickNote', ໜ້າ ທີ່ (ເຕົ້າຮັບ) {
var linker = function (ຂອບເຂດ, ອົງປະກອບ, attrs) {};

var controller = function ($ ຂອບເຂດ) {};

ກັບມາ {
ຈຳ ກັດ: 'A', // C.1
link: linker, // C.2
controller: ຕົວຄວບຄຸມ, // C.3
ຂອບເຂດ: {// C.4
ໝາຍ ເຫດ: '=',
ondelete: '&'
}
};
});

C.1 ທ່ານສາມາດ ຈຳ ກັດການແນະ ນຳ ຂອງທ່ານຕໍ່ກັບບາງປະເພດຂອງອົງປະກອບ HTML. ສອງຢ່າງທີ່ພົບເລື້ອຍທີ່ສຸດແມ່ນອົງປະກອບຫລືຄຸນລັກສະນະ, ເຊິ່ງທ່ານປະກາດໃຊ້ ອີ ແລະ ກ ຕາມ ລຳ ດັບ. ທ່ານຍັງສາມາດ ຈຳ ກັດມັນໄວ້ໃນຊັ້ນ CSS ຫລື ຄຳ ເຫັນ, ແຕ່ສິ່ງເຫຼົ່ານີ້ບໍ່ ທຳ ມະດາ.

C.2 ໜ້າ ທີ່ເຊື່ອມໂຍງແມ່ນບ່ອນທີ່ທ່ານໃສ່ລະຫັດການຈັດການ DOM ຂອງທ່ານທັງ ໝົດ. ມີຂໍ້ຍົກເວັ້ນບໍ່ຫຼາຍປານໃດທີ່ຂ້ອຍໄດ້ພົບ, ແຕ່ນີ້ແມ່ນຄວາມຈິງສະເຫມີ (ຢ່າງຫນ້ອຍ 99 ເປີເຊັນຂອງເວລາ). ນີ້ແມ່ນກົດລະບຽບພື້ນຖານຂອງ AngularJS ແລະເປັນເຫດຜົນທີ່ຂ້ອຍໄດ້ເນັ້ນ ໜັກ ມັນ.

C.3 ຟັງຊັນຄວບຄຸມເຮັດວຽກຄືກັນກັບຕົວຄວບຄຸມຕົ້ນຕໍທີ່ພວກເຮົາໄດ້ ກຳ ນົດໄວ້ ສຳ ລັບແອັບພລິເຄຊັນແຕ່ວ່າ ຂອບເຂດ $ ຈຸດປະສົງທີ່ພວກເຮົາ ກຳ ລັງຜ່ານໄປແມ່ນສະເພາະກັບອົງປະກອບ DOM ທີ່ທິດທາງໃນຊີວິດ.

C.4 AngularJS ມີແນວຄິດກ່ຽວກັບຂອບເຂດທີ່ໂດດດ່ຽວ, ເຊິ່ງຊ່ວຍໃຫ້ທ່ານສາມາດ ກຳ ນົດຢ່າງຈະແຈ້ງວ່າຂອບເຂດຂອງ ຄຳ ສັ່ງແນະ ນຳ ສື່ສານກັບໂລກພາຍນອກໄດ້ແນວໃດ. ຖ້າພວກເຮົາບໍ່ໄດ້ປະກາດຂອບເຂດການສັ່ງສອນຈະໄດ້ສືບທອດຢ່າງແທ້ຈິງຈາກຂອບເຂດຂອງພໍ່ແມ່ກັບຄວາມ ສຳ ພັນຂອງພໍ່ແມ່ແລະລູກ. ໃນຫຼາຍໆກໍລະນີນີ້ບໍ່ແມ່ນສິ່ງທີ່ດີທີ່ສຸດ. ໂດຍການແຍກຂອບເຂດໃຫ້ດີຂື້ນພວກເຮົາຫຼຸດຜ່ອນໂອກາດທີ່ໂລກພາຍນອກສາມາດສົ່ງຜົນກະທົບຕໍ່ສະພາບການທີ່ທ່ານໄດ້ຮັບ.

ຂ້າພະເຈົ້າໄດ້ປະກາດການຜູກມັດຂໍ້ມູນສອງທາງກັບ ຫມາຍ​ເຫດ​ ກັບ = ສັນຍາລັກແລະການສະແດງອອກທີ່ຜູກມັດກັບ ondelete ກັບ & ສັນຍາລັກ. ກະລຸນາອ່ານເອກະສານ AngularJS ສຳ ລັບ ຄຳ ອະທິບາຍຢ່າງເຕັມທີ່ກ່ຽວກັບຂອບເຂດທີ່ໂດດດ່ຽວເພາະວ່າມັນແມ່ນ ໜຶ່ງ ໃນຫົວຂໍ້ທີ່ສັບສົນກວ່າໃນກອບ.

ສະນັ້ນໃຫ້ຕົວຈິງເພີ່ມບັນທຶກ ໜຽວ ໃສ່ DOM.

ເຊັ່ນດຽວກັນກັບກອບທີ່ດີ, AngularJS ມາພ້ອມກັບຄຸນລັກສະນະທີ່ດີເລີດບາງຢ່າງທີ່ທັນສະໄຫມ. ໜຶ່ງ ໃນຄຸນລັກສະນະທີ່ງ່າຍທີ່ສຸດແມ່ນ ng-ເຮັດເລື້ມຄືນ. ຄຳ ສັ່ງແນະ ນຳ AngularJS ນີ້ຊ່ວຍໃຫ້ທ່ານສາມາດຜ່ານວັດຖຸສິ່ງຂອງຕ່າງໆໄດ້ແລະມັນກໍ່ຊ້ ຳ ກັບສິ່ງໃດກໍ່ຕາມທີ່ມັນຕິດຢູ່ໃນຫລາຍໆຄັ້ງເພາະວ່າມັນມີລາຍການຢູ່ໃນແຖວ. ໃນກໍລະນີຂ້າງລຸ່ມນີ້, ພວກເຮົາ ກຳ ລັງແກ້ແຄ້ນຢູ່ ບັນທຶກ ຂບວນແລະຊໍ້າກັນ the div ອົງປະກອບແລະລູກໆຂອງມັນ ສຳ ລັບຄວາມຍາວຂອງ ບັນທຶກ ຂບວນ.

div nplaum-note ng-repeat = "ບັນທຶກໃນບັນທຶກ" ໝາຍ ເຫດ = "ບັນທຶກ" ondelete = "DeleteNote (id)">
ປຸ່ມປະເພດ = "ປຸ່ມ" ng-click = "DeleteNote (note.id)"> × / ປຸ່ມ>
input ng-model = "note.title" ng-change = "updateNote (ບັນທຶກ)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (ບັນທຶກ)"
> {{note.body}} / textarea>
/ div>

ຄວາມງາມຂອງ ng-ເຮັດເລື້ມຄືນ ແມ່ນວ່າມັນຖືກຜູກມັດກັບອັນໃດອັນ ໜຶ່ງ ທີ່ທ່ານຜ່ານເຂົ້າແລະເມື່ອທ່ານເພີ່ມລາຍການເຂົ້າໃນອາເລ, ອົງປະກອບ DOM ຂອງທ່ານຈະຖືກປັບປຸງໂດຍອັດຕະໂນມັດ. ທ່ານສາມາດປະຕິບັດຂັ້ນຕອນຕໍ່ໄປນີ້ແລະເຮັດຊ້ ຳ ອີກບໍ່ພຽງແຕ່ອົງປະກອບ DOM ມາດຕະຖານເທົ່ານັ້ນແຕ່ຍັງມີ ຄຳ ແນະ ນຳ ກ່ຽວກັບລູກຄ້າອື່ນໆເຊັ່ນກັນ ນັ້ນແມ່ນເຫດຜົນທີ່ທ່ານເຫັນ stick-note ເປັນຄຸນລັກສະນະຂອງອົງປະກອບ.

ມັນມີອີກສອງສ່ວນຂອງລະຫັດລູກຄ້າທີ່ຕ້ອງການໃຫ້ຄວາມກະຈ່າງແຈ້ງ. ພວກເຮົາໄດ້ແຍກອອກຈາກຂອບເຂດໃນ ບັນທຶກຫນຽວ ທິດທາງກ່ຽວກັບສອງຄຸນສົມບັດ. ໂຕ ທຳ ອິດແມ່ນຂໍ້ຜູກມັດທີ່ ກຳ ນົດໄວ້ໃນຂອບເຂດ ຫມາຍ​ເຫດ​ ຄຸນ​ສົມ​ບັດ. ນີ້ ໝາຍ ຄວາມວ່າທຸກຄັ້ງທີ່ວັດຖຸບັນທຶກຈະປ່ຽນແປງໃນຂອບເຂດຂອງຜູ້ປົກຄອງ, ມັນຈະປັບປຸງວັດຖຸບັນທຶກທີ່ສອດຄ້ອງກັນໂດຍອັດຕະໂນມັດໃນທິດທາງແລະກົງກັນຂ້າມ. ຂອບເຂດທີ່ໂດດເດັ່ນທີ່ ກຳ ນົດໄວ້ແມ່ນຢູ່ໃນ ondelete ຄຸນລັກສະນະ. ນີ້ ໝາຍ ຄວາມວ່າແນວໃດເມື່ອວ່າ ondelete ເອີ້ນວ່າໃນທິດທາງ, ມັນຈະເອີ້ນວ່າການສະແດງອອກໃດກໍ່ຕາມແມ່ນຢູ່ໃນ ondelete ໃຫ້ເຫດຜົນກ່ຽວກັບອົງປະກອບ DOM ທີ່ເຮັດໃຫ້ທິດທາງໃນການກະຕຸ້ນ.

ໃນເວລາທີ່ ຄຳ ສັ່ງແນະ ນຳ ຖືກເລັ່ງດ່ວນມັນຖືກເພີ່ມເຂົ້າໃນ DOM ແລະ ໜ້າ ທີ່ເຊື່ອມໂຍງຖືກເອີ້ນ. ນີ້ແມ່ນໂອກາດທີ່ດີເລີດທີ່ຈະ ກຳ ນົດບາງຄຸນສົມບັດ DOM ທີ່ບໍ່ຖືກຕ້ອງຕາມອົງປະກອບ. ພາລາມິເຕີຂອງອົງປະກອບທີ່ພວກເຮົາ ກຳ ລັງຜ່ານແມ່ນຕົວຈິງຂອງວັດຖຸ jQuery ແລະດັ່ງນັ້ນພວກເຮົາສາມາດປະຕິບັດງານ jQuery ຢູ່ເທິງມັນໄດ້.

(ຕົວຈິງແລ້ວ AngularJS ມາພ້ອມກັບຊຸດຂອງ jQuery ທີ່ຖືກສ້າງຂຶ້ນໃນມັນແຕ່ຖ້າທ່ານໄດ້ລວມເອົາໂປເຈັກ jQuery ແບບເຕັມຮູບແບບແລ້ວ, AngularJS ຈະເລື່ອນໄປຕາມນັ້ນ)

app.directive ('nplaumNote', ໜ້າ ທີ່ (ເຕົ້າຮັບ) {
var linker = function (ຂອບເຂດ, ອົງປະກອບ, attrs) {
// ບາງການລິເລີ່ມ DOM ເພື່ອເຮັດໃຫ້ມັນງາມ
Element.css ('ຊ້າຍ', '10px');
Element.css ('ທາງເທີງ', '50px');
element.hide (). fadeIn ();
};
});

ໃນລະຫັດຂ້າງເທິງນີ້ພວກເຮົາພຽງແຕ່ວາງ ຕຳ ແໜ່ງ ໜຽວ ຢູ່ເທິງເວທີແລະ ກຳ ຈັດມັນຢູ່.

11.Deling ຫມາຍເຫດຫນຽວ

ສະນັ້ນດຽວນີ້ພວກເຮົາສາມາດເພີ່ມແລະສະແດງບັນທຶກ ໜຽວ, ມັນເຖິງເວລາແລ້ວທີ່ຈະລຶບບັນທຶກ ໜຽວ. ການສ້າງແລະລຶບບັນທຶກ ໜຽວ ແມ່ນບັນຫາຂອງການເພີ່ມແລະລຶບສິ່ງຂອງອອກຈາກອາເລທີ່ບັນທຶກຈະຖືກຜູກມັດ. ນີ້ແມ່ນ ໜ້າ ທີ່ຮັບຜິດຊອບຂອງຂອບເຂດພໍ່ແມ່ໃນການຮັກສາແຖວນັ້ນ, ນັ້ນແມ່ນເຫດຜົນທີ່ພວກເຮົາມາຈາກ ຄຳ ຮ້ອງຂໍການລົບອອກຈາກພາຍໃນ ຄຳ ສັ່ງ, ແຕ່ໃຫ້ຂອບເຂດຂອງພໍ່ແມ່ ດຳ ເນີນການຍົກເລິກຢ່າງແທ້ຈິງ.

ນີ້ແມ່ນເຫດຜົນທີ່ພວກເຮົາໄດ້ຜ່ານບັນຫາທັງ ໝົດ ຂອງການສ້າງການສະແດງອອກທີ່ໄດ້ ກຳ ນົດຂອບເຂດທີ່ໂດດດ່ຽວໃນ ຄຳ ສັ່ງ: ດັ່ງນັ້ນ ຄຳ ສັ່ງສາມາດໄດ້ຮັບການລົບລ້າງເຫດການພາຍໃນແລະສົ່ງຕໍ່ໃຫ້ພໍ່ແມ່ຂອງຕົນເພື່ອການປຸງແຕ່ງ.

ສັງເກດ HTML ພາຍໃນ ຄຳ ສັ່ງ.

ປຸ່ມປະເພດ = "ປຸ່ມ" ng-click = "DeleteNote (note.id)"> × / ປຸ່ມ>

ສິ່ງຕໍ່ໄປທີ່ຂ້ອຍຈະເວົ້າອາດເບິ່ງຄືວ່າຢູ່ໄກກັນແຕ່ຈື່ວ່າພວກເຮົາຢູ່ຮ່ວມກັນແລະມັນຈະມີຄວາມ ໝາຍ ຫຼັງຈາກທີ່ຂ້ອຍເວົ້າລະອຽດ. ເມື່ອກົດປຸ່ມຢູ່ແຈຂວາມືດ້ານເທິງຂອງບັນທຶກ ໜຽວ ຖືກກົດທີ່ພວກເຮົາ ກຳ ລັງໂທຫາ DeleteNote ກ່ຽວກັບການຄວບຄຸມຂອງທິດທາງແລະການຖ່າຍທອດໃນ note.id ມູນຄ່າ. ຜູ້ຄວບຄຸມຫຼັງຈາກນັ້ນໂທຫາ ondelete, ເຊິ່ງຫຼັງຈາກນັ້ນປະຕິບັດການສະແດງອອກໃດກໍ່ຕາມທີ່ພວກເຮົາ wired ເຖິງມັນ. ເຖິງຕອນນັ້ນດີປານໃດ? ພວກເຮົາ ກຳ ລັງໂທຫາວິທີການໃນທ້ອງຖິ່ນກ່ຽວກັບເຄື່ອງຄວບຄຸມເຊິ່ງຫຼັງຈາກນັ້ນມອບໃຫ້ໂດຍການໂທຫາການສະແດງອອກໃດກໍ່ຕາມທີ່ໄດ້ ກຳ ນົດໄວ້ໃນຂອບເຂດທີ່ໂດດດ່ຽວ. ສຳ ນວນທີ່ຮຽກຮ້ອງໃຫ້ພໍ່ແມ່ພຽງແຕ່ເກີດຂື້ນທີ່ຖືກເອີ້ນ DeleteNote ຄື​ກັນ.

app.directive ('nplaumNote', ໜ້າ ທີ່ (ເຕົ້າຮັບ) {
var controller = function ($ ຂອບເຂດ) {
$ scope.deleteNote = ໜ້າ ທີ່ (id) {
$ scope.ondelete ({
ຂ້ອຍ​ເຮັດ
});
};
};

ກັບມາ {
ຈຳ ກັດ: 'A',
link: linker, ລິ້ງ,
ຜູ້ຄວບຄຸມ: ຜູ້ຄວບຄຸມ,
ຂອບເຂດ: {
ໝາຍ ເຫດ: '=',
ondelete: '&'
}
};
});

(ເມື່ອ ນຳ ໃຊ້ຂອບເຂດທີ່ໂດດດ່ຽວທີ່ຖືກ ກຳ ນົດໂດຍການສະແດງອອກ, ຕົວ ກຳ ນົດການຈະຖືກສົ່ງໄປໃນແຜນທີ່ວັດຖຸ.)

ໃນຂອບເຂດຂອງພໍ່ແມ່, DeleteNote ຖືກເອີ້ນແລະເຮັດການລຶບແບບມາດຕະຖານທີ່ຖືກຕ້ອງໂດຍໃຊ້ angular.forEach ຜົນປະໂຫຍດການທໍາງານເພື່ອ iterate ໃນໄລຍະອາເລ. ເມື່ອ ໜ້າ ທີ່ໄດ້ຈັດການກັບທຸລະກິດໃນທ້ອງຖິ່ນຂອງຕົນແລ້ວມັນຈະ ດຳ ເນີນງານຕໍ່ໄປແລະເຮັດກິດຈະ ກຳ ດັ່ງກ່າວໃຫ້ຄົນທົ່ວໂລກມີປະຕິກິລິຍາຕາມຄວາມ ເໝາະ ສົມ.

app.controller ('MainCRL', ໜ້າ ທີ່ ($ ຂອບເຂດ, ເຕົ້າຮັບ) {
$ scope.notes = [];

// ເຂົ້າມາ
socket.on ('onNoteDeleted', ໜ້າ ທີ່ (ຂໍ້ມູນ) {
$ scope.deleteNote (data.id);
});

// ຂາອອກ
$ scope.deleteNote = ໜ້າ ທີ່ (id) {
var oldNotes = $ scope.notes,
newNotes = [];

angular.forEach (oldNotes, ໜ້າ ທີ່ (ບັນທຶກ) {
ຖ້າ (note.id! == id) newNotes.push (ບັນທຶກ);
});

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

12. ການປັບປຸງບັນທຶກ ໜຽວ

ພວກເຮົາມີຄວາມກ້າວ ໜ້າ ທີ່ດີເລີດ! ດຽວນີ້ຂ້ອຍຫວັງວ່າເຈົ້າຈະເລີ່ມເຫັນຮູບແບບບາງຢ່າງທີ່ ກຳ ລັງເກີດຂື້ນຈາກການທ່ອງທ່ຽວທີ່ມີລົມບ້າຫມູນີ້ທີ່ພວກເຮົາ ກຳ ລັງປະຕິບັດຢູ່. ລາຍການຕໍ່ໄປໃນບັນຊີແມ່ນຄຸນສົມບັດການອັບເດດ.

ພວກເຮົາ ກຳ ລັງຈະເລີ່ມຕົ້ນທີ່ອົງປະກອບ DOM ທີ່ແທ້ຈິງແລະຕິດຕາມມັນໄປຫາ server ແລະກັບໄປຫາລູກຄ້າ. ກ່ອນອື່ນ ໝົດ ພວກເຮົາຕ້ອງຮູ້ເວລາທີ່ຫົວຂໍ້ຫລືຮ່າງກາຍຂອງບັນທຶກ ໜຽວ ກຳ ລັງຖືກປ່ຽນແປງ. AngularJS ປະຕິບັດຕໍ່ອົງປະກອບແບບຟອມທີ່ເປັນສ່ວນ ໜຶ່ງ ຂອງຮູບແບບຂໍ້ມູນດັ່ງນັ້ນທ່ານສາມາດເຊື່ອມໂຍງຂໍ້ມູນການຜູກມັດຂໍ້ມູນສອງທາງໃນພາບຖ່າຍ. ເພື່ອເຮັດສິ່ງນີ້ໃຫ້ໃຊ້ ng-model ທິດທາງແລະໃສ່ໃນຊັບສິນທີ່ທ່ານຕ້ອງການຜູກມັດ. ໃນກໍລະນີນີ້ພວກເຮົາຈະໃຊ້ note.title ແລະ note.body ຕາມ ລຳ ດັບ.

ເມື່ອທັງສອງຄຸນສົມບັດເຫຼົ່ານີ້ປ່ຽນແປງພວກເຮົາຕ້ອງການເກັບ ກຳ ຂໍ້ມູນນັ້ນຜ່ານໄປ. ພວກເຮົາເຮັດ ສຳ ເລັດສິ່ງນີ້ດ້ວຍ ng-ປ່ຽນ ທິດທາງແລະນໍາໃຊ້ມັນເພື່ອໂທຫາ updateNote ແລະຜ່ານວັດຖຸສິ່ງຂອງບັນທຶກຕົວມັນເອງ. AngularJS ເຮັດການກວດສອບເປື້ອນທີ່ສະຫລາດຫລາຍເພື່ອກວດເບິ່ງວ່າມູນຄ່າຂອງສິ່ງໃດກໍ່ຕາມຢູ່ໃນ ng-model ມີການປ່ຽນແປງແລະຫຼັງຈາກນັ້ນປະຕິບັດ ຄຳ ເວົ້າທີ່ຢູ່ໃນ ng-ປ່ຽນ.

input ng-model = "note.title" ng-change = "updateNote (ບັນທຶກ)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (ບັນທຶກ)"> {{note.body}} / textarea>

ຈຸດອ່ອນຂອງການ ນຳ ໃຊ້ ng-ປ່ຽນ ແມ່ນວ່າການຫັນເປັນທ້ອງຖິ່ນໄດ້ເກີດຂື້ນແລ້ວແລະພວກເຮົາພຽງແຕ່ຮັບຜິດຊອບຕໍ່ການສົ່ງຕໍ່ຂ່າວສານ. ໃນຕົວຄວບຄຸມ, updateNote ໄດ້ຖືກເອີ້ນແລະຈາກບ່ອນນັ້ນພວກເຮົາຈະ ນຳ ສະ ເໜີ ຂ່າວປະເສີດ updateNote ເຫດການ ສຳ ລັບ server ຂອງພວກເຮົາອອກອາກາດໃຫ້ລູກຄ້າຄົນອື່ນ.

app.directive ('nplaumNote', ໜ້າ ທີ່ (ເຕົ້າຮັບ) {
var controller = function ($ ຂອບເຂດ) {
$ scope.updateNote = ໜ້າ ທີ່ (ບັນທຶກ) {
socket.emit ('updateNote', ບັນທຶກ);
};
};
});

ແລະໃນຕົວຄວບຄຸມທິດທາງ, ພວກເຮົາ ກຳ ລັງຟັງ ສຳ ລັບ ຄຳ ແນະ ນຳ onNoteUpdated ເຫດການທີ່ຈະຮູ້ເວລາທີ່ບັນທຶກຈາກລູກຄ້າຄົນອື່ນໄດ້ຖືກປັບປຸງເພື່ອໃຫ້ພວກເຮົາສາມາດປັບປຸງສະບັບທ້ອງຖິ່ນຂອງພວກເຮົາ.

var controller = function ($ ຂອບເຂດ) {
// ເຂົ້າມາ
socket.on ('onNoteUpdated', ໜ້າ ທີ່ (ຂໍ້ມູນ) {
// ປັບປຸງໃຫ້ທັນຖ້າມີບັນທຶກດຽວກັນ
ຖ້າ (data.id == $ scope.note.id) {

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

13. ການເຄື່ອນຍ້າຍບັນທຶກທີ່ ໜຽວ

ໃນຈຸດນີ້ພວກເຮົາໄດ້ເຮັດພື້ນຖານອ້ອມຮອບສະລອຍນໍ້າ CRUD kiddie ແລະຊີວິດກໍ່ດີ! ພຽງແຕ່ເພື່ອຈຸດປະສົງຂອງການເລົ້າໂລມເພື່ອສ້າງຄວາມປະທັບໃຈໃຫ້ ໝູ່ ເພື່ອນຂອງທ່ານ, ພວກເຮົາຈະເພີ່ມຄວາມສາມາດໃນການຍ້າຍບັນທຶກອ້ອມ ໜ້າ ຈໍແລະປັບປຸງຈຸດປະສານງານໃນເວລາຈິງ. ຢ່າຕົກໃຈ - ມັນເປັນພຽງສອງສາມເສັ້ນຂອງລະຫັດ. ການເຮັດວຽກ ໜັກ ທັງ ໝົດ ນີ້ ກຳ ລັງຈະ ໝົດ ໄປ. ຂ້ອຍ​ສັນ​ຍາ!

ພວກເຮົາໄດ້ເຊີນແຂກພິເສດ, jQueryUI, ມາຮ່ວມງານລ້ຽງ, ແລະພວກເຮົາໄດ້ເຮັດທຸກຢ່າງເພື່ອເປັນບ່ອນພັກຜ່ອນ. ການເພີ່ມຄວາມສາມາດໃນການລາກບັນທຶກໃນທ້ອງຖິ່ນພຽງແຕ່ໃຊ້ລະຫັດເສັ້ນດຽວເທົ່ານັ້ນ. ຖ້າທ່ານເພີ່ມເຂົ້າ element.draggable (); ກັບ ໜ້າ ທີ່ linker ຂອງທ່ານທ່ານຈະເລີ່ມໄດ້ຍິນ 'Eye of Tiger' ໂດຍ Survivor ເພາະວ່າຕອນນີ້ທ່ານສາມາດລາກບັນທຶກຂອງທ່ານໄວ້.

ພວກເຮົາຢາກຮູ້ວ່າການລາກໄດ້ຢຸດເຊົາແລະຈັບເອົາຈຸດປະສານງານ ໃໝ່ ເພື່ອສົ່ງຕໍ່ໄປ. jQueryUI ໄດ້ຖືກສ້າງຂຶ້ນໂດຍຄົນທີ່ມີສະຕິປັນຍາຫຼາຍ, ສະນັ້ນໃນເວລາທີ່ການລາກລາກຢຸດທ່ານພຽງແຕ່ຕ້ອງການ ກຳ ນົດຟັງຊັນການເອີ້ນຄືນ ສຳ ລັບເຫດການຢຸດ. ພວກເຮົາຈັບ note.id ປິດຂອບເຂດວັດຖຸແລະຄ່າ CSS ເບື້ອງຊ້າຍແລະເທິງຈາກ ui ຈຸດປະສົງ. ດ້ວຍຄວາມຮູ້ນັ້ນພວກເຮົາເຮັດໃນສິ່ງທີ່ພວກເຮົາໄດ້ເຮັດມາຕະຫຼອດ: ເປີດເຜີຍ!

app.directive ('StickNote', ໜ້າ ທີ່ (ເຕົ້າຮັບ) {
var linker = function (ຂອບເຂດ, ອົງປະກອບ, attrs) {
element.draggable ({
ຢຸດ: ໜ້າ ທີ່ (ເຫດການ, ui) {
socket.emit ('moveNote', {
id: scope.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', ໜ້າ ທີ່ (ຂໍ້ມູນ) {
// ປັບປຸງໃຫ້ທັນຖ້າມີບັນທຶກດຽວກັນ
ຖ້າ (data.id == scope.note.id) {
element.animate ({
ຊ້າຍ: data.x,
ດ້ານເທິງ: data.y
});
}
});
};
});

ໃນຈຸດນີ້ມັນບໍ່ຄວນແປກໃຈເລີຍທີ່ພວກເຮົາຍັງໄດ້ຮັບຟັງເຫດການທີ່ກ່ຽວຂ້ອງກັບການເຄື່ອນໄຫວຈາກການບໍລິການຊັອກເກັດ. ໃນກໍລະນີນີ້ມັນແມ່ນ onNoteMoved ເຫດການແລະຖ້າບັນທຶກແມ່ນການຈັບຄູ່ແລ້ວພວກເຮົາຈະປັບປຸງຄຸນສົມບັດ CSS ດ້ານຊ້າຍແລະເທິງ. Bam! ແລ້ວ!

14. ໂບນັດ

ນີ້ແມ່ນພາກສ່ວນເງິນທີ່ຂ້ອຍຈະບໍ່ລວມຖ້າຂ້ອຍບໍ່ ໝັ້ນ ໃຈວ່າເຈົ້າສາມາດບັນລຸມັນໄດ້ພາຍໃນເວລາບໍ່ຮອດ 10 ນາທີ. ພວກເຮົາ ກຳ ລັງຈະ ນຳ ໃຊ້ເຄື່ອງແມ່ຂ່າຍທີ່ມີຊີວິດຊີວາ (ຂ້ອຍຍັງແປກໃຈວ່າມັນງ່າຍທີ່ຈະເຮັດໄດ້ແນວໃດ).

ກ່ອນອື່ນ ໝົດ, ທ່ານ ຈຳ ເປັນຕ້ອງລົງທະບຽນທົດລອງໃຊ້ Nodejitsu ຟຣີ. ການທົດລອງແມ່ນບໍ່ເສຍຄ່າເປັນເວລາ 30 ວັນ, ເຊິ່ງດີເລີດ ສຳ ລັບການເຮັດໃຫ້ຕີນຂອງທ່ານຊຸ່ມ.

ເມື່ອທ່ານສ້າງບັນຊີແລ້ວທ່ານຕ້ອງຕິດຕັ້ງ jitsu, ເຊິ່ງທ່ານສາມາດເຮັດໄດ້ຈາກເສັ້ນ ຄຳ ສັ່ງຜ່ານ $ npm ຕິດຕັ້ງ jitsu -g.

ຫຼັງຈາກນັ້ນທ່ານ ຈຳ ເປັນຕ້ອງເຂົ້າສູ່ລະບົບຈາກເສັ້ນ ຄຳ ສັ່ງຜ່ານ $ jitsu ເຂົ້າສູ່ລະບົບ ແລະໃສ່ຂໍ້ມູນປະ ຈຳ ຕົວຂອງທ່ານ.

ໃຫ້ແນ່ໃຈວ່າທ່ານຢູ່ໃນແອັບ your ຂອງທ່ານໂດຍກົງ, ພິມ $ jitsu ໃຊ້ແລ້ວ ແລະກ້າວຜ່ານ ຄຳ ຖາມ. ຂ້ອຍມັກຈະຕັ້ງຄ່າໄວ້ໃຫ້ຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້, ຊຶ່ງ ໝາຍ ຄວາມວ່າຂ້ອຍຕັ້ງຊື່ຂອງຂ້ອຍແຕ່ບໍ່ແມ່ນໂດເມນຍ່ອຍ.

ແລະ, ຫມູ່ເພື່ອນທີ່ຮັກແພງຂອງຂ້ອຍ, ນັ້ນແມ່ນສິ່ງທີ່ມັນມີຢູ່! ທ່ານຈະໄດ້ຮັບ URL ໄປຫາ ຄຳ ຮ້ອງສະ ໝັກ ຂອງທ່ານຈາກຜົນໄດ້ຮັບຂອງເຊີບເວີເມື່ອມັນ ນຳ ໃຊ້ແລ້ວແລະພ້ອມທີ່ຈະໄປ.

15. ສະຫຼຸບ

ພວກເຮົາໄດ້ກວມເອົາພື້ນທີ່ AngularJS ຫຼາຍໃນບົດຂຽນນີ້ແລະຂ້ອຍຫວັງວ່າເຈົ້າຈະມີຄວາມມ່ວນຫຼາຍໃນຂະບວນການນີ້. ຂ້ອຍຄິດວ່າມັນແມ່ນສິ່ງທີ່ເຈົ້າສາມາດເຮັດ ສຳ ເລັດກັບ AngularJS ແລະ Socket.io ໃນລະຫັດປະມານ 200 ເສັ້ນ.

ມີສອງສາມຢ່າງທີ່ຂ້າພະເຈົ້າບໍ່ໄດ້ເອົາໃຈໃສ່ເພື່ອຈຸດປະສົງຕົ້ນຕໍ, ແຕ່ຂ້າພະເຈົ້າຂໍແນະ ນຳ ໃຫ້ທ່ານດຶງແຫຼ່ງແລະຫຼີ້ນອ້ອມກັບໂປແກຼມ ນຳ ໃຊ້. ພວກເຮົາໄດ້ສ້າງພື້ນຖານທີ່ເຂັ້ມແຂງ, ແຕ່ວ່າມັນຍັງມີຫຼາຍລັກສະນະທີ່ທ່ານສາມາດເພີ່ມ. ຮັບແຮັກ!

Lukas Ruebbelke ແມ່ນຜູ້ທີ່ມີຄວາມກະຕືລືລົ້ນດ້ານເຕັກໂນໂລຢີແລະເປັນຜູ້ຂຽນຮ່ວມກັບ AngularJS ໃນ Action for Manning Publications. ສິ່ງທີ່ລາວມັກທີ່ສຸດແມ່ນເຮັດໃຫ້ຄົນຕື່ນເຕັ້ນກ່ຽວກັບເຕັກໂນໂລຢີ ໃໝ່ ຄືກັບລາວ. ລາວເປັນຜູ້ ນຳ ໃຊ້ກຸ່ມຜູ້ ນຳ ໃຊ້ເວັບໄຊທ໌ Phoenix ແລະໄດ້ຈັດການແຮກເກີຫຼາຍຄູ່ກັບເພື່ອນຮ່ວມງານໃນຄະດີອາຍາ.

ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!

  • ວິທີການສ້າງແອັບ.
  • ຕົວອັກສອນເວັບທີ່ພວກເຮົາມັກ - ແລະພວກມັນຈະບໍ່ເສຍຄ່າໃຊ້ຈ່າຍ
  • ຄົ້ນພົບສິ່ງທີ່ເປັນຕໍ່ໄປ ສຳ ລັບ Augmented Reality
  • ດາວໂຫລດໂຄງສ້າງທີ່ບໍ່ເສຍຄ່າ: ຄວາມລະອຽດສູງແລະພ້ອມທີ່ຈະ ນຳ ໃຊ້ດຽວນີ້
ບົດຂຽນທີ່ຜ່ານມາ

ຊຸດສະຖາປັດຕະຍະ ກຳ Lego ທີ່ດີທີ່ສຸດໃນປີ 2021
ມາດຕາຕໍ່ໄປ

6 ພັນປີທີ່ມີຄວາມຄິດສ້າງສັນເປີດເຜີຍເຄື່ອງມືອັນດັບ ໜຶ່ງ ຂອງພວກເຂົາ
ທາງເລືອກຂອງບັນນາທິການ
ຫນູທີ່ດີທີ່ສຸດ ສຳ ລັບ Mac ໃນປີ 2021
ອ່ານ​ຕື່ມ

ຫນູທີ່ດີທີ່ສຸດ ສຳ ລັບ Mac ໃນປີ 2021

ເດືອນພຶດສະພາ 2024
ຄູ່ມືທີ່ມີປະໂຫຍດຂອງພວກເຮົາກັບຫນູທີ່ດີທີ່ສຸດ ສຳ ລັບ Mac ໃນປີ 2021 ຈະຊ່ວຍໃຫ້ທ່ານເລືອກ ໜູ ທີ່ສຸດເພື່ອໃຊ້ຄຽງຄູ່ກັບ Mac ຫລື MacBook ຂອງທ່ານ. ໃນຂະນະທີ່ເຄື່ອງ Mac ທັງ ໝົດ ມາພ້ອມກັບ ໜູ ລວມ, ທ່ານອາດຈະຊອກຫາຕົວເ...
ເປັນຫຍັງການອອກແບບໃນປັດຈຸບັນຈຶ່ງ ສຳ ຄັນ
ອ່ານ​ຕື່ມ

ເປັນຫຍັງການອອກແບບໃນປັດຈຸບັນຈຶ່ງ ສຳ ຄັນ

ເດືອນພຶດສະພາ 2024
ນີ້ຮູ້ສຶກວ່າເປັນເວລາທີ່ດີເລີດທີ່ຈະເປັນຜູ້ອອກແບບ. ໃນເວລາທີ່ David Turner ແລະຂ້ອຍໄດ້ເລີ່ມຕົ້ນ Turner Duckworth 24 ປີກ່ອນ, ການໂຄສະນາແມ່ນຢູ່ເທິງສຸດແລະການອອກແບບ - ປະເພດການອອກແບບຂອງພວກເຮົາຢ່າງ ໜ້ອຍ - ແມ່ນຢູ...
Bristol's See No Evil ງານບຸນສິລະປະຕາມຖະ ໜົນ
ອ່ານ​ຕື່ມ

Bristol's See No Evil ງານບຸນສິລະປະຕາມຖະ ໜົນ

ເດືອນພຶດສະພາ 2024
ໃນຊ່ວງລຶະເບິ່ງຮ້ອນທີ່ຜ່ານມາ, ນັກສະແດງຖະ ໜົນ ຖະ ໜົນ Inkie ທີ່ຮັກແພງທີ່ສຸດຂອງ Bri tol ໄດ້ຈັດງານເພື່ອຮັບປະກັນງານບຸນໃນຫົວໃຈຂອງເມືອງທີ່ສາມາດອະທິບາຍໄດ້ວ່າເປັນສູນກາງຂອງສິນລະປະຖະ ໜົນ ໃນທົ່ວໂລກ.ຫຼັງຈາກການໂຄສະນ...