Socket.io के साथ AngularJS सहयोग बोर्ड

लेखक: Peter Berry
निर्माण की तारीख: 14 जुलाई 2021
डेट अपडेट करें: 13 मई 2024
Anonim
सॉकेट आईओ और एक्सप्रेस का उपयोग करके रीयल टाइम सहयोगी व्हाइटबोर्ड एप्लिकेशन | इथिंक टेक्नोलॉजीज
वीडियो: सॉकेट आईओ और एक्सप्रेस का उपयोग करके रीयल टाइम सहयोगी व्हाइटबोर्ड एप्लिकेशन | इथिंक टेक्नोलॉजीज

विषय

  • ज्ञान की जरूरत: इंटरमीडिएट जावास्क्रिप्ट
  • आवश्यकता है: Node.js, NPM
  • परियोजना का समय: 2 घंटे

AngularJS ब्राउज़र में समृद्ध क्लाइंट-साइड एप्लिकेशन बनाने के लिए विशेष रूप से उपयुक्त है और जब आप मिश्रण में थोड़ा सा Socket.io जोड़ते हैं, तो चीजें वास्तव में दिलचस्प हो जाती हैं। इस लेख में हम एक रीयल-टाइम सहयोग बोर्ड बनाने जा रहे हैं जो क्लाइंट-साइड एप्लिकेशन के लिए AngularJS और सभी कनेक्टेड क्लाइंट के बीच स्थिति साझा करने के लिए Socket.io का उपयोग करता है।

आइए शुरू करने से पहले हाउसकीपिंग पर थोड़ा ध्यान दें। मुझे लगता है कि आपको HTML और जावास्क्रिप्ट की बुनियादी समझ है क्योंकि मैं कोड के हर छोटे कोने को कवर नहीं करने जा रहा हूं। उदाहरण के लिए, मैं HTML फ़ाइल के शीर्ष में शामिल CSS और JavaScript फ़ाइलों को कॉल नहीं करने जा रहा हूँ क्योंकि वहाँ कोई नई जानकारी नहीं है।

साथ ही, मैं आपको आगे बढ़ने के लिए मेरे GitHub खाते से कोड प्राप्त करने के लिए प्रोत्साहित करता हूं। मेरे अच्छे दोस्त ब्रायन फोर्ड के पास एक उत्कृष्ट Socket.io बीज भी है, जिस पर मैंने अपने कुछ मूल विचारों को आधारित किया है।

सहयोग बोर्ड में हम जो चार मुख्य विशेषताएं चाहते हैं, वह है एक नोट बनाने, नोट्स को पढ़ने, एक नोट को अपडेट करने, एक नोट को हटाने और, मज़े के लिए, एक नोट को बोर्ड पर ले जाने की क्षमता। हाँ, यह सही है, हम मानक CRUD सुविधाओं पर ध्यान केंद्रित कर रहे हैं। मेरा मानना ​​​​है कि इन मूलभूत विशेषताओं पर ध्यान केंद्रित करके, हमने पैटर्न के उभरने के लिए पर्याप्त कोड कवर किया होगा ताकि आप उन्हें ले जा सकें और उन्हें कहीं और लागू कर सकें।


01. सर्वर

हम पहले Node.js सर्वर के साथ शुरुआत करने जा रहे हैं क्योंकि यह उस नींव के रूप में काम करेगा जिस पर हम बाकी सब कुछ बनाने जा रहे हैं।

हम Express और Socket.io के साथ एक Node.js सर्वर बनाने जा रहे हैं। एक्सप्रेस का उपयोग करने का कारण यह है कि यह Node.js के भीतर एक स्थिर संपत्ति सर्वर स्थापित करने के लिए एक अच्छा तंत्र प्रदान करता है। एक्सप्रेस वास्तव में भयानक सुविधाओं के एक समूह के साथ आता है, लेकिन इस मामले में, हम इसका उपयोग सर्वर और क्लाइंट के बीच एप्लिकेशन को साफ-सुथरा करने के लिए करने जा रहे हैं।

(मैं इस धारणा के तहत काम कर रहा हूं कि आपके पास Node.js और NPM स्थापित हैं। एक त्वरित Google खोज आपको दिखाएगी कि यदि आप नहीं करते हैं तो इन्हें कैसे स्थापित किया जाए।)

02. नंगे हड्डियाँ

तो सर्वर की नंगे हड्डियों को बनाने के लिए, हमें उठने और चलने के लिए कुछ चीजें करने की जरूरत है।

// ऐप.जेएस

// ए.1
वर एक्सप्रेस = आवश्यकता ('एक्सप्रेस'),
ऐप = एक्सप्रेस ();
सर्वर = आवश्यकता ('http')। createServer (ऐप),
आईओ = की आवश्यकता है ('सॉकेट.आईओ')। सुनो (सर्वर);

// ए.2
ऐप.कॉन्फ़िगर (फ़ंक्शन() {
app.use (एक्सप्रेस.स्टैटिक (__dirname + '/ public'));
});

// ए.3
सर्वर। सुनो (1337);


A.1 हम अपने Node.js मॉड्यूल की घोषणा कर रहे हैं और उन्हें इंस्टेंट कर रहे हैं ताकि हम उन्हें अपने एप्लिकेशन में उपयोग कर सकें। हम एक्सप्रेस की घोषणा कर रहे हैं, एक्सप्रेस को इंस्टेंट कर रहे हैं और फिर एक HTTP सर्वर बना रहे हैं और उसमें एक्सप्रेस इंस्टेंस भेज रहे हैं। और वहां से हम Socket.io को इंस्टेंट कर रहे हैं और इसे हमारे सर्वर इंस्टेंस पर नजर रखने के लिए कह रहे हैं।

