AngketJS सहकारिता मंडळ सॉकेट.आयओ

लेखक: Peter Berry
निर्मितीची तारीख: 14 जुलै 2021
अद्यतन तारीख: 13 मे 2024
Anonim
AngketJS सहकारिता मंडळ सॉकेट.आयओ - सर्जनशील
AngketJS सहकारिता मंडळ सॉकेट.आयओ - सर्जनशील

सामग्री

  • ज्ञान आवश्यकः दरम्यानचे जावास्क्रिप्ट
  • आवश्यक: नोड.जेएस, एनपीएम
  • प्रकल्प वेळः 2 तास

ब्राउझरमध्ये समृद्ध क्लायंट-साइड creatingप्लिकेशन्स तयार करण्यासाठी अँगुलरजेएस विशेषत: अनुकूल आहेत आणि जेव्हा आपण मिश्रणात थोडे सॉकेट.आयओ जोडता तेव्हा गोष्टी खरोखरच मनोरंजक बनतात. या लेखात आम्ही एक वास्तविक-वेळ सहयोग बोर्ड तयार करणार आहोत जे क्लायंट-साइड अनुप्रयोगासाठी अँगुलरजेएस आणि सर्व कनेक्ट केलेल्या ग्राहकांमध्ये राज्य सामायिक करण्यासाठी सॉकेट.आयओ वापरते.

आम्ही प्रारंभ करण्यापूर्वी थोडी घरकुल कव्हर करूया. मी कोडच्या प्रत्येक छोट्या कोपर्‍यावर कव्हर करणार नसल्यामुळे आपल्याला HTML आणि जावास्क्रिप्टची मूलभूत आकलनता आहे असे समजू. उदाहरणार्थ, कोणतीही नवीन माहिती नसल्यामुळे मी एचटीएमएल फाईलच्या प्रमुखात समाविष्ट केलेल्या सीएसएस आणि जावास्क्रिप्ट फायली मागवणार नाही.

तसेच, अनुसरण करण्यासाठी मी माझ्या गिटहब खात्यातून कोड हिसकावण्यास प्रोत्साहित करतो. माझा चांगला मित्र ब्रायन फोर्ड देखील एक उत्कृष्ट सॉकेट.आयओ बियाणे आहे, ज्यावर मी माझ्या मूळ कल्पनांवर आधारित आहे.

आम्हाला सहकार मंडळामध्ये इच्छित चार मुख्य वैशिष्ट्ये म्हणजे एक टीप तयार करणे, नोट्स वाचणे, एक नोट अद्यतनित करणे, एक नोट हटविणे आणि मनोरंजनासाठी, बोर्डवर एक टीप हलविणे. होय, ते बरोबर आहे, आम्ही प्रमाणित सीआरयूडी वैशिष्ट्यांकडे लक्ष देत आहोत. माझा विश्वास आहे की या मूलभूत वैशिष्ट्यांवर लक्ष केंद्रित करून, आम्ही नमुन्यांचा उदय होण्यासाठी पुरेसा कोड समाविष्ट केला आहे जेणेकरून आपण त्यांना घेऊन आणि त्यास अन्यत्र लागू करू शकाल.


01. सर्व्हर

आम्ही प्रथम नोड.जे सर्व्हरपासून सुरुवात करणार आहोत कारण आपण ज्यावर आपण सर्व काही तयार करणार आहोत त्याचा पाया म्हणून काम करेल.

आम्ही एक्सप्रेस आणि सॉकेट.आयओ सह नोड.जे सर्व्हर तयार करणार आहोत. आम्ही एक्सप्रेस वापरत आहोत त्याचे कारण ते Node.js मध्ये स्थिर मालमत्ता सर्व्हर स्थापित करण्यासाठी एक छान यंत्र प्रदान करते. एक्सप्रेस खरोखरच अद्भुत वैशिष्ट्यांसह घडते परंतु या प्रकरणात आम्ही त्याचा वापर सर्व्हर आणि क्लायंट दरम्यान स्वच्छपणे अ‍ॅप्लिकेशन दुभाषित करण्यासाठी करणार आहोत.

(आपण नोड.जेएस आणि एनपीएम स्थापित केले आहेत या गृहित धरुन मी कार्य करीत आहे. द्रुत Google शोध आपल्याला न केल्यास हे स्थापित कसे करावे हे दर्शवेल.)

02. बेअर हाडे

म्हणून सर्व्हरची बेअर हाडे तयार करण्यासाठी, उठून चालू असताना आम्हाला दोन गोष्टी करण्याची आवश्यकता आहे.

// app.js

// ए .१
var एक्सप्रेस = आवश्यक (’एक्सप्रेस’),
अॅप = एक्सप्रेस ();
सर्व्हर = आवश्यक (’HTTP’). क्रिएटर सर्व्हर (अ‍ॅप),
आयओ = आवश्यक (’सॉकेट.आयओ’). ऐक (सर्व्हर);

// ए .२
app.configure (कार्य () {
app.use (एक्सप्रेस.स्टेटिक (__ dirname + ’/ सार्वजनिक’));
});

// ए .3
सर्व्हर.लिस्टन (1337);


A.1 आम्ही आमची नोड.जेएस मॉड्यूल घोषित करीत आहोत आणि इन्स्टंट करत आहोत जेणेकरुन आम्ही त्यांचा वापर आमच्या अनुप्रयोगात करू शकू. आम्ही एक्सप्रेस घोषित करीत आहोत, एक्स्प्रेस स्थापित करतो आणि नंतर एक एचटीटीपी सर्व्हर तयार करतो आणि त्यामध्ये एक्सप्रेस उदाहरण पाठवितो. आणि तिथून आम्ही सॉकेट.आय.आय. स्थापित करीत आहोत आणि आमच्या सर्व्हरच्या घटनांवर लक्ष ठेवण्यास सांगत आहोत.

A.2 आम्ही आमच्या एक्सप्रेस अ‍ॅपला त्यापासून फायली देण्यासाठी आमच्या सार्वजनिक निर्देशिका वापरण्यास सांगत आहोत.

A.3 आम्ही सर्व्हर सुरू करतो आणि पोर्टवर ऐकण्यासाठी सांगतो 1337.

आतापर्यंत ते खूपच वेदनारहित आणि द्रुत झाले आहे. माझा विश्वास आहे की आम्ही कोडमध्ये 10 ओळींपेक्षा कमी आहोत आणि आमच्याकडे आधीपासून कार्यशील नोड.जेएस सर्व्हर आहे. पुढे!

03. आपली अवलंबन घोषित करा

// संकुल.जेसन
{
"नाव": "कोणीय-कोलाब-बोर्ड",
"वर्णन": "अँगुलर जेएस सहयोग बोर्ड",
"आवृत्ती": "0.0.1-1",
"खाजगी": खरे,
"अवलंबन": {
"एक्सप्रेस": "x.एक्स",
"सॉकेट.आयओ": "0.9.x"
}
}

एनपीएमची एक खास वैशिष्ट्य म्हणजे आपल्या मधील निर्भरता घोषित करण्याची क्षमता संकुल.जेसन फाइल करा आणि नंतर त्याद्वारे स्वयंचलितपणे स्थापित करा एनपीएम स्थापित कमांड लाइन वर.


04. वायर अप सॉकेट.आयओ

आम्हाला अनुप्रयोगात हव्या असलेल्या मुख्य वैशिष्ट्यांची आम्ही आधीच व्याख्या केली आहे आणि म्हणूनच प्रत्येक ऑपरेशनसाठी इव्हेंट हाताळण्यासाठी सॉकेट.आयओ इव्हेंट श्रोता आणि योग्य बंद करणे आवश्यक आहे.

खाली दिलेल्या कोडमध्ये आपण लक्षात घ्याल की ही मूलत: कार्यक्रम ऐकणार्‍या आणि कॉलबॅकची एक कॉन्फिगरेशन आहे. पहिली घटना आहे कनेक्शन इव्हेंट, जो आम्ही आमच्या इतर इव्हेंट्स बंदमध्ये वापरण्यासाठी वापरतो.

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

सॉकेट.ऑन (‘अपडेट नोट’, फंक्शन (डेटा)
सॉकेट.ब्रोडकास्ट.इमिट (’ऑननॉट अपडेटेड’, डेटा);
});

सॉकेट.ऑन (‘डिलीट नोट’, फंक्शन (डेटा)
सॉकेट.ब्रोडकास्ट.इमिट (’ऑननोटडिल्टेड’, डेटा);
});

सॉकेट.ऑन (’मूव्हनोट’, फंक्शन (डेटा)
सॉकेट.ब्रोडकास्ट.इमिट (’ऑननॉटमोव्हड’, डेटा);
});
});

येथून आम्ही श्रोत्यांना जोडतो तयार करा, अद्यतननोट, हटवा आणि हलवा नोट. आणि कॉलबॅक फंक्शनमध्ये आम्ही कोणता कार्यक्रम घडला हे थेट प्रसारित करीत आहोत जेणेकरून कोणत्याही क्लायंट ऐकण्याद्वारे इव्हेंट झाल्याची सूचना मिळू शकेल.

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

05. आपली इंजिन प्रारंभ करा!

आता आम्ही आपली निर्भरता परिभाषित केली आहे आणि आपला नोड.जेएस अनुप्रयोग एक्सप्रेस आणि सॉकेट.आयओ सामर्थ्यांसह सेट केला आहे, नोड.जे सर्व्हरला प्रारंभ करणे अगदी सोपे आहे.

प्रथम आपण आपले Node.js अवलंबन स्थापित करा:

एनपीएम स्थापित

आणि मग आपण याप्रमाणे सर्व्हर सुरू करा:

नोड app.js

आणि मग! आपण आपल्या ब्राउझरमधील या पत्त्यावर जा. बाम!

06. पुढे जाण्यापूर्वी काही स्पष्ट विचार

मी प्रामुख्याने फ्रंटएंड विकसक आहे आणि माझ्या अर्जावर नोड.जेएस सर्व्हर हूक करून मी सुरुवातीला थोडा घाबरलो होतो. अँगुलरजेएस भाग स्नॅप पण सर्व्हर साइड जावास्क्रिप्ट होता? हॉरर फ्लिकमधून भितीदायक संगीत रांगेत ठेवा.

परंतु, मी कोडच्या फक्त काही ओळींमध्ये स्थिर वेब सर्व्हर सेट करू शकू आणि काही अधिक ओळींमध्ये सॉकेट.आयओ वापरुन ब्राउझरमधील सर्व घटना हाताळण्यासाठी मी शोधू शकलो. आणि ते अजूनही फक्त जावास्क्रिप्ट होते! समसामयिकतेसाठी आम्ही केवळ काही वैशिष्ट्ये लपवत आहोत, परंतु मला आशा आहे की लेखाच्या शेवटी ते पोहणे सोपे आहे हे आपणास दिसून येईल - आणि तलावाचा खोल भाग इतका भीतीदायक नाही.

07. ग्राहक

आता आमच्या सर्व्हरसह आमचा मजबूत पाया आहे, चला माझ्या आवडत्या भागाकडे जाऊया - क्लायंट! आम्ही ड्रॅग करण्यायोग्य भागासाठी अँगुलर जेएस, jQueryUI आणि स्टाईल बेससाठी ट्विटर बूटस्ट्रॅप वापरणार आहोत.

08. बेअर हाडे

वैयक्तिक पसंतीची बाब म्हणून, जेव्हा मी नवीन अँगुलर जेएस अनुप्रयोग प्रारंभ करतो तेव्हा मला प्रारंभ करणे आवश्यक आहे हे मला ठाऊक नसलेले किमान द्रुतपणे परिभाषित करणे आवडते आणि नंतर शक्य तितक्या लवकर यावर पुनरावृत्ती करणे सुरू करा.

प्रत्येक अँगुलरजेएस अनुप्रयोगास कमीतकमी एका नियंत्रकासह बूटस्ट्रॅप करणे आवश्यक आहे आणि म्हणूनच मी नेहमीच प्रारंभ करतो.

अनुप्रयोग स्वयंचलितपणे बूटस्ट्रॅप करण्यासाठी आपल्याला फक्त जोडणे आवश्यक आहे एनजी-अ‍ॅप आपण ज्या अनुप्रयोगास लाइव्ह करू इच्छिता त्या HTML नोडवर. बहुतेक वेळा ते HTML टॅगमध्ये जोडणे योग्य प्रकारे स्वीकारले जात आहे. मी यात एक विशेषता देखील जोडली आहे एनजी-अ‍ॅप मला ते वापरायचे आहे हे सांगण्यासाठी अॅप मॉड्यूल, जे मी फक्त एका क्षणात परिभाषित करीन.

// सार्वजनिक / अनुक्रमणिका. html
html ng-app = "app">

मला माहित आहे की मला किमान एका नियंत्रकाची आवश्यकता आहे आणि म्हणून मी ते वापरुन कॉल करेन एनजी-नियंत्रक आणि त्याला एक मालमत्ता असाइन करणे मेनसीटीआरएल.

बॉडी एनजी-कंट्रोलर = "मेनसीटीआरएल"> / बॉडी>

म्हणून आता नामित मॉड्यूलसाठी आम्ही हुक वर आहोत अॅप आणि नावाचा एक नियंत्रक मेनसीटीआरएल. आपण पुढे जाऊ आणि त्यांना आता तयार करू.

मॉड्यूल तयार करणे बर्‍यापैकी सरळ आहे. आपण कॉल करून परिभाषित करा कोणीय.मोड्यूल आणि त्यास एक नाव देणे. भविष्यातील संदर्भासाठी, रिक्त अ‍ॅरेचे दुसरे पॅरामीटर आहे जेथे आपण अनुप्रयोगामध्ये उप-मॉड्यूल्स इंजेक्ट करू शकता. हे या ट्यूटोरियलच्या व्याप्तीबाहेर आहे परंतु जेव्हा आपला अनुप्रयोग जटिलतेत व आवश्यकतेने वाढू लागला तेव्हा सुलभ आहे.

// सार्वजनिक / जेएस / सहयोगी. js
var अॅप = अँगुलर.मोड्यूल (’अ‍ॅप’, []);

आम्ही मधील काही रिक्त प्लेसहोल्डर घोषित करणार आहोत अॅप पासून प्रारंभ मॉड्यूल मेनसीटीआरएल खाली.आम्ही हे नंतर पूर्ण करू पण मला प्रारंभापासून मूलभूत रचना स्पष्ट करायची आहे.

app.controller (’मेनकंट्रिल’, फंक्शन ($ स्कोप) {});

आम्ही सॉकेट.आयओ कार्यक्षमता देखील ए मध्ये लपेटणार आहोत सॉकेट सेवा जेणेकरून आम्ही त्या ऑब्जेक्टला एन्प्लेस करू शकू आणि त्यास ग्लोबल नेमस्पेसवर तरंगू देऊ नका.

अनुप्रयोग.फैक्टरी (’सॉकेट’, फंक्शन ($ रूटस्कोप) {});

आणि आम्ही तिथे असताना आम्ही एक मार्गनिर्देशक जाहीर करणार आहोत चिकट नोंद मध्ये आम्ही स्टिकी नोट कार्यक्षमता एन्कप्युलेट करण्यासाठी वापरणार आहोत.

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

तर आतापर्यंत आपण काय केले याचा आढावा घेऊया. आम्ही हा अनुप्रयोग वापरून बुटस्ट्रॅप केला आहे एनजी-अ‍ॅप आणि HTML मध्ये आमचा अनुप्रयोग नियंत्रक घोषित केला. आम्ही अ‍ॅप्लिकेशन मॉड्यूल देखील परिभाषित केला आहे आणि तयार केला आहे मेनसीटीआरएल नियंत्रक, द सॉकेट सेवा आणि चिकट नोंद निर्देश

09. एक चिकट नोट तयार करणे

आता आमच्याकडे एंग्युलर जेएस अनुप्रयोगाचा सांगाडा आहे, आम्ही निर्मिती वैशिष्ट्य तयार करू.

अ‍ॅप कॉन्ट्रॉलर (’मेनट्रिकल’, फंक्शन ($ स्कोप, सॉकेट) {// बी .१
$ स्कोप.नोट्स = []; // बी .२

// इनकमिंग
सॉकेट.ऑन (’ऑनोटोट्रीएटेड ’, फंक्शन (डेटा) {// बी .3
$ स्काॅप.नोट्स.पुश (डेटा);
});

// आउटगोइंग
$ स्केप.क्रिटेनोट = फंक्शन () B // बी .4
var टीप = {
आयडी: नवीन तारीख () .गेटटाइम (),
शीर्षक: ’नवीन टीप’,
मुख्य भाग: ’प्रलंबित’
};

$ स्काॅप.नोट्स.पुश (टीप);
सॉकेट.इमिट (‘क्रिएट नोट’, टीप);
};

बी .१ अँगुलरजेएस मध्ये निर्भरता इंजेक्शन वैशिष्ट्य आहे जेणेकरून आम्ही इंजेक्शन देत आहोत . व्याप्ती ऑब्जेक्ट आणि सॉकेट सेवा. द . व्याप्ती ऑब्जेक्ट व्ह्यूमॉडल म्हणून कार्य करते आणि मुळात द्वि-मार्ग डेटाबँडिंग सक्षम करण्यासाठी काही घटनांमध्ये बेक केलेले जावास्क्रिप्ट ऑब्जेक्ट असते.

B.2 आम्ही अ‍ॅरे घोषित करीत आहोत ज्यामध्ये आम्ही दृश्यासाठी बंधन बांधू.

बी .3 साठी आम्ही एक श्रोता जोडत आहोत onNoteCreated वर कार्यक्रम सॉकेट सेवा आणि कार्यक्रम पेलोड मध्ये ढकलणे $ व्याप्ती. नोट्स रचना.

B.4 आम्ही घोषित केले a तयार करा डीफॉल्ट तयार करणारी पद्धत नोट ऑब्जेक्ट आणि मध्ये मध्ये ढकलतो $ व्याप्ती. नोट्स रचना. हे देखील वापरते सॉकेट उत्सर्जन सेवा तयार करा कार्यक्रम आणि पास नवीन टीप आक्षेप

आता आपल्याकडे टिप तयार करण्याची पद्धत आहे, आम्ही ती कशी कॉल करू? तो एक चांगला प्रश्न आहे! एचटीएमएल फाईलमध्ये, आम्ही अंगभूत जेएस डायरेक्टिव्ह मध्ये बिल्ट जोडतो एनजी-क्लिक करा बटणावर आणि नंतर जोडा तयार करा गुणधर्म म्हणून मेथड कॉल.

बटण आयडी = "क्रिएटबटन" एनजी-क्लिक = "तयार नोट ()"> टिप / बटण तयार करा

आम्ही आतापर्यंत काय केले या द्रुत पुनरावलोकनासाठी वेळ. आम्ही एक अ‍ॅरे जोडला आहे . व्याप्ती मध्ये ऑब्जेक्ट मेनसीटीआरएल अनुप्रयोगासाठी सर्व नोट्स ठेवल्या जातील. आम्ही देखील जोडले आहे ए तयार करा वर पद्धत . व्याप्ती नवीन स्थानिक टीप तयार करण्यास आक्षेप आणि नंतर त्याद्वारे अन्य क्लायंटवर ती टीप प्रसारित करा सॉकेट सेवा. आम्ही वर कार्यक्रम ऐकणार्‍याला देखील जोडले आहे सॉकेट सेवा जेणेकरून जेव्हा आम्हाला माहित असेल की इतर क्लायंटने टीप कधी तयार केली असेल तर आम्ही ती आमच्या संग्रहात जोडू शकू.

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

आपल्याकडे आता एक नोट ऑब्जेक्ट तयार करण्याची आणि ब्राउझरमध्ये सामायिक करण्याची क्षमता आहे परंतु आम्ही ती प्रत्यक्षात कशी प्रदर्शित करू? येथूनच निर्देश येतात.

निर्देश आणि त्यांची गुंतागुंत हा एक विस्तृत विषय आहे, परंतु लहान आवृत्ती ही आहे की ते सानुकूल कार्यक्षमतेसह घटक आणि विशेषता वाढविण्याचा एक मार्ग प्रदान करतात. डायरेक्टिव्ह्ज सहजपणे एंग्युलरजेएस बद्दल माझा आवडता भाग आहेत कारण यामुळे आपल्याला HTML मध्ये आपल्या अनुप्रयोगाभोवती संपूर्ण डीएसएल (डोमेन विशिष्ट भाषा) तयार करणे आवश्यक आहे.

हे स्वाभाविक आहे की आम्ही आमच्या सहयोग मंडळासाठी चिकट नोट्स तयार करणार आहोत जे आपण तयार केले पाहिजे चिकट नोंद निर्देश आपण ज्या मॉड्यूलवर ते घोषित करू इच्छिता त्या मॉडेलवर डायरेक्टिव्ह मेथडवर कॉल करून आणि नाव आणि एखादे फंक्शन जे डायरेक्टिव्ह डेफिनेशन ऑब्जेक्ट परत करते त्याद्वारे निर्देशित केले जाते. डायरेक्टिव्ह डेफिनेशन ऑब्जेक्टमध्ये आपण त्यावर परिभाषित करता येण्यासारख्या बर्‍याच संभाव्य गुणधर्म आहेत, परंतु आम्ही येथे आमच्या हेतूंसाठी काही वापरणार आहोत.

मी शिफारस करतो की आपण डायरेक्टिव्ह डेफिनेशन ऑब्जेक्टवर परिभाषित करू शकता अशा मालमत्तांच्या संपूर्ण सूची पाहण्यासाठी आपण AngularJS दस्तऐवजीकरण पहा.

app.directive (’चिकट नोट’, फंक्शन (सॉकेट) {
var लिंकर = फंक्शन (व्याप्ती, घटक, अटर्स) {};

var कंट्रोलर = फंक्शन ($ स्कोप) {};

परत {
प्रतिबंधित करा: ’ए’, // सी .१
दुवा: लिंकर, // सी .२
नियंत्रक: नियंत्रक, // सी .3
व्याप्ती: {// सी .4
टीप: ’=’,
ऑनडेलीट: ’आणि’
}
};
});

C.1 आपण आपल्या निर्देशास विशिष्ट प्रकारच्या HTML घटकांवर प्रतिबंधित करू शकता. दोन सर्वात सामान्य घटक किंवा विशेषता आहेत, जे आपण वापरुन घोषित करता ई आणि ए अनुक्रमे आपण ते सीएसएस वर्ग किंवा एखाद्या टिप्पणीवरही प्रतिबंधित करू शकता परंतु हे इतके सामान्य नाही.

सी. दुवा कार्य असे आहे जेथे आपण आपला सर्व डीओएम मॅनिपुलेशन कोड ठेवले. मला सापडलेले काही अपवाद आहेत, परंतु हे नेहमी सत्य आहे (किमान 99 टक्के) हा AngularJS चा मूलभूत नियम आहे आणि म्हणूनच मी यावर जोर दिला आहे.

C.3 कंट्रोलर फंक्शन अनुप्रयोगासाठी आम्ही परिभाषित केलेल्या मुख्य नियंत्रकाप्रमाणेच कार्य करते परंतु . व्याप्ती आम्ही ज्या ऑब्जेक्टमध्ये जात आहोत त्या DOM घटकाशी संबंधित आहे ज्यावर निर्वासित जीवन जगते.

सी .4 अँगुलरजेएस मध्ये वेगळ्या व्याप्तीची संकल्पना आहे, जी आपल्याला निर्देशांचे कार्यक्षेत्र बाह्य जगाशी कसे संवाद साधते हे स्पष्टपणे स्पष्ट करण्यास अनुमती देते. जर आम्ही व्याप्ती घोषित केली नसती तर पालकांना पालक-मुलाच्या संबंधासह पालकांच्या कार्यक्षेत्रातून सुस्पष्टपणे वारसा मिळाला असता. बर्‍याच प्रकरणांमध्ये हे इष्टतम नाही. बाह्य जग अजाणतेपणाने आणि आपल्या निर्देशाच्या स्थितीवर प्रतिकूल परिणाम करू शकेल अशी शक्यता कमी करुन आम्ही कमी करतो.

मी द्वि-मार्ग डेटा-बंधनकारक घोषित केले आहे नोट सह = प्रतीक आणि एक अभिव्यक्ति बंधनकारक ऑनडेलीट सह & चिन्ह. कृपया स्वतंत्र व्याप्तीच्या संपूर्ण स्पष्टीकरणासाठी एंगुलरजेएस दस्तऐवजीकरण वाचा कारण ते फ्रेमवर्कमधील एक गुंतागुंतीचा विषय आहे.

तर मग प्रत्यक्षात डीओएमला एक चिकट नोट जोडा.

कोणत्याही चांगल्या फ्रेमवर्क प्रमाणेच, अँगुलरजेएस बॉक्सच्या अगदी बाहेरच काही खरोखर उत्कृष्ट वैशिष्ट्यांसह येतो. सर्वात सुलभ वैशिष्ट्यांपैकी एक आहे एनजी-रिपीट. हे अँगुलरजेएस निर्देश आपल्याला ऑब्जेक्टच्या अ‍ॅरेमध्ये जाण्याची परवानगी देते आणि अ‍ॅरेमध्ये आयटम असल्याने तो जे काही टॅग करतो त्यास तो डुप्लिकेट करतो. खालील प्रकरणात, आम्ही त्यावरील पुनरावृत्ती करीत आहोत नोट्स अ‍ॅरे आणि डुप्लिकेट Div लांबीसाठी घटक आणि त्याची मुले नोट्स रचना.

div स्टिकी-नोट एनजी-रीपीट = "नोट्स मधील टीप" नोट = "टीप" ऑनडेलीट = "डिलीट नोट (आयडी)">
बटण प्रकार = "बटण" एनजी-क्लिक = "हटवावे (नोट.आयडी)"> button / बटण>
इनपुट एनजी-मॉडेल = "नोट.टिटल" एनजी-चेंज = "अपडेटनोट (टीप)" प्रकार = "मजकूर">
textarea ng-Model = "note.body" ng-change = "अद्यतननोट (टीप)"
> {{टीप.बेडी}} / मजकूर>
/ div>

सौंदर्य एनजी-रिपीट असे आहे की आपण ज्या अ‍ॅरेमध्ये प्रवेश करता त्यास हे बंधनकारक आहे आणि जेव्हा आपण अ‍ॅरेमध्ये एखादी वस्तू जोडाल तेव्हा आपला डीओएम घटक स्वयंचलितपणे अद्यतनित होईल. आपण हे एक पाऊल पुढे टाकू शकता आणि केवळ मानक डीओएम घटकच नव्हे तर इतर सानुकूल निर्देशांची पुनरावृत्ती करू शकता. म्हणूनच आपण पाहता चिकट नोंद घटक एक विशेषता म्हणून.

सानुकूल कोडची आणखी दोन बिट्स आहेत जी स्पष्ट करणे आवश्यक आहे. च्या व्याप्तीस आम्ही वेगळे केले आहे चिकट नोट्स दोन गुणधर्मांवर निर्देश. प्रथम एक वर बंधनकारक परिभाषित वेगळ्या व्याप्ती आहे नोट मालमत्ता. याचा अर्थ असा की जेव्हा जेव्हा टीप ऑब्जेक्ट पॅरेंटल स्कोपमध्ये बदलला जाईल तेव्हा ते संबंधित नोट ऑब्जेक्ट स्वयंचलितपणे निर्देशात आणि त्याउलट अद्यतनित करेल. इतर परिभाषित वेगळ्या व्याप्तीवर आहे ऑनडेलीट गुणधर्म. याचा अर्थ असा आहे की जेव्हा ऑनडेलीट त्यास निर्देशात म्हटले जाते, ते ज्यामध्ये आहे त्यास कॉल करेल ऑनडेलीट डीओएम घटकावरील विशेषता जो निर्देशांना त्वरित स्थापित करते.

जेव्हा एखादा निर्देश त्वरित स्थापित केला जातो तेव्हा तो डीओएममध्ये जोडला जातो आणि दुवा फंक्शन म्हटले जाते. घटकावर काही डीफॉल्ट डीओएम गुणधर्म सेट करण्याची ही एक उत्तम संधी आहे. आपण ज्या घटक पॅरामीटरमध्ये जात आहोत तो प्रत्यक्षात एक jQuery ऑब्जेक्ट आहे आणि म्हणून आम्ही त्यावर jQuery ऑपरेशन्स करू शकतो.

(अँगुलरजेएस प्रत्यक्षात त्यात तयार केलेल्या jQuery चा सबसेट आला आहे परंतु आपण आधीपासूनच jQuery ची संपूर्ण आवृत्ती समाविष्ट केली असेल तर, AngularJS त्यास पुढे ढकलेल.)

app.directive (’स्टिकी नोट’, फंक्शन (सॉकेट) {
var लिंकर = फंक्शन (व्याप्ती, घटक, अ‍ॅटर्स) {
// ते छान बनविण्यासाठी काही डीओएम दीक्षा
घटक. सीएसएस (’डावे’, ’10 पीएक्स’);
घटक. सीएसएस (’टॉप’, ’p० पीएक्स’);
एलिमेंट.हाइड (). फेडेइन ();
};
});

वरील कोडमध्ये आम्ही स्टेजवर फक्त चिकट नोट ठेवत आहोत आणि त्यास आत लुप्त करत आहोत.

11. एक चिकट नोट हटवत आहे

आता आपण एक चिकट नोट जोडू आणि प्रदर्शित करू शकतो, परंतु आता चिकट नोट्स हटविण्याची वेळ आली आहे. चिकट नोट्स तयार करणे आणि हटविणे ही नोट्स बंधनकारक असलेल्या अ‍ॅरेमधून आयटम जोडणे आणि हटविणे ही बाब आहे. हा अ‍ॅरे टिकवून ठेवण्याची पालकांची जबाबदारी हीच आहे, म्हणूनच आपण डिलीट विनंतीची सुरुवात निर्देशातूनच करतो, परंतु पालकांना वावगेपणा खरोखरच भारी उचल करण्यास द्या.

म्हणूनच आम्ही निर्देशांवर स्वतंत्र अभिव्यक्ती परिभाषित वेगळ्या व्याप्ती तयार करण्याच्या सर्व अडचणींमध्ये गेलो: जेणेकरून त्या निर्देशास हटविण्याचा कार्यक्रम आंतरिक प्राप्त होईल आणि प्रक्रियेसाठी त्याच्या पालकांकडे जाईल.

निर्देशांच्या आत HTML पहा.

बटण प्रकार = "बटण" एनजी-क्लिक = "हटवावे (नोट.आयडी)"> button / बटण>

मी ज्या पुढच्या गोष्टी सांगणार आहे ती कदाचित अगदी लांब पडासारखी वाटत असेल परंतु लक्षात असू द्या की आपण एकाच बाजूला आहोत आणि मी विस्तृत केल्यावर त्याचा अर्थ होईल. जेव्हा चिकट नोटच्या वरील उजव्या कोपर्‍यातील बटण क्लिक केले जाते तेव्हा आम्ही कॉल करीत असतो हटवा निर्देशकाच्या नियंत्रकावर आणि मध्ये जात आहे note.id मूल्य. नियंत्रक नंतर कॉल करतो ऑनडेलीट, जे त्यानंतर आम्ही ज्या वाणीवर वायर्ड झालो आहोत ते कार्यान्वित करते. अजून तरी छान आहे? आम्ही कंट्रोलरवर एक स्थानिक पद्धत कॉल करीत आहोत जे वेगळ्या व्याप्तीमध्ये परिभाषित केलेल्या कोणत्याही अभिव्यक्तीवर कॉल करून ती सुपूर्द करते. आई-वडिलांना बोलावले जाणारे अभिव्यक्ती फक्त कॉल केल्यासारखेच होते हटवा सुद्धा.

app.directive (’स्टिकी नोट’, फंक्शन (सॉकेट) {
var नियंत्रक = कार्य ($ स्कोप)
$ स्केप.डेलीनेट नोट = फंक्शन (आयडी) {
$ स्काॅप.एन्डलीट ({
मी केले
});
};
};

परत {
प्रतिबंधित करा: ’अ’,
दुवा: दुवा साधणारा,
नियंत्रक: नियंत्रक,
व्याप्ती: {
टीप: ’=’,
ऑनडेलीट: ’आणि’
}
};
});

(अभिव्यक्ती-परिभाषित वेगळ्या व्याप्ती वापरताना, ऑब्जेक्ट नकाशामध्ये मापदंड पाठविले जातात.)

मूळ व्याप्तीमध्ये, हटवा म्हणतात आणि वापरुन ब standard्यापैकी प्रमाणित हटविते angular.forEach नोट्स अ‍ॅरे वर पुनरावृत्ती करण्यासाठी युटिलिटी फंक्शन. एकदा फंक्शनने आपला स्थानिक व्यवसाय हाताळला की तो पुढे जातो आणि त्या अनुषंगाने उर्वरित जगासाठी इव्हेंट उत्सर्जित करतो.

app.controller (’MainCtrl’, फंक्शन ($ स्कोप, सॉकेट)
$ स्कोप.नोट्स = [];

// इनकमिंग
सॉकेट.ऑन (’ऑन नोट डीलीटेड’, फंक्शन (डेटा)
$ स्कोप.डेलीट नोट (डेटा.आयडी);
});

// आउटगोइंग
$ स्केप.डेलीनेट नोट = फंक्शन (आयडी) {
var जुने नोट्स = $ स्काउप नोट्स,
नवीन नोट्स = [];

angular.forEach (जुने नोट्स, फंक्शन (टीप) {
if (नोट.id! == id) newNotes.push (नोट);
});

$ स्कोप.नोट्स = नवीन नोट्स;
सॉकेट.इमिट (’डिलीट नोट’, {आयडी: आयडी});
};
});

12. एक चिकट नोट अद्यतनित करणे

आम्ही विलक्षण प्रगती करीत आहोत! आतापर्यंत मी आशा करतो की आपण घेत असलेल्या या वावटळ दौर्‍यामधून काही नमुने निघताना आपण पहात आहात. सूचीमधील पुढील आयटम अद्यतन वैशिष्ट्य आहे.

आम्ही वास्तविक डीओएम घटकांवर प्रारंभ करणार आहोत आणि सर्व्हरपर्यंत सर्व मार्गांचा पाठपुरावा करून क्लायंटकडे परत जात आहोत. प्रथम आम्हाला हे माहित असणे आवश्यक आहे की चिकट नोटचे शीर्षक किंवा मुख्य भाग कधी बदलला जात आहे. अँगुलरजेएस डेटा मॉडेलचा भाग म्हणून घटक बनवतात जेणेकरून आपण स्नॅपमध्ये दुहेरी डेटा-बाइंडिंग करू शकता. हे करण्यासाठी एनजी-मॉडेल आपण बांधू इच्छित असलेल्या मालमत्तेस निर्देश द्या आणि ठेवा. या प्रकरणात आम्ही वापरणार आहोत लक्षात ठेवा आणि लक्षात ठेवा अनुक्रमे

जेव्हा यापैकी कोणतेही गुणधर्म बदलले जातात तेव्हा आम्हाला ती माहिती पुढे जाण्यासाठी हस्तगत करायची असते. आम्ही हे सह पूर्ण करतो एनजी-बदल निर्देशित करा आणि कॉल करण्यासाठी वापरा अद्यतननोट आणि नोट ऑब्जेक्टमध्येच पास करा. जे काही आहे त्यामधे काही मूल्य आहे का ते शोधण्यासाठी एंग्युलर जेएस काही चतुर गलिच्छ तपासणी करते एनजी-मॉडेल बदलली आहे आणि नंतर असलेली अभिव्यक्ती कार्यान्वित करते एनजी-बदल.

इनपुट एनजी-मॉडेल = "नोट.टिटल" एनजी-चेंज = "अपडेटनोट (टीप)" प्रकार = "मजकूर">
textarea ng-Model = "note.body" ng-change = "updateNote (नोट)"> {{note.body}} / textarea>

वापरण्याची उलटी एनजी-बदल हे आहे की स्थानिक रूपांतर आधीच झाले आहे आणि आम्ही संदेश परत करण्यास फक्त जबाबदार आहोत. नियंत्रक मध्ये, अद्यतननोट म्हणतात आणि तेथून आम्ही उत्सर्जन करणार आहोत अद्यतननोट आमच्या सर्व्हरसाठी इतर क्लायंटवर प्रसारित करण्यासाठी कार्यक्रम.

app.directive (’स्टिकी नोट’, फंक्शन (सॉकेट) {
var नियंत्रक = कार्य ($ स्कोप)
$ स्काॅप.अपडेटनेट = फंक्शन (टीप) {
सॉकेट.इमिट (‘अपडेट नोट’, टीप);
};
};
});

आणि निर्देशक नियंत्रकात, आम्ही ऐकत आहोत onNoteUpdated दुसर्‍या क्लायंटकडून नोट केव्हा अद्ययावत झाली हे जाणून घेण्यासाठी इव्हेंट जेणेकरुन आम्ही आमची स्थानिक आवृत्ती अद्यतनित करू.

var नियंत्रक = कार्य ($ स्कोप)
// इनकमिंग
सॉकेट.ऑन (’ऑन टिप अपडेटेड’, फंक्शन (डेटा)
// समान नोट असल्यास अद्यतनित करा
if (डेटा.id == $ स्केप.नोट.आइड) {

$ स्केप.नोट.टिटल = डेटा.टिटल;
$ स्केप.एनटे.बेडी = डेटा.बेडी;
}
});
};

13. एक चिकट नोट हलवित आहे

या टप्प्यावर आम्ही मुळात सीआरयूडी किडी पूलभोवती एक लॅप केला आहे आणि आयुष्य चांगले आहे! फक्त आपल्या मित्रांना प्रभावित करण्यासाठी पार्लर युक्तीच्या फायद्यासाठी, आम्ही स्क्रीनवर नोट्स हलविण्याची क्षमता आणि वास्तविक वेळेत निर्देशांक अद्यतनित करण्याची क्षमता जोडू. घाबरू नका - ही कोडच्या आणखी काही ओळी आहे. ही सर्व मेहनत फेडणार आहे. मी वचन देतो!

आम्ही खास पाहुणे, jQueryUI, ला पार्टीला आमंत्रित केले आहे, आणि आम्ही हे सर्व ड्रॅग्नेबलसाठी केले आहे. स्थानिकपणे टीप ड्रॅग करण्याची क्षमता जोडणे केवळ कोडची एक ओळ घेते. जर आपण जोडले तर एलिमेंट.ड्रेग्गेबल (); आपल्या लिंकर फंक्शनवर आपण वाचलेल्याच्या ‘वाघाची आई’ ऐकू येऊ शकता कारण आपण आता आपल्या नोट्सभोवती ड्रॅग करू शकता.

आम्हाला हे जाणून घ्यायचे आहे की ड्रॅगिंग कधी थांबले आहे आणि नवीन कोऑर्डिनेट्स बाजूने जाण्यासाठी कॅप्चर करा. jQueryUI काही अत्यंत हुशार लोकांनी तयार केले होते, म्हणून जेव्हा ड्रॅगिंग थांबते तेव्हा आपल्याला स्टॉप इव्हेंटसाठी कॉलबॅक फंक्शन परिभाषित करणे आवश्यक असते. आम्ही झडप घालतो note.id मधील स्कोप ऑब्जेक्ट आणि डावे आणि शीर्ष सीएसएस मूल्ये बंद करा ui ऑब्जेक्ट. त्या ज्ञानाने आपण जे करीत आहोत तेच करतो: उत्सर्जित करा!

app.directive (’स्टिकी नोट’, फंक्शन (सॉकेट) {
var linker = कार्य (व्याप्ती, घटक, अटर्स) {
तत्व.ड्रेग्गेबल ({
थांबा: कार्य (इव्हेंट, यूआय)
सॉकेट.इमिट (’मूव्हनोट’,
आयडी: स्कोप.नोट.आइड,
x: ui.position.left,
y: ui.position.top
});
}
});

सॉकेट.ऑन (’ऑननोटमोव्हड’, फंक्शन (डेटा)
// समान नोट असल्यास अद्यतनित करा
if (डेटा.id == स्काउंट.नोट.आइड) {
एलिमेंट.अनिमेट ({
डावे: डेटा.एक्स,
शीर्ष: डेटा.y
});
}
});
};
});

या क्षणी हे आश्चर्य वाटण्यासारखे नाही की आम्ही सॉकेट सेवेतील हलविण्याशी संबंधित कार्यक्रम देखील ऐकत आहोत. या प्रकरणात ते आहे onNoteMoved इव्हेंट आणि टीप जुळत असल्यास आम्ही डावीकडील आणि शीर्ष सीएसएस गुणधर्म अद्यतनित करतो. बाम! पूर्ण झाले!

14. बोनस

हा एक बोनस विभाग आहे ज्याचा मला खात्री नाही की आपण 10 मिनिटांपेक्षा कमी वेळात ते साध्य करू शकेन. आम्ही थेट सर्व्हरवर उपयोजित करणार आहोत (हे करणे किती सोपे आहे याबद्दल मी अजूनही चकित झालो आहे).

प्रथम, आपल्याला विनामूल्य नोडिजिट्सू चाचणीसाठी साइन अप करणे आवश्यक आहे. चाचणी 30 दिवसांसाठी विनामूल्य आहे, जी आपले पाय ओले करण्यासाठी योग्य आहे.

एकदा आपण आपले खाते तयार केले की आपल्याला जित्सू पॅकेज स्थापित करणे आवश्यक आहे, जे आपण कमांड लाइनद्वारे करू शकता $ n दुपारी जित्सु-जी स्थापित करा.

नंतर आपल्याला कमांड लाइन वरून लॉग इन करणे आवश्यक आहे its जित्सू लॉगिन आणि आपली क्रेडेन्शियल्स प्रविष्ट करा.

आपण थेट आपल्या अ‍ॅपमध्ये असल्याची खात्री करा, टाइप करा its जित्सु तैनात आणि प्रश्नांकडे जा. मी सामान्यत: शक्य तितक्या डिफॉल्टवर जास्तच सोडतो, याचा अर्थ असा आहे की मी माझा अनुप्रयोग नाव देतो परंतु सबडोमेन वगैरे नाही.

आणि, माझ्या प्रिय मित्रांनो, इतकेच आहे! एकदा सर्व्हरच्या उपयोजनानंतर आपल्याला आपल्या अनुप्रयोगाची URL मिळेल आणि ती तयार होईल.

15. निष्कर्ष

आम्ही या लेखात बर्‍याच अँगुलर जेएस मैदानावर आच्छादित केले आहे आणि मला आशा आहे की आपण या प्रक्रियेत खूप मजा केली असेल. मला असे वाटते की आपण एंग्युलरजेएस आणि सॉकेट.आयओ सह अंदाजे 200 ओळींच्या कोडमध्ये जे साध्य करू शकता ते खरोखर सुबक आहे.

मुख्य गोष्टींवर लक्ष केंद्रित करण्याच्या हेतूने मी कश्या गोष्टी लपवल्या नव्हत्या, परंतु मी स्त्रोत खाली आणण्यासाठी आणि अनुप्रयोगासह फिरण्यास प्रोत्साहित करतो. आम्ही एक मजबूत पाया तयार केला आहे, परंतु तरीही आपण जोडत असलेली बरीच वैशिष्ट्ये आहेत. हॅकिंग मिळवा!

लुकास रुएबल्के हे तंत्रज्ञानाचा उत्साही असून अ‍ॅक्शन फॉर मॅनिंग पब्लिकेशन्सचे सह-लेखन एंगुलरजेएस करीत आहेत. लोकांना त्याची आवडती गोष्ट म्हणजे तो आहे त्याप्रमाणे तंत्रज्ञानाविषयी उत्साहित करणे. तो फिनिक्स वेब Userप्लिकेशन यूजर ग्रुप चालवितो आणि गुन्हेगारीत त्याच्या सहकारी भागीदारांसह एकाधिक हॅकाथॉनचे आयोजन करतो.

हे आवडले? हे वाचा!

  • अ‍ॅप कसा बनवायचा
  • आमचे आवडते वेब फॉन्ट - आणि त्यांना एका पैशाची किंमत नाही
  • संवर्धित वास्तवासाठी पुढे काय आहे ते शोधा
  • विनामूल्य पोत डाउनलोड करा: उच्च रिझोल्यूशन आणि आता वापरण्यास सज्ज
मागील लेख

स्केचबुक अॅपला डिझाइनर्ससाठी नवीन स्मार्ट स्टाईलस प्राप्त झाले
पुढील लेख

फोटोशॉपमध्ये द्रव प्रभाव तयार करा
संपादक निवड
या पुरस्कारप्राप्त वाइन ब्रँडिंगसह कमी अधिक आहे
पुढे वाचा

या पुरस्कारप्राप्त वाइन ब्रँडिंगसह कमी अधिक आहे

मे 2024
डी अँड एडी दर वर्षी जगातील सर्वोत्कृष्ट डिझाइन प्रकल्पांची नावे ठेवते, ज्यामुळे जगातील सर्वात महत्वाच्या डिझाईन पुरस्कार स्पर्धांपैकी एक बनतो. १ 60 ० च्या दशकात ब्रिटीश ना-नफा संस्था / शैक्षणिक धर्माद...
ए 2 होस्टिंग पुनरावलोकन
पुढे वाचा

ए 2 होस्टिंग पुनरावलोकन

मे 2024
अनुभवी वापरकर्त्यांसाठी सर्वोत्कृष्ट, ए 2 वेब होस्टिंगमध्ये स्पीड-बूस्टिंग टेक आहे, जे आपल्या अभ्यागतांना वेबसाइट्स त्वरीत वितरीत करते, परंतु ते किंमतीवर येते. उच्च कार्यक्षमता सर्व्हर विनामूल्य 24/7/...
GOV.UK बीटा मध्ये सुरू
पुढे वाचा

GOV.UK बीटा मध्ये सुरू

मे 2024
डायरेक्टगोव्हची जागा घेणारी जीओव्ही.के.के. साइट काल रात्री बीटा स्वरूपात लाइव्ह झाली. बर्‍याच नामांकित सरकारी आयटी प्रकल्पांप्रमाणेच, हे कामकाजाच्या पद्धतींमधून - चपळ, पुनरावृत्ती करणारा दृष्टीकोन - ओ...