לוח שיתוף פעולה של AngularJS עם Socket.io

תוֹכֶן

• 01. השרת
• 02. העצמות החשופות
• 03. הכריזו על התלות שלכם
• 04. חבר את Socket.io
• 05. הפעל את המנועים שלך!
• 06. כמה מחשבות גלויות לפני שעוברים הלאה
• 07. הלקוח
• 08. העצמות החשופות
• 09. יצירת פתק דביק
• 10. הצגת הפתקים הדביקים
• 11. מחיקת פתק דביק
• 12. עדכון פתק דביק
• 13. העברת פתק דביק
• 14. הבונוס
• 15. מסקנה
• אהבתי את זה? תקרא את זה!

• נדרש ידע: JavaScript ביניים
• דורש: Node.js, NPM
• זמן הפרויקט: שעתיים

AngularJS מתאים במיוחד ליצירת יישומים עשירים בצד הלקוח בדפדפן וכשמוסיפים מעט Socket.io לתערובת הדברים נעשים ממש מעניינים. במאמר זה אנו הולכים לבנות לוח שיתוף פעולה בזמן אמת המשתמש ב- AngularJS ליישום בצד הלקוח ו- Socket.io כדי לשתף מצב בין כל הלקוחות המחוברים.

בואו נכסה מעט על ניקיון הבית לפני שנתחיל. אני הולך להניח שיש לך אחיזה בסיסית ב- HTML וב- JavaScript מכיוון שאני לא מתכוון לכסות כל פינה קטנה בקוד. למשל, אני לא מתכוון לקרוא לקבצי CSS ו- JavaScript שהכללתי בראש קובץ ה- HTML מכיוון שאין שם מידע חדש.

כמו כן, אני ממליץ לך לתפוס את הקוד מחשבון GitHub שלי כדי להמשיך. לחברתי הטובה בריאן פורד יש גם זרע מעולה של Socket.io, עליו ביססתי כמה מהרעיונות המקוריים שלי.

ארבעת המאפיינים העיקריים שאנו רוצים בלוח השיתוף הם היכולת ליצור הערה, לקרוא את ההערות, לעדכן הערה, למחוק פתק, ולכיף להעביר הערה על הלוח. כן, זה נכון, אנו מתמקדים בתכונות CRUD סטנדרטיות. אני מאמין שעל ידי התמקדות בתכונות בסיסיות אלה, נוכל לכסות מספיק קוד כדי שדפוסים יופיעו כך שתוכל לקחת אותם ולהחיל אותם במקום אחר.

01. השרת

נתחיל קודם עם שרת Node.js מכיוון שהוא ישמש כבסיס שעליו נבנה את כל השאר.

אנו הולכים לבנות שרת Node.js עם Express ו- Socket.io. הסיבה שאנו משתמשים באקספרס היא שהיא מספקת מנגנון נחמד להקמת שרת נכסים סטטי בתוך Node.js. אקספרס מגיע עם חבורה של תכונות ממש מדהימות, אך במקרה זה אנו נשתמש בו בכדי לחצות את היישום בצורה נקייה בין השרת ללקוח.

(אני פועל מתוך הנחה שיש לך התקנת Node.js ו- NPM. חיפוש מהיר בגוגל יראה לך כיצד להתקין את אלה אם אינך עושה זאת).

02. העצמות החשופות

אז כדי לבנות את העצמות החשופות של השרת, עלינו לעשות כמה דברים כדי להתחיל ולהפעיל.

// app.js

// A.1
var express = דורש ('express'),
אפליקציה = express ();
שרת = דורש ('http'). createServer (אפליקציה),
io = דורש ('socket.io'). האזן (שרת);

// א.2
app.configure (פונקציה () {
app.use (express.static (__ dirname + '/ public'));
});

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

A.1 אנו מצהירים ומיידירים את מודולי Node.js שלנו כדי שנוכל להשתמש בהם ביישום שלנו. אנו מכריזים על אקספרס, מיישרים את אקספרס ואז יוצרים שרת HTTP ושולחים אליו את מופע האקספרס. ומשם אנו מיישרים את Socket.io ואומרים לו לפקוח עין על מופע השרת שלנו.

A.2 ואז אנו אומרים לאפליקציית האקספרס שלנו להשתמש בספרייה הציבורית שלנו כדי להגיש קבצים.

A.3 אנו מפעילים את השרת ואומרים לו להאזין ליציאה 1337.

עד כה זה היה די כואב ומהיר. אני מאמין שיש לנו פחות מ -10 שורות בקוד וכבר יש לנו שרת פונקציונלי של Node.js. הָלְאָה!

03. הכריזו על התלות שלכם

// packages.json
{
"name": "לוח זוויתי-קולב",
"description": "מועצת שיתוף הפעולה של AngularJS",
"גרסה": "0.0.1-1",
"פרטי": נכון,
"תלות": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

אחת התכונות הנחמדות ביותר של NPM היא היכולת להכריז על התלות שלך ב- חבילות.json ואז להתקין אותם באופן אוטומטי באמצעות התקנת npm בשורת הפקודה.

04. חבר את Socket.io

הגדרנו כבר את תכונות הליבה הרצויות באפליקציה ולכן עלינו להגדיר מאזיני אירועים Socket.io וסגירה מתאימה לטיפול באירוע לכל פעולה.

בקוד שלמטה תוכלו להבחין כי למעשה מדובר בתצורה של מאזינים לאירועים והתקשרות חוזרת. האירוע הראשון הוא חיבור אירוע, שבו אנו משתמשים כדי לחבר את האירועים האחרים שלנו בסגירה.

io.sockets.on ('חיבור', פונקציה (שקע) {
socket.on ('createNote', function (data) {
socket.broadcast.emit ('onNoteCreated', נתונים);
});

socket.on ('updateNote', פונקציה (נתונים) {
socket.broadcast.emit ('onNoteUpdated', נתונים);
});

socket.on ('deleteNote', פונקציה (נתונים) {
socket.broadcast.emit ('onNoteDeleted', נתונים);
});

socket.on ('moveNote', function (data) {
socket.broadcast.emit ('onNoteMoved', נתונים);
});
});

מכאן אנו מוסיפים מאזינים ל createNote, updateNote, deleteNote ו moveNote. ובפונקציית ההתקשרות, אנו פשוט משדרים איזה אירוע קרה כדי שניתן יהיה להודיע ​​לכל לקוח שמאזין כי האירוע קרה.

יש כמה דברים שכדאי לציין עליהם לגבי פונקציות החזרה למטפלים באירועים. האחת, אם אתה רוצה לשלוח אירוע לכל השאר חוץ מהלקוח שפלט את האירוע שאתה מכניס מִשׁדָר לפני ה לִפְלוֹט שיחת פונקציה. שנית, אנחנו פשוט מעבירים את המטען של האירוע לצדדים המעוניינים בכדי שיוכלו לעבד אותו איך שהם רואים לנכון.

05. הפעל את המנועים שלך!

כעת, לאחר שהגדרנו את התלות שלנו והגדרנו את יישום Node.js שלנו בכוחות Express ו- Socket.io, די פשוט לאתחל את שרת Node.js.

ראשית התקן את התלות שלך ב- Node.js כך:

התקנת npm

ואז אתה מפעיל את השרת כך:

צומת app.js

ואז! אתה נכנס לכתובת זו בדפדפן שלך. באם!

06. כמה מחשבות גלויות לפני שעוברים הלאה

אני בעיקר מפתח חזיתית והתחלתי קצת להבהיל לחבר שרת Node.js ליישום שלי. החלק AngularJS היה JavaScript מהיר אך מצידו של השרת? תור את המוזיקה המצמררת מזריקת אימה.

אבל, רציתי לחלוטין לגלות שאני יכול להקים שרת אינטרנט סטטי בכמה שורות קוד בלבד ובעוד כמה שורות להשתמש ב- Socket.io כדי לטפל בכל האירועים בין הדפדפנים. וזה עדיין היה רק ​​JavaScript! לצורך העמידה בזמנים אנו מכסים רק כמה תכונות, אך אני מקווה שבסוף המאמר תראה שקל לשחות - והקצה העמוק של הבריכה לא כל כך מפחיד.

07. הלקוח

עכשיו כשיש לנו את הבסיס האיתן שלנו עם השרת שלנו, בואו נעבור לחלק האהוב עלי - הלקוח! אנו נשתמש ב- AngularJS, jQueryUI עבור החלק הניתן לגרירה וב- Bootstrap של Twitter עבור בסיס סגנון.

08. העצמות החשופות

כעניין של העדפה אישית, כשאני מפעיל יישום AngularJS חדש אני רוצה להגדיר במהירות את המינימום שאני יודע שאצטרך להתחיל בעבודה ואז להתחיל לחזור על זה מהר ככל האפשר.

יש לאתחל את כל יישומי AngularJS עם בקר אחד לפחות ולכן בדרך כלל אני תמיד מתחיל.

כדי לבצע אתחול אוטומטי של היישום, עליך פשוט להוסיף אותו אפליקציה ng לצומת ה- HTML בו ברצונך שהיישום יחיה. לרוב, הוספתו לתג HTML תהיה מקובלת לחלוטין. הוספתי גם תכונה ל אפליקציה ng להגיד לו שאני רוצה להשתמש ב- אפליקציה מודול, אותו אני אגדיר תוך רגע.

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

אני יודע שאני אצטרך לפחות בקר אחד ולכן אקרא לזה באמצעות ng-controller ולהקצות לו נכס של MainCtrl.

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

אז עכשיו אנחנו על הברגה של מודול בשם אפליקציה ובקר בשם MainCtrl. בואו ונמשיך ליצור אותם עכשיו.

יצירת מודול היא פשוטה למדי. אתה מגדיר את זה על ידי התקשרות זוויתי. מודול ולתת לו שם. להתייחסות עתידית, הפרמטר השני של מערך ריק הוא המקום בו ניתן להזריק מודולי משנה לשימוש ביישום. זה מחוץ לתחום הדרכה זו, אך הוא שימושי כאשר היישום שלך מתחיל לגדול במורכבות ובצרכים.

// פומבי / js / collab.js
var app = angular.module (’app’, []);

אנחנו הולכים להכריז על מספר מצייני מקום ריקים ב אפליקציה מודול החל מ- MainCtrl לְהַלָן.את כל אלה נמלא בהמשך אך רציתי להמחיש את המבנה הבסיסי כבר מההתחלה.

app.controller ('MainCtrl', פונקציה ($ scope) {});

אנו הולכים לעטוף את הפונקציונליות של Socket.io ב- שֶׁקַע שירות כדי שנוכל להכיל את האובייקט הזה ולא להשאיר אותו מרחף במרחב השמות הגלובלי.

app.factory ('שקע', פונקציה ($ rootScope) {});

ובעודנו בעניין, אנו נכריז על הנחיה שנקראת פתק דביק שאנו נשתמש בהם כדי לתמצת את הפונקציונליות של פתקים דביקים.

app.directive ('stickyNote', פונקציה (שקע) {});

אז בואו נסקור מה עשינו עד כה. יש לנו את האתחול של היישום באמצעות אפליקציה ng והכריז על בקר היישומים שלנו ב- HTML. הגדרנו גם את מודול היישום ויצרנו את MainCtrl בקר, ה- שֶׁקַע השירות וה פתק דביק הוֹרָאָה.

09. יצירת פתק דביק

כעת, כאשר יש לנו את השלד של יישום AngularJS, נתחיל לבנות את תכונת היצירה.

app.controller ('MainCtrl', פונקציה ($ scope, socket) {// B.1
$ scope.notes = []; // ב .2

// נכנס
socket.on ('onNoteCreated', פונקציה (נתונים) {// B.3
$ scope.notes.push (נתונים);
});

// יוצא
$ scope.createNote = פונקציה () {// B.4
הערת var = {
id: תאריך חדש (). getTime (),
כותרת: 'הערה חדשה',
גוף: 'בהמתנה'
};

$ 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 שיטת קריאה כערך התכונה.

כפתור id = "createButton" ng-click = "createNote ()"> צור הערה / כפתור>

הגיע הזמן לסקירה מהירה של מה שעשינו עד כה. הוספנו מערך ל- היקף $ חפץ ב MainCtrl זה יכיל את כל ההערות ליישום. הוספנו גם א createNote שיטה על היקף $ התנגד ליצור פתק מקומי חדש ואז לשדר את ההערה ללקוחות האחרים באמצעות ה- שֶׁקַע שֵׁרוּת. הוספנו גם מאזין לאירועים ב- שֶׁקַע שירות כדי שנוכל לדעת מתי לקוחות אחרים יצרו הערה כדי שנוכל להוסיף אותה לאוסף שלנו.

10. הצגת הפתקים הדביקים

כעת יש לנו אפשרות ליצור אובייקט פתק ולשתף אותו בין הדפדפנים אך כיצד אנו מציגים אותו? כאן נכנסות הנחיות.

הנחיות ומורכבויותיהן הוא נושא עצום, אך הגרסה הקצרה היא שהן מספקות דרך להרחיב אלמנטים ותכונות עם פונקציונליות מותאמת אישית. הוראות הן בקלות החלק האהוב עלי ביותר על AngularJS מכיוון שהיא מאפשרת ליצור למעשה DSL שלם (שפה ספציפית לתחום) סביב היישום שלך ב- HTML.

זה טבעי שמכיוון שאנחנו הולכים ליצור פתקים דביקים ללוח השיתוף שלנו שעלינו ליצור פתק דביק הוֹרָאָה. הנחיות מוגדרות על ידי קריאת שיטת ההנחיה על מודול שברצונך להכריז עליו והעברת שם ופונקציה המחזירות אובייקט להגדרת הנחיה. לאובייקט הגדרת ההנחיה יש הרבה מאפיינים אפשריים שתוכל להגדיר עליו, אבל אנחנו נשתמש רק בכמה מהם למטרות שלנו כאן.

אני ממליץ לך לבדוק את תיעוד AngularJS כדי לראות את כל רשימות המאפיינים שאתה יכול להגדיר באובייקט הגדרת ההנחיה.

app.directive ('stickyNote', פונקציה (שקע) {
קישור var = פונקציה (היקף, אלמנט, attrs) {};

בקר בקר = פונקציה ($ scope) {};

להחזיר {
להגביל: 'A', // C.1
קישור: מקשר, // C.2
בקר: בקר, // C.3
היקף: {// ג.4
הערה: '=',
ondelete: '&'
}
};
});

C.1 אתה יכול להגביל את ההנחיה שלך לסוג מסוים של אלמנט HTML. שני הנפוצים ביותר הם אלמנט או תכונה, עליהם אתה מצהיר ה ו א בהתאמה. אתה יכול גם להגביל את זה לשיעור CSS או לתגובה, אך אלה אינם נפוצים.

C.2 פונקציית הקישור היא המקום בו שמים את כל קוד המניפולציה של DOM. ישנם כמה יוצאים מן הכלל שמצאתי, אך זה תמיד נכון (לפחות 99 אחוז מהמקרים). זהו כלל יסוד בסיסי של AngularJS ולכן הדגשתי זאת.

C.3 פונקציית הבקר פועלת בדיוק כמו הבקר הראשי שהגדרנו עבור היישום אך היקף $ האובייקט שאנו מעבירים אליו הוא ספציפי לאלמנט DOM שההנחיה חיה עליו.

C.4 ל- AngularJS יש מושג של היקף מבודד, המאפשר להגדיר במפורש כיצד היקף ההנחיה מתקשר עם העולם החיצון. אם לא היינו מצהירים על היקף ההוראה הייתה יורשת באופן מרומז מהיקף ההורה עם יחסי הורה וילד. בהרבה מקרים זה לא אופטימלי. על ידי בידוד ההיקף אנו מקטינים את הסיכויים שהעולם החיצון יכול להשפיע באופן שלילי ובאופן שלילי על מצב ההנחיה שלך.

הכרזתי על מחייב נתונים דו כיווני ל הערה עם ה = סמל וביטוי המחייב למחוק עם ה & סֵמֶל. אנא קרא את תיעוד AngularJS לקבלת הסבר מלא על היקף מבודד מכיוון שהוא אחד הנושאים המסובכים יותר במסגרת.

אז בואו באמת להוסיף פתק דביק ל- DOM.

כמו כל מסגרת טובה, AngularJS מגיע עם כמה תכונות ממש נהדרות מהקופסה. אחת התכונות הכי שימושיות היא נג-חזור. הנחיה זו של AngularJS מאפשרת לך להעביר מערך של אובייקטים והיא משכפלת את התג שבו הוא נמצא פעמים רבות ככל שיש פריטים במערך. במקרה שלמטה, אנו חוזרים על ה- הערות מערך ושכפול של div אלמנט וילדיו לאורך הערות מַעֲרָך.

div stick-note ng-repeat = "הערה בהערות" הערה = "הערה" ondelete = "deleteNote (id)">
כפתור סוג = "כפתור" ng-click = "deleteNote (note.id)"> × / button>
קלט ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"
> {{note.body}} / textarea>
/ div>

היופי של נג-חזור היא שהיא קשורה לכל מערך שתעבור אליו וכאשר תוסיף פריט למערך, רכיב ה- DOM שלך יתעדכן אוטומטית. אתה יכול לקחת את זה צעד קדימה ולחזור לא רק על רכיבי DOM סטנדרטיים אלא גם על הוראות מותאמות אישית אחרות. זו הסיבה שאתה רואה פתק דביק כתכונה על האלמנט.

ישנן שתי פיסות קוד מותאמות אישית שצריך לברר. בידדנו את ההיקף על ה פתקים דביקים הנחיה על שני נכסים. הראשון הוא היקף המבודד המוגדר המחייב הערה תכונה. המשמעות היא שבכל פעם שאובייקט ההערה ישתנה בהיקף האב, הוא יעדכן אוטומטית את אובייקט ההערה המתאים בהנחיה ולהיפך. ההיקף המבודד האחר שהוגדר הוא על למחוק תְכוּנָה. המשמעות של זה היא שמתי למחוק מכונה בהוראה, היא תקרא לכל ביטוי שיש ב למחוק תכונה על אלמנט DOM שמייצר את ההנחיה.

כאשר הנחיה מופעלת היא מוסיפה ל- DOM ופונקציית הקישור נקראת. זוהי הזדמנות מושלמת להגדיר כמה מאפייני DOM המוגדרים כברירת מחדל באלמנט. פרמטר האלמנטים שאנו מעבירים אליו הוא למעשה אובייקט jQuery וכך נוכל לבצע בו פעולות jQuery.

(AngularJS למעשה מגיע עם קבוצת משנה של jQuery המובנית בתוכו, אך אם כבר כללת את הגרסה המלאה של jQuery, AngularJS תדחה לכך.)

app.directive ('stickyNote', פונקציה (שקע) {
קישור var = פונקציה (היקף, אלמנט, attrs) {
// איזו התחלה של DOM כדי שיהיה נחמד
element.css ('שמאל', '10px');
element.css ('למעלה', '50 פיקסלים');
element.hide (). fadeIn ();
};
});

בקוד לעיל אנו פשוט ממקמים את הפתק הדביק על הבמה ומדהים אותו פנימה.

11. מחיקת פתק דביק

אז עכשיו כשאנחנו יכולים להוסיף ולהציג פתק דביק, הגיע הזמן למחוק פתקים דביקים. יצירת ומחיקה של פתקים דביקים היא עניין של הוספה ומחיקה של פריטים מהמערך שהפתקים קשורים אליו. זו האחריות של היקף ההורה לשמור על מערך זה, ולכן אנו מקורם בבקשת המחיקה מתוך ההנחיה, אך נותנים להיקף ההורה לבצע את ההרמה הכבדה בפועל.

זו הסיבה שעברנו את כל הבעיות ביצירת היקף מבודד המוגדר בהנחיה: כך שההנחיה תוכל לקבל את אירוע המחיקה באופן פנימי ולהעבירו להורה לעיבוד.

שימו לב ל- HTML שבתוך ההנחיה.

כפתור סוג = "כפתור" ng-click = "deleteNote (note.id)"> × / button>

הדבר הבא שאגיד אולי נראה רחוק, אבל זכרו שאנחנו באותו צד וזה יהיה הגיוני אחרי שאפרט. כאשר לוחצים על הכפתור בפינה הימנית העליונה של הפתק הדביק אנו מתקשרים deleteNote על בקר ההנחיה ועובר ב note.id ערך. ואז הבקר מתקשר למחוק, אשר לאחר מכן מבצע כל ביטוי שחיברנו אליו. בינתיים הכל טוב? אנו קוראים לשיטה מקומית בבקר אשר לאחר מכן מעבירה אותה על ידי קריאה לכל ביטוי שהוגדר בהיקף המבודד. הביטוי שנקרא להורה פשוט נקרא deleteNote גם כן.

app.directive ('stickyNote', פונקציה (שקע) {
בקר בקר = פונקציה ($ scope) {
$ scope.deleteNote = פונקציה (id) {
$ scope.ondelete ({
אני עשיתי
});
};
};

להחזיר {
להגביל: 'A',
קישור: מקשר,
בקר: בקר,
היקף: {
הערה: '=',
ondelete: '&'
}
};
});

(בעת שימוש בהיקף מבודד המוגדר על ידי ביטוי, הפרמטרים נשלחים במפת אובייקטים.)

בתחום ההורה, deleteNote מתקשר ועושה מחיקה די סטנדרטית באמצעות זוויתי.לכל אחד פונקציית השירות לחזור על מערך ההערות. לאחר שהפונקציה טיפלה בעסקיה המקומיים היא ממשיכה ומוציאה את האירוע לשאר העולם להגיב בהתאם.

app.controller ('MainCtrl', פונקציה ($ scope, socket) {
$ scope.notes = [];

// נכנס
socket.on ('onNoteDeleted', פונקציה (נתונים) {
$ scope.deleteNote (data.id);
});

// יוצא
$ scope.deleteNote = פונקציה (id) {
var oldNotes = $ scope.notes,
הערות חדשות = [];

angular.forEach (oldNotes, function (note) {
אם (note.id! == id) newNotes.push (הערה);
});

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

12. עדכון פתק דביק

אנו מתקדמים בצורה פנטסטית! עד עכשיו אני מקווה שאתה מתחיל לראות כמה דפוסים מגיחים מסיבוב המערבולת הזה שאנחנו עורכים. הפריט הבא ברשימה הוא תכונת העדכון.

אנו נתחיל במרכיבי ה- DOM בפועל ונעקוב אחריו עד לשרת ונחזור ללקוח. ראשית עלינו לדעת מתי משנים את הכותרת או את גוף הפתק. AngularJS מטפל באלמנטים טופסיים כחלק ממודל הנתונים, כך שתוכל להתחבר לכריכת נתונים דו כיוונית בבת אחת. לשם כך השתמש ב- מודל ng הנחיה והכנס את הנכס שאליו ברצונך לחייב. במקרה זה אנו נשתמש הערה.כותרת ו הערה. גוף בהתאמה.

כאשר אחד מהמאפיינים האלה משתנה אנו רוצים לתפוס את המידע שיעבור. אנו משיגים זאת באמצעות ng- שינוי ולהשתמש בה כדי להתקשר updateNote ולהעביר את עצם הפתק עצמו. AngularJS עושה בדיקה מלוכלכת מאוד חכמה כדי לגלות אם הערך של כל מה שנמצא מודל ng השתנה ואז מבצע את הביטוי שנמצא ng- שינוי.

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

החיסרון בשימוש ng- שינוי הוא שהטרנספורמציה המקומית כבר התרחשה ואנחנו רק האחראים להעברת המסר. בבקר, updateNote נקרא ומשם אנחנו הולכים לפלוט את updateNote אירוע לשרת שלנו לשדר ללקוחות האחרים.

app.directive ('stickyNote', פונקציה (שקע) {
בקר בקר = פונקציה ($ scope) {
$ scope.updateNote = פונקציה (הערה) {
socket.emit ('updateNote', הערה);
};
};
});

ובבקר ההנחיה, אנו מאזינים ל onNoteUpdated אירוע לדעת מתי הערכה מלקוח אחר עודכנה כדי שנוכל לעדכן את הגרסה המקומית שלנו.

בקר בקר = פונקציה ($ scope) {
// נכנס
socket.on ('onNoteUpdated', פונקציה (נתונים) {
// עדכן אם אותה הערה
אם (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', פונקציה (שקע) {
קישור var = פונקציה (היקף, אלמנט, attrs) {
element.draggable ({
עצור: פונקציה (אירוע, ממשק משתמש) {
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 השמאלי והעליון. באם! בוצע!

14. הבונוס

זהו קטע בונוס שלא אכלל אם לא הייתי בטוח לחלוטין שתוכל להשיג זאת בפחות מעשר דקות. אנו הולכים לפרוס לשרת חי (אני עדיין נדהם כמה קל לעשות זאת).

ראשית, עליך להירשם לניסיון Nodejitsu בחינם. המשפט בחינם למשך 30 יום, וזה מושלם לצורך הרטבת הרגליים.

לאחר שיצרת את חשבונך עליך להתקין את חבילת jitsu, שתוכל לעשות משורת הפקודה באמצעות $ npm להתקין jitsu -g.

אז אתה צריך להתחבר משורת הפקודה דרך כניסה $ jitsu והזן את אישוריך.

ודא שאתה נמצא ישירות באפליקציה שלך, הקלד $ jitsu לפרוס ולעבור על השאלות. בדרך כלל אני משאיר כמה שיותר ברירת מחדל, מה שאומר שאני נותן ליישום שלי שם אבל לא תת תחום וכו '.

וחברים יקרים שלי, זה כל מה שיש בזה! תקבל את כתובת ה- URL ליישום שלך מפלט השרת לאחר פריסתו והוא מוכן לשימוש.

15. מסקנה

סקרנו הרבה אדמות AngularJS במאמר זה ואני מקווה שהיה לך כיף רב בתהליך. אני חושב שזה ממש מסודר מה שאתה יכול להשיג עם AngularJS ו- Socket.io בכ 200 שורות קוד.

היו כמה דברים שלא כיסיתי לצורך התמקדות בנקודות העיקריות, אבל אני ממליץ לך להוריד את המקור ולשחק עם היישום. בנינו בסיס חזק, אך עדיין יש הרבה תכונות שתוכל להוסיף. קבל פריצה!

לוקאס ריבבלקה הוא חובב טכנולוגיה ושותף לכתיבת AngularJS in Action for Manning Publications. הדבר החביב עליו ביותר הוא לגרום לאנשים להתרגש מטכנולוגיה חדשה כמוהו. הוא מנהל את קבוצת המשתמשים של יישומי האינטרנט של פיניקס ואירח מספר האקתונים עם שותפיו לעבירה.

אהבתי את זה? תקרא את זה!

• כיצד ליצור אפליקציה
• גופני האינטרנט האהובים עלינו - והם לא עולים שקל
• גלה מה הבא למציאות רבודה
• הורד מרקמים בחינם: ברזולוציה גבוהה ומוכן לשימוש עכשיו