ए.2 फिर हम अपने एक्सप्रेस ऐप को फाइलों की सेवा के लिए हमारी सार्वजनिक निर्देशिका का उपयोग करने के लिए कह रहे हैं।

ए.3 हम सर्वर शुरू करते हैं और इसे पोर्ट पर सुनने के लिए कहते हैं 1337.

अब तक यह काफी दर्द रहित और तेज रहा है। मेरा मानना ​​​​है कि हम कोड में 10 से कम लाइन हैं और हमारे पास पहले से ही एक कार्यात्मक Node.js सर्वर है। आगे!

03. अपनी निर्भरता घोषित करें

// संकुल.जेसन
{
"नाम": "कोणीय-सहयोग-बोर्ड",
"विवरण": "AngularJS सहयोग बोर्ड",
"संस्करण": "0.0.1-1",
"निजी": सच है,
"निर्भरता": {
"एक्सप्रेस": "3.x",
"सॉकेट.आईओ": "0.9.x"
}
}

एनपीएम की सबसे अच्छी विशेषताओं में से एक में आपकी निर्भरता को घोषित करने की क्षमता है पैकेज.जेसन फ़ाइल और फिर उन्हें स्वचालित रूप से स्थापित करें एनपीएम इंस्टॉल कमांड लाइन पर।


04. Socket.io वायर अप करें

हमने पहले ही उन मुख्य विशेषताओं को परिभाषित कर दिया है जो हम एप्लिकेशन में चाहते हैं और इसलिए हमें प्रत्येक ऑपरेशन के लिए ईवेंट को संभालने के लिए Socket.io ईवेंट श्रोताओं और एक उपयुक्त क्लोजर को सेट करने की आवश्यकता है।

नीचे दिए गए कोड में आप देखेंगे कि यह अनिवार्य रूप से ईवेंट श्रोताओं और कॉलबैक का कॉन्फ़िगरेशन है। पहली घटना है संबंध घटना, जिसका उपयोग हम अपनी अन्य घटनाओं को बंद करने के लिए करते हैं।

io.sockets.on ('कनेक्शन', फ़ंक्शन (सॉकेट) {
सॉकेट.ऑन ('क्रिएटनोट', फ़ंक्शन (डेटा) {
सॉकेट.ब्रॉडकास्ट.एमिट ('ऑननोटक्रिएटेड', डेटा);
});

सॉकेट.ऑन ('अपडेट नोट', फ़ंक्शन (डेटा) {
सॉकेट.ब्रॉडकास्ट.एमिट ('ऑन नोटअपडेटेड', डेटा);
});

सॉकेट.ऑन ('डिलीट नोट', फ़ंक्शन (डेटा) {
सॉकेट.ब्रॉडकास्ट.एमिट ('ऑन नोट डिलीट', डेटा);
});

सॉकेट.ऑन ('मूव नोट', फ़ंक्शन (डेटा) {
सॉकेट.ब्रॉडकास्ट.एमिट ('ऑन नोटमोव्ड', डेटा);
});
});

यहाँ से हम श्रोताओं को इसमें जोड़ते हैं नोट बनाएं, अद्यतन नोट, नोट हटाएं तथा चाल नोट. और कॉलबैक फ़ंक्शन में, हम केवल यह प्रसारित कर रहे हैं कि कौन सी घटना घटी है ताकि सुनने वाले किसी भी ग्राहक को सूचित किया जा सके कि घटना हुई।

अलग-अलग ईवेंट हैंडलर में कॉलबैक फ़ंक्शंस के बारे में इंगित करने योग्य कुछ चीजें हैं। एक, यदि आप किसी अन्य व्यक्ति को ईवेंट भेजना चाहते हैं, लेकिन क्लाइंट जो आपके द्वारा सम्मिलित ईवेंट को उत्सर्जित करता है प्रसारण से पहले फेंकना फ़ंक्शन कॉल। दूसरे, हम केवल इच्छुक पार्टियों को ईवेंट का पेलोड पास कर रहे हैं ताकि वे इसे प्रोसेस कर सकें कि वे कैसे फिट दिखते हैं।

05. अपने इंजन शुरू करें!

अब जब हमने अपनी निर्भरता को परिभाषित कर लिया है और Express और Socket.io शक्तियों के साथ अपना Node.js एप्लिकेशन सेट कर लिया है, तो Node.js सर्वर को इनिशियलाइज़ करना काफी सरल है।

सबसे पहले आप अपनी Node.js निर्भरताएँ इस प्रकार स्थापित करें:

एनपीएम इंस्टॉल

और फिर आप सर्वर को इस तरह शुरू करते हैं:

नोड app.js

और तब! आप अपने ब्राउज़र में इस पते पर जाएं। बम!

06. आगे बढ़ने से पहले कुछ स्पष्ट विचार

मैं मुख्य रूप से एक फ्रंटएंड डेवलपर हूं और मैं शुरू में अपने आवेदन के लिए एक Node.js सर्वर को जोड़ने से थोड़ा डरा हुआ था। AngularJS भाग एक स्नैप लेकिन सर्वर साइड जावास्क्रिप्ट था? हॉरर फ्लिक से खौफनाक संगीत को कतारबद्ध करें।

लेकिन, मुझे यह पता लगाने के लिए पूरी तरह से तैयार किया गया था कि मैं कोड की कुछ पंक्तियों में एक स्थिर वेब सर्वर स्थापित कर सकता हूं और कुछ और पंक्तियों में ब्राउज़र के बीच सभी घटनाओं को संभालने के लिए Socket.io का उपयोग करता हूं। और यह अभी भी सिर्फ जावास्क्रिप्ट था! समयबद्धता के लिए, हम केवल कुछ विशेषताओं को शामिल कर रहे हैं, लेकिन मुझे आशा है कि लेख के अंत तक आप देखेंगे कि तैरना आसान है - और पूल का गहरा अंत इतना डरावना नहीं है।

07. ग्राहक

अब जब हमारे पास हमारे सर्वर के साथ हमारी ठोस नींव है, तो चलिए अपने पसंदीदा हिस्से - क्लाइंट पर चलते हैं! हम ड्रैग करने योग्य भाग के लिए AngularJS, jQueryUI और स्टाइल बेस के लिए Twitter बूटस्ट्रैप का उपयोग करने जा रहे हैं।

08. नंगे हड्डियाँ

व्यक्तिगत वरीयता के मामले में, जब मैं एक नया एंगुलरजेएस एप्लिकेशन शुरू करता हूं, तो मैं उस न्यूनतम न्यूनतम को जल्दी से परिभाषित करना चाहता हूं जिसे मुझे पता है कि मुझे शुरू करने की आवश्यकता है और फिर जितनी जल्दी हो सके उस पर पुनरावृति करना शुरू कर दें।

प्रत्येक एंगुलरजेएस एप्लिकेशन को कम से कम एक नियंत्रक के साथ बूटस्ट्रैप किया जाना चाहिए और इसलिए यह आमतौर पर वह जगह है जहां मैं हमेशा शुरू करता हूं।

एप्लिकेशन को स्वचालित रूप से बूटस्ट्रैप करने के लिए आपको बस जोड़ने की आवश्यकता है एनजी-ऐप HTML नोड में जिसमें आप एप्लिकेशन को जीना चाहते हैं। अधिकांश समय, इसे HTML टैग में जोड़ना पूरी तरह से स्वीकार्य होने वाला है। मैंने इसमें एक विशेषता भी जोड़ी है एनजी-ऐप यह बताने के लिए कि मैं इसका उपयोग करना चाहता हूं एप्लिकेशन मॉड्यूल, जिसे मैं बस एक पल में परिभाषित करूंगा।

// सार्वजनिक/index.html
html एनजी-ऐप = "ऐप">

मुझे पता है कि मुझे कम से कम एक नियंत्रक की आवश्यकता होगी और इसलिए मैं इसका उपयोग करके कॉल करूंगा एनजी नियंत्रक और इसे property की एक संपत्ति सौंपना मुख्य Ctrl.

बॉडी एनजी-कंट्रोलर="MainCtrl">/body>

तो अब हम नाम के एक मॉड्यूल के लिए हुक पर हैं एप्लिकेशन और एक नियंत्रक नामित मुख्य Ctrl. आइए आगे बढ़ें और उन्हें अभी बनाएं।

मॉड्यूल बनाना काफी सीधा है। आप इसे कॉल करके परिभाषित करते हैं कोणीय.मॉड्यूल और इसे एक नाम दे रहा है। भविष्य के संदर्भ के लिए, एक खाली सरणी का दूसरा पैरामीटर वह है जहां आप एप्लिकेशन में उपयोग के लिए उप-मॉड्यूल इंजेक्ट कर सकते हैं। यह इस ट्यूटोरियल के दायरे से बाहर है, लेकिन तब काम आता है जब आपका एप्लिकेशन जटिलता और जरूरतों में बढ़ने लगता है।

// सार्वजनिक/जेएस/collab.js
वर ऐप = कोणीय.मॉड्यूल ('ऐप', []);

हम में कुछ खाली प्लेसहोल्डर घोषित करने जा रहे हैं एप्लिकेशन के साथ शुरू होने वाला मॉड्यूल मुख्य Ctrl के नीचे।हम इन सभी को बाद में भरेंगे लेकिन मैं शुरुआत से ही मूल संरचना का वर्णन करना चाहता था।

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

हम Socket.io कार्यक्षमता को भी एक में लपेटने जा रहे हैं सॉकेट service ताकि हम उस ऑब्जेक्ट को इनकैप्सुलेट कर सकें और इसे ग्लोबल नेमस्पेस पर इधर-उधर न जाने दें।

ऐप.फैक्ट्री ('सॉकेट', फ़ंक्शन ($ रूटस्कोप) {});

और जब हम इस पर होते हैं, तो हम एक निर्देश घोषित करने जा रहे हैं जिसे कहा जाता है चिपचिपा नोट जिसका उपयोग हम स्टिकी नोट की कार्यक्षमता को समाहित करने के लिए करने जा रहे हैं।

app.directive ('स्टिकीनोट', फंक्शन (सॉकेट) {});

तो आइए समीक्षा करें कि हमने अब तक क्या किया है। हमने एप्लिकेशन का उपयोग करके बूटस्ट्रैप किया है एनजी-ऐप और HTML में हमारे एप्लिकेशन कंट्रोलर को घोषित किया। हमने एप्लिकेशन मॉड्यूल को भी परिभाषित किया है और बनाया है मुख्य Ctrl नियंत्रक, सॉकेट सेवा और चिपचिपा नोट निर्देश।

09. एक चिपचिपा नोट बनाना

अब जब हमारे पास एंगुलरजेएस एप्लिकेशन का कंकाल है, तो हम निर्माण सुविधा का निर्माण शुरू करेंगे।

app.controller('MainCtrl', function($scope, सॉकेट) {// B.1
$scope.notes = []; // बी.२

// आने वाली
सॉकेट.ऑन ('ऑन नोटक्रिएटेड', फ़ंक्शन (डेटा) {// बी.3
$scope.notes.push (डेटा);
});

// आउटगोइंग
$scope.createNote = function() {// B.4
वर नोट = {
आईडी: नई तिथि ()। गेटटाइम (),
शीर्षक: 'नया नोट',
शरीर: 'लंबित'
};

$scope.notes.push (नोट);
सॉकेट.एमिट ('क्रिएटनोट', नोट);
};

B.1 AngularJS में एक निर्भरता इंजेक्शन सुविधा है, इसलिए हम इंजेक्शन लगा रहे हैं a $स्कोप वस्तु और सॉकेट सेवा। $स्कोप ऑब्जेक्ट एक व्यूमोडेल के रूप में कार्य करता है और मूल रूप से एक जावास्क्रिप्ट ऑब्जेक्ट है जिसमें कुछ ईवेंट बेक किए गए हैं ताकि दो-तरफा डाटाबेसिंग सक्षम हो सके।

B.2 हम उस सरणी की घोषणा कर रहे हैं जिसमें हम दृश्य को बाँधने के लिए उपयोग करेंगे।

B.3 हम इसके लिए श्रोता जोड़ रहे हैं onNoteबनाया गया पर घटना सॉकेट सेवा और घटना पेलोड को धक्का देना $scope.notes सरणी।

B.4 हमने घोषित किया है a नोट बनाएं विधि जो एक डिफ़ॉल्ट बनाता है ध्यान दें वस्तु और उसे में धकेलता है $scope.notes सरणी। यह uses का भी उपयोग करता है सॉकेट उत्सर्जित करने के लिए सेवा नोट बनाएं घटना और पास नया नोट साथ वस्तु।

तो अब जब हमारे पास नोट बनाने की एक विधि है, तो हम इसे कैसे कहते हैं? यह अच्छा सवाल है! HTML फ़ाइल में, हम अंतर्निहित AngularJS निर्देश जोड़ते हैं एनजी क्लिक बटन पर और फिर जोड़ें नोट बनाएं विधि कॉल विशेषता मान के रूप में।

बटन आईडी = "क्रिएटबटन" एनजी-क्लिक = "क्रिएटनोट ()"> नोट / बटन बनाएं>

हमने अब तक जो किया है उसकी त्वरित समीक्षा का समय आ गया है। हमने इसमें एक सरणी जोड़ी है $स्कोप में वस्तु मुख्य Ctrl वह आवेदन के लिए सभी नोट्स रखने जा रहा है। हमने एक भी जोड़ा है नोट बनाएं पर विधि $स्कोप एक नया स्थानीय नोट बनाने के लिए आपत्ति करें और फिर उस नोट को अन्य ग्राहकों को प्रसारित करें सॉकेट सेवा। हमने ईवेंट श्रोता को भी जोड़ा है सॉकेट सेवा ताकि हम जान सकें कि अन्य ग्राहकों ने कब नोट बनाया है ताकि हम इसे अपने संग्रह में जोड़ सकें।

10. चिपचिपे नोट प्रदर्शित करना

अब हमारे पास एक नोट ऑब्जेक्ट बनाने और इसे ब्राउज़र के बीच साझा करने की क्षमता है लेकिन हम वास्तव में इसे कैसे प्रदर्शित करते हैं? यहीं से निर्देश आते हैं।

निर्देश और उनकी पेचीदगियां एक विशाल विषय है, लेकिन संक्षिप्त संस्करण यह है कि वे कस्टम कार्यक्षमता के साथ तत्वों और विशेषताओं का विस्तार करने का एक तरीका प्रदान करते हैं। एंगुलरजेएस के बारे में निर्देश आसानी से मेरा पसंदीदा हिस्सा हैं क्योंकि यह आपको अनिवार्य रूप से एचटीएमएल में अपने आवेदन के आसपास एक संपूर्ण डीएसएल (डोमेन विशिष्ट भाषा) बनाने की अनुमति देता है।

यह स्वाभाविक है कि चूंकि हम अपने सहयोग बोर्ड के लिए स्टिकी नोट्स बनाने जा रहे हैं, इसलिए हमें एक बनाना चाहिए चिपचिपा नोट निर्देश। निर्देशों को उस मॉड्यूल पर निर्देश विधि को कॉल करके परिभाषित किया जाता है जिसे आप इसे घोषित करना चाहते हैं और एक नाम और एक फ़ंक्शन जो निर्देश परिभाषा ऑब्जेक्ट लौटाता है। डायरेक्टिव डेफिनिशन ऑब्जेक्ट में बहुत सारे संभावित गुण हैं जिन्हें आप इस पर परिभाषित कर सकते हैं, लेकिन हम यहां अपने उद्देश्यों के लिए कुछ का उपयोग करने जा रहे हैं।

मेरा सुझाव है कि आप निर्देश परिभाषा वस्तु पर परिभाषित गुणों की संपूर्ण सूची देखने के लिए AngularJS दस्तावेज़ देखें।

app.directive ('स्टिकीनोट', फंक्शन (सॉकेट) {
वर लिंकर = फ़ंक्शन (दायरा, तत्व, attrs) { };

वर नियंत्रक = समारोह ($ गुंजाइश) { };

वापसी {
प्रतिबंधित करें: 'ए', // सी.1
लिंक: लिंकर, // C.2
नियंत्रक: नियंत्रक, // C.3
दायरा: {// सी.4
नोट: '=',
ऑन-डिलीट: '&'
}
};
});

C.1 आप अपने निर्देश को एक निश्चित प्रकार के HTML तत्व तक सीमित कर सकते हैं। दो सबसे आम तत्व या विशेषता हैं, जिन्हें आप उपयोग करके घोषित करते हैं इ तथा ए क्रमशः। आप इसे CSS क्लास या कमेंट तक भी सीमित कर सकते हैं, लेकिन ये उतने सामान्य नहीं हैं।

C.2 लिंक फ़ंक्शन वह जगह है जहाँ आप अपने सभी DOM मैनिपुलेशन कोड डालते हैं। कुछ अपवाद हैं जो मुझे मिले हैं, लेकिन यह हमेशा सच होता है (कम से कम 99 प्रतिशत समय)। यह एंगुलरजेएस का एक बुनियादी बुनियादी नियम है और इसलिए मैंने इस पर जोर दिया है।

C.3 कंट्रोलर फंक्शन मुख्य कंट्रोलर की तरह ही काम करता है जिसे हमने एप्लिकेशन के लिए परिभाषित किया है लेकिन $स्कोप जिस वस्तु में हम गुजर रहे हैं वह डीओएम तत्व के लिए विशिष्ट है जिस पर निर्देश रहता है।

C.4 AngularJS में पृथक दायरे की अवधारणा है, जो आपको स्पष्ट रूप से परिभाषित करने की अनुमति देती है कि निर्देश का दायरा बाहरी दुनिया के साथ कैसे संचार करता है। यदि हमने दायरा घोषित नहीं किया होता तो निर्देश माता-पिता के बच्चे के रिश्ते के साथ माता-पिता के दायरे से विरासत में मिला होता। कई मामलों में यह इष्टतम नहीं है। दायरे को अलग करके हम इस संभावना को कम करते हैं कि बाहरी दुनिया अनजाने में और आपके निर्देश की स्थिति पर प्रतिकूल प्रभाव डाल सकती है।

मैंने टू-वे डेटा-बाइंडिंग टू . घोषित किया है ध्यान दें उसके साथ = प्रतीक और एक अभिव्यक्ति जो बाध्यकारी है हटाना उसके साथ & प्रतीक। पृथक दायरे की पूरी व्याख्या के लिए कृपया AngularJS प्रलेखन पढ़ें क्योंकि यह ढांचे में अधिक जटिल विषयों में से एक है।

तो चलिए वास्तव में DOM में एक स्टिकी नोट जोड़ते हैं।

किसी भी अच्छे ढांचे की तरह, AngularJS बॉक्स के ठीक बाहर कुछ बेहतरीन सुविधाओं के साथ आता है। सबसे आसान सुविधाओं में से एक है एनजी-दोहराने. यह एंगुलरजेएस निर्देश आपको वस्तुओं की एक सरणी में पारित करने की अनुमति देता है और यह जो भी टैग है, उसे कई बार डुप्लिकेट करता है क्योंकि सरणी में आइटम हैं। नीचे दिए गए मामले में, हम इस पर पुनरावृति कर रहे हैं टिप्पणियाँ सरणी और डुप्लिकेटिंग डिव की लंबाई के लिए तत्व और उसके बच्चे टिप्पणियाँ सरणी।

डिव स्टिकी-नोट एनजी-रिपीट = "नोट्स में नोट" नोट = "नोट" ऑनडिलीट = "डिलीट नोट (आईडी)">
बटन प्रकार = "बटन" एनजी-क्लिक = "डिलीट नोट (नोट। आईडी)"> × / बटन>
इनपुट एनजी-मॉडल = "नोट। शीर्षक" एनजी-परिवर्तन = "अपडेट नोट (नोट)" प्रकार = "पाठ">
textarea ng-model="note.body" ng-change="updateNote(note)"
>{{note.body}}/textarea>
/div>

की सुंदरता एनजी-दोहराने यह है कि यह आपके द्वारा पारित किसी भी सरणी के लिए बाध्य है और जब आप सरणी में कोई आइटम जोड़ते हैं, तो आपका DOM तत्व स्वचालित रूप से अपडेट हो जाएगा। आप इसे एक कदम आगे ले जा सकते हैं और न केवल मानक DOM तत्वों को बल्कि अन्य कस्टम निर्देशों को भी दोहरा सकते हैं। इसलिए आप देखते हैं चिपचिपा नोट तत्व पर एक विशेषता के रूप में।

कस्टम कोड के दो अन्य बिट हैं जिन्हें स्पष्ट करने की आवश्यकता है। हमने दायरे को अलग कर दिया है चिपचिपा नोट्स दो संपत्तियों पर निर्देश पहला बाध्यकारी परिभाषित पृथक दायरा है ध्यान दें संपत्ति। इसका मतलब यह है कि जब भी नोट ऑब्जेक्ट पैरेंट स्कोप में बदलता है, तो यह निर्देश में संबंधित नोट ऑब्जेक्ट को स्वचालित रूप से अपडेट कर देगा और इसके विपरीत। अन्य परिभाषित पृथक क्षेत्र पर है हटाना विशेषता। इसका मतलब यह है कि जब हटाना निर्देश में कहा जाता है, यह जो भी अभिव्यक्ति में है उसे कॉल करेगा हटाना डीओएम तत्व पर विशेषता जो निर्देश को तुरंत चालू करती है।

जब एक निर्देश को तत्काल किया जाता है तो इसे डीओएम में जोड़ा जाता है और लिंक फ़ंक्शन को कहा जाता है। यह तत्व पर कुछ डिफ़ॉल्ट DOM गुण सेट करने का एक सही अवसर है। जिस एलिमेंट पैरामीटर में हम गुजर रहे हैं वह वास्तव में एक jQuery ऑब्जेक्ट है और इसलिए हम उस पर jQuery ऑपरेशन कर सकते हैं।

(AngularJS वास्तव में इसमें निर्मित jQuery के सबसेट के साथ आता है, लेकिन यदि आपने पहले ही jQuery का पूर्ण संस्करण शामिल कर लिया है, तो AngularJS इसे स्थगित कर देगा।)

app.directive ('स्टिकीनोट', फंक्शन (सॉकेट) {
वर लिंकर = फ़ंक्शन (दायरा, तत्व, attrs) {
// इसे अच्छा बनाने के लिए कुछ डोम दीक्षा
element.css ('बाएं', '10px');
element.css ('शीर्ष', '50px');
तत्व। छुपाएं ()। फीकाइन ();
};
});

उपरोक्त कोड में हम केवल स्टिकी नोट को मंच पर रख रहे हैं और उसे फीका कर रहे हैं।

11. एक चिपचिपा नोट हटाना

तो अब जब हम एक स्टिकी नोट जोड़ और प्रदर्शित कर सकते हैं, तो स्टिकी नोट्स को हटाने का समय आ गया है। चिपचिपे नोटों का निर्माण और विलोपन उस सरणी से आइटम जोड़ने और हटाने का मामला है जिससे नोट बंधे हैं। यह उस सरणी को बनाए रखने के लिए माता-पिता के दायरे की ज़िम्मेदारी है, यही कारण है कि हम निर्देश के भीतर से हटाने के अनुरोध को उत्पन्न करते हैं, लेकिन माता-पिता के दायरे को वास्तविक भारी उठाने दें।

यही कारण है कि हम निर्देश पर अभिव्यक्ति परिभाषित पृथक गुंजाइश बनाने की सभी परेशानी से गुज़रे: इसलिए निर्देश आंतरिक रूप से हटाए गए ईवेंट को प्राप्त कर सकता है और इसे प्रसंस्करण के लिए अपने माता-पिता को पास कर सकता है।

निर्देश के अंदर HTML पर ध्यान दें।

बटन प्रकार = "बटन" एनजी-क्लिक = "डिलीट नोट (नोट। आईडी)"> × / बटन>

अगली बात जो मैं कहने जा रहा हूं, वह एक लंबा रास्ता तय करने जैसा लग सकता है, लेकिन याद रखें कि हम एक ही तरफ हैं और मेरे द्वारा विस्तार से बताने के बाद यह समझ में आएगा। जब स्टिकी नोट के ऊपरी दाएं कोने में बटन क्लिक किया जाता है तो हम कॉल कर रहे हैं नोट हटाएं निर्देश के नियंत्रक पर और में गुजर रहा है Note.id मूल्य। नियंत्रक फिर कॉल करता है हटाना, जो तब किसी भी अभिव्यक्ति को निष्पादित करता है जिसे हमने तार दिया था। अब तक सब ठीक है? हम नियंत्रक पर एक स्थानीय विधि को कॉल कर रहे हैं जो फिर अलग-अलग दायरे में परिभाषित की गई किसी भी अभिव्यक्ति को कॉल करके इसे सौंप देता है। माता-पिता पर बुलाए जाने वाले अभिव्यक्ति को बस कहा जाता है नोट हटाएं भी।

app.directive ('स्टिकीनोट', फंक्शन (सॉकेट) {
वर नियंत्रक = समारोह ($ गुंजाइश) {
$scope.deleteNote = फ़ंक्शन (आईडी) {
$scope.ondelete({
मैंने किया
});
};
};

वापसी {
प्रतिबंधित करें: 'ए',
लिंक: लिंकर,
नियंत्रक: नियंत्रक,
दायरा: {
नोट: '=',
ऑन-डिलीट: '&'
}
};
});

(अभिव्यक्ति-परिभाषित पृथक दायरे का उपयोग करते समय, पैरामीटर ऑब्जेक्ट मैप में भेजे जाते हैं।)

माता-पिता के दायरे में, नोट हटाएं कॉल किया जाता है और का उपयोग करके काफी मानक विलोपन करता है कोणीय.प्रत्येक के लिए नोट्स सरणी पर पुनरावृति करने के लिए उपयोगिता फ़ंक्शन। एक बार जब समारोह अपने स्थानीय व्यवसाय को संभाल लेता है तो यह आगे बढ़ता है और बाकी दुनिया के लिए तदनुसार प्रतिक्रिया करने के लिए घटना को छोड़ देता है।

app.controller('MainCtrl', function($scope, सॉकेट) {
$scope.notes = [];

// आने वाली
सॉकेट.ऑन ('ऑन नोट डिलीट', फंक्शन (डेटा) {
$scope.deleteNote(data.id);
});

// आउटगोइंग
$scope.deleteNote = फ़ंक्शन (आईडी) {
वर OldNotes = $scope.notes,
न्यू नोट्स = [];

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

$scope.notes = newNotes;
सॉकेट.एमिट ('डिलीट नोट', {आईडी: आईडी});
};
});

12. स्टिकी नोट को अपडेट करना

हम शानदार प्रगति कर रहे हैं! अब तक मुझे आशा है कि आप इस बवंडर दौरे से कुछ पैटर्न को देखना शुरू कर रहे हैं जो हम ले रहे हैं। सूची में अगला आइटम अपडेट फीचर है।

हम वास्तविक DOM तत्वों पर शुरू करने जा रहे हैं और सर्वर तक सभी तरह से इसका अनुसरण करते हैं और क्लाइंट के पास वापस जाते हैं। सबसे पहले हमें यह जानना होगा कि स्टिकी नोट का शीर्षक या बॉडी कब बदली जा रही है। AngularJS फॉर्म एलिमेंट्स को डेटा मॉडल के हिस्से के रूप में मानता है ताकि आप एक स्नैप में टू-वे डेटा-बाइंडिंग को हुक कर सकें। ऐसा करने के लिए का उपयोग करें एनजी मॉडल निर्देश और उस संपत्ति में डाल दें जिसे आप बांधना चाहते हैं। इस मामले में हम उपयोग करने जा रहे हैं नोट.शीर्षक तथा नोट.बॉडी क्रमशः।

जब इनमें से कोई भी गुण बदलता है तो हम उस जानकारी को पास करने के लिए कैप्चर करना चाहते हैं। हम इसे के साथ पूरा करते हैं एनजी-चेंज निर्देश और कॉल करने के लिए इसका इस्तेमाल करें अद्यतन नोट और नोट ऑब्जेक्ट में ही पास करें। AngularJS यह पता लगाने के लिए कुछ बहुत ही चतुर गंदी जाँच करता है कि क्या जो कुछ भी है उसका मूल्य एनजी मॉडल बदल गया है और फिर उस अभिव्यक्ति को निष्पादित करता है जो in . है एनजी-चेंज.

इनपुट एनजी-मॉडल = "नोट। शीर्षक" एनजी-परिवर्तन = "अपडेट नोट (नोट)" प्रकार = "पाठ">
textarea ng-model="note.body" ng-change="updateNote(note)" >{{note.body}}/textarea>

उपयोग करने का उल्टा एनजी-चेंज यह है कि स्थानीय परिवर्तन पहले ही हो चुका है और हम केवल संदेश को प्रसारित करने के लिए जिम्मेदार हैं। नियंत्रक में, अद्यतन नोट कहा जाता है और वहां से हम उत्सर्जित करने जा रहे हैं अद्यतन नोट हमारे सर्वर के लिए अन्य ग्राहकों को प्रसारित करने के लिए घटना।

app.directive ('स्टिकीनोट', फंक्शन (सॉकेट) {
वर नियंत्रक = समारोह ($ गुंजाइश) {
$scope.updateNote = फ़ंक्शन (नोट) {
सॉकेट.एमिट ('अपडेट नोट', नोट);
};
};
});

और निर्देश नियंत्रक में, हम सुन रहे हैं ऑन नोटअपडेटेड यह जानने के लिए कि किसी अन्य क्लाइंट का नोट कब अपडेट हुआ है ताकि हम अपने स्थानीय संस्करण को अपडेट कर सकें।

वर नियंत्रक = समारोह ($ गुंजाइश) {
// आने वाली
सॉकेट.ऑन ('ऑन नोटअपडेटेड', फ़ंक्शन (डेटा) {
// अपडेट करें यदि एक ही नोट
अगर (data.id == $scope.note.id) {

$scope.note.title = data.title;
$scope.note.body = डेटा.बॉडी;
}
});
};

13. एक चिपचिपा नोट ले जाना

इस बिंदु पर हमने मूल रूप से सीआरयूडी किडी पूल के चारों ओर एक गोद किया है और जीवन अच्छा है! अपने दोस्तों को प्रभावित करने के लिए पार्लर ट्रिक के लिए, हम स्क्रीन के चारों ओर नोट्स ले जाने और वास्तविक समय में निर्देशांक अपडेट करने की क्षमता जोड़ने जा रहे हैं। घबराएं नहीं - यह कोड की कुछ और पंक्तियां हैं। यह सारी मेहनत रंग लाएगी। मैं वादा करता हूं!

हमने पार्टी में विशेष अतिथि, jQueryUI को आमंत्रित किया है, और हमने यह सब ड्रैगगेबल्स के लिए किया है। नोट को स्थानीय रूप से खींचने की क्षमता में जोड़ने के लिए कोड की केवल एक पंक्ति लगती है। यदि आप add में जोड़ते हैं एलिमेंट.ड्रैगेबल (); आपके लिंकर फंक्शन में आपको सर्वाइवर की 'आई ऑफ द टाइगर' सुनाई देने लगेगी क्योंकि अब आप अपने नोट्स को इधर-उधर खींच सकते हैं।

हम जानना चाहते हैं कि ड्रैगिंग कब बंद हो गई है और साथ जाने के लिए नए निर्देशांक कैप्चर करें। jQueryUI कुछ बहुत ही स्मार्ट लोगों द्वारा बनाया गया था, इसलिए जब ड्रैगिंग बंद हो जाती है तो आपको स्टॉप इवेंट के लिए कॉलबैक फ़ंक्शन को परिभाषित करने की आवश्यकता होती है। हम हड़प लेते हैं Note.id स्कोप ऑब्जेक्ट से बाहर और बाईं ओर और शीर्ष CSS मानों से यूआई वस्तु उस ज्ञान के साथ हम वही करते हैं जो हम हमेशा से करते रहे हैं: एमिट!

app.directive ('स्टिकी नोट', फंक्शन (सॉकेट) {
वर लिंकर = फ़ंक्शन (दायरा, तत्व, attrs) {
एलिमेंट.ड्रैगेबल({
रोकें: फ़ंक्शन (ईवेंट, यूआई) {
सॉकेट.एमिट ('मूव नोट', {
आईडी: scope.note.id,
x: ui.स्थिति.बाएं,
y: ui.position.top
});
}
});

सॉकेट.ऑन ('ऑन नोटमोव्ड', फ़ंक्शन (डेटा) {
// अपडेट करें यदि एक ही नोट
अगर (डेटा.आईडी == गुंजाइश.नोट.आईडी) {
तत्व चेतन ({
बाएं: डेटा.एक्स,
शीर्ष: data.y
});
}
});
};
});

इस बिंदु पर यह कोई आश्चर्य की बात नहीं है कि हम सॉकेट सेवा से एक चाल से संबंधित घटना के बारे में भी सुन रहे हैं। इस मामले में यह है ऑन नोट ले जाया गया घटना और अगर नोट एक मैच है तो हम बाएं और शीर्ष सीएसएस गुणों को अपडेट करते हैं। बम! किया हुआ!

14. बोनस

यह एक बोनस खंड है जिसे मैं शामिल नहीं करता अगर मुझे पूरा विश्वास नहीं होता कि आप इसे 10 मिनट से भी कम समय में हासिल कर सकते हैं। हम एक लाइव सर्वर पर तैनात करने जा रहे हैं (मैं अभी भी चकित हूं कि यह करना कितना आसान है)।

सबसे पहले, आपको नि:शुल्क Nodejitsu परीक्षण के लिए साइन अप करने की आवश्यकता है। परीक्षण 30 दिनों के लिए नि: शुल्क है, जो आपके पैरों को गीला करने के लिए एकदम सही है।

एक बार जब आप अपना खाता बना लेते हैं तो आपको जित्सु पैकेज स्थापित करने की आवश्यकता होती है, जिसे आप कमांड लाइन से कर सकते हैं $ npm jitsu -g . स्थापित करें.

फिर आपको कमांड लाइन से लॉग इन करना होगा $ जित्सु लॉगिन और अपनी साख दर्ज करें।

सुनिश्चित करें कि आप सीधे अपने ऐप में हैं, टाइप करें $ जित्सु तैनाती और प्रश्नों के माध्यम से कदम उठाएं। मैं आमतौर पर जितना संभव हो उतना डिफ़ॉल्ट रूप से छोड़ देता हूं, जिसका अर्थ है कि मैं अपने आवेदन को एक नाम देता हूं लेकिन उपडोमेन आदि नहीं।

और, मेरे प्यारे दोस्तों, इसमें बस इतना ही है! एक बार जब यह परिनियोजित हो जाता है और यह जाने के लिए तैयार हो जाता है, तो आपको सर्वर के आउटपुट से आपके एप्लिकेशन का URL मिल जाएगा।

15. निष्कर्ष

हमने इस लेख में बहुत सारे एंगुलरजेएस मैदान को कवर किया है और मुझे आशा है कि आपको इस प्रक्रिया में बहुत मज़ा आया होगा। मुझे लगता है कि कोड की लगभग 200 पंक्तियों में आप AngularJS और Socket.io के साथ जो हासिल कर सकते हैं वह वास्तव में साफ-सुथरा है।

कुछ चीजें थीं जिन्हें मैंने मुख्य बिंदुओं पर ध्यान केंद्रित करने के लिए कवर नहीं किया था, लेकिन मैं आपको स्रोत को नीचे खींचने और एप्लिकेशन के साथ खेलने के लिए प्रोत्साहित करता हूं। हमने एक मजबूत नींव बनाई है, लेकिन अभी भी बहुत सी विशेषताएं हैं जिन्हें आप जोड़ सकते हैं। हैकिंग हो जाओ!

लुकास रुएबेल्के एक प्रौद्योगिकी उत्साही हैं और मैनिंग प्रकाशनों के लिए एक्शन में एंगुलरजेएस का सह-लेखन कर रहे हैं। उनका पसंदीदा काम लोगों को नई तकनीक के प्रति उतना ही उत्साहित करना है जितना वे हैं। वह फीनिक्स वेब एप्लिकेशन यूजर ग्रुप चलाता है और अपराध में अपने साथी भागीदारों के साथ कई हैकथॉन की मेजबानी कर चुका है।

ये पसंद आया? ये पढ़ सकते हैं!

  • ऐप कैसे बनाते हैं
  • हमारे पसंदीदा वेब फोंट - और वे एक पैसा भी खर्च नहीं करते हैं
  • जानें कि ऑगमेंटेड रियलिटी के लिए आगे क्या है Discover
  • मुफ्त बनावट डाउनलोड करें: उच्च रिज़ॉल्यूशन और अभी उपयोग के लिए तैयार ready
पिछला लेख

वेक के साथ डिजाइन साझा करना आसान बनाएं
अगला लेख

स्टिल लाइफ फोटोग्राफी: 30 खूबसूरत उदाहरण
साइट चयन
लोगो डिज़ाइन: ब्रांड के बारे में पूछने के लिए 5 प्रश्न
पढ़ना

लोगो डिज़ाइन: ब्रांड के बारे में पूछने के लिए 5 प्रश्न

मई 2024
हालांकि अप्रशिक्षित गैर-डिजाइनर के लिए यह केक के टुकड़े जैसा दिखता है, एक ब्रांड के लिए एक सफल लोगो डिज़ाइन बनाना एक बड़ी चुनौती है। यही कारण है कि लोगो निर्माता अपने आला में अच्छी तरह से भुगतान, मांग...
माया समीक्षा के लिए वी-रे अगला
पढ़ना

माया समीक्षा के लिए वी-रे अगला

मई 2024
वी-रे प्रत्येक रिलीज के साथ तेज नहीं है, हुड के तहत यह स्मार्ट और अधिक परिष्कृत हो रहा है। बेहतर दृश्य बुद्धि बढ़ा हुआ प्रतिपादन प्रदर्शन GPU प्रगति कुछ के लिए बहुत महंगा माया के लिए वी-रे नेक्स्ट (उर...
ऐसे स्नीकर्स आपने कभी नहीं देखे होंगे
पढ़ना

ऐसे स्नीकर्स आपने कभी नहीं देखे होंगे

मई 2024
हम क्रिएटिव पसंद करते हैं कि हमारे पैर अच्छे दिखें, और हममें से कई लोगों को क्लासिक स्नीकर्स के साथ-साथ स्नीकर प्रिंट्स, आविष्कारशील स्नीकर पैकेजिंग और बहुत कुछ से प्रेरित होने की लत है।लेकिन अतीत में...