AngketJS تعاون بورڈ Socket.io کے ساتھ

مواد

• 01. سرور
• 02. ننگی ہڈیاں
• 03. اپنی انحصار کا اعلان کریں
• 04. وائر اپ ساکٹ.یو
• 05. اپنے انجنوں کو شروع کریں!
• 06. آگے بڑھنے سے پہلے کچھ واضح خیالات
• 07. مؤکل
• 08. ننگی ہڈیوں
• 09. ایک چپچپا نوٹ بنانا
• 10. چپچپا نوٹ کی نمائش
• 11. ایک چپچپا نوٹ کو حذف کرنا
• 12. ایک چپچپا نوٹ کو اپ ڈیٹ کرنا
• 13. ایک چپچپا نوٹ منتقل کرنا
• 14. بونس
• 15. نتیجہ اخذ کرنا
• پسند آیا؟ یہ پڑھیں!

• علم کی ضرورت: انٹرمیڈیٹ جاوا اسکرپٹ
• ضرورت ہے: Node.js ، NPM
• پروجیکٹ کا وقت: 2 گھنٹے

انگولر جے ایس خاص طور پر براؤزر میں کلائنٹ سائیڈ سے بھرپور ایپلی کیشنز بنانے کے ل. مناسب ہے اور جب آپ تھوڑی سا ساکٹ ڈاٹ ای او کو اختلاط میں شامل کرتے ہیں تو چیزیں واقعی دلچسپ ہوجاتی ہیں۔ اس آرٹیکل میں ہم ایک حقیقی وقت کا تعاون بورڈ تشکیل دینے جارہے ہیں جو کلائنٹ سائیڈ ایپلیکیشن اور ساکٹ ڈاٹیو کے لئے AngularJS کا استعمال کرتے ہوئے تمام منسلک کلائنٹس کے مابین اسٹیٹ شیئر کرے گا۔

آئیے شروع کرنے سے پہلے تھوڑا سا ہاؤس کیپنگ کا احاطہ کریں۔ میں سمجھنے جا رہا ہوں کہ آپ کو HTML اور جاوا اسکرپٹ کی بنیادی گرفت ہے کیونکہ میں کوڈ کے ہر چھوٹے کونے کو کور کرنے نہیں جا رہا ہوں۔ مثال کے طور پر ، میں HTML فائل کے عنوان میں شامل کردہ CSS اور جاوا اسکرپٹ فائلوں کو کال کرنے نہیں جا رہا ہوں کیونکہ وہاں کوئی نئی معلومات موجود نہیں ہے۔

نیز ، میں آپ کی حوصلہ افزائی کرتا ہوں کہ اپنے گٹہب اکاؤنٹ سے کوڈ کو ساتھ لے کر چلوں۔ میرے اچھے دوست برائن فورڈ کے پاس بھی ایک عمدہ ساکٹ.یو بیج ہے ، جس پر میں نے اپنے کچھ اصل خیالات کی بنیاد رکھی۔

تعاون بورڈ میں ہم چار اہم خصوصیات چاہتے ہیں جس میں ایک نوٹ تخلیق کرنے ، نوٹ پڑھنے ، ایک نوٹ کو اپ ڈیٹ کرنے ، ایک نوٹ کو حذف کرنے اور تفریح ​​کے ل board بورڈ پر ایک نوٹ منتقل کرنے کی صلاحیت ہے۔ ہاں ، یہ صحیح ہے ، ہم معیاری CRUD خصوصیات پر توجہ مرکوز کر رہے ہیں۔ مجھے یقین ہے کہ ان بنیادی خصوصیات پر توجہ مرکوز کرکے ، ہم نے نمونوں کے ابھرنے کے ل enough کافی کوڈ کا احاطہ کیا ہوگا تاکہ آپ انہیں لے کر کہیں اور ان کا اطلاق کرسکیں۔

01. سرور

ہم سب سے پہلے نوڈ ڈاٹ جے ایس سرور کے ساتھ شروع کرنے جا رہے ہیں کیونکہ یہ اس فاؤنڈیشن کے طور پر کام کرے گا جس پر ہم باقی سب کچھ تیار کرنے جارہے ہیں۔

ہم ایکسپریس اور ساکٹ ڈاٹ او کے ساتھ نوڈ جے ایس سرور بنانے جارہے ہیں۔ ہم ایکسپریس کو استعمال کر رہے ہیں اس کی وجہ یہ ہے کہ یہ نوڈ. جے ایس میں جامد اثاثہ سرور قائم کرنے کے لئے ایک عمدہ طریقہ کار مہیا کرتا ہے۔ ایکسپریس واقعی حیرت انگیز خصوصیات کے ایک گروپ کے ساتھ آتی ہے لیکن ، اس معاملے میں ، ہم اس کا استعمال سرور اور مؤکل کے مابین صاف ستھری انداز میں بائیسکٹ کرنے کے لئے کر رہے ہیں۔

(میں اس مفروضے کے تحت کام کر رہا ہوں کہ آپ نے Node.js اور NPM انسٹال کر رکھے ہیں۔ ایک فوری گوگل سرچ آپ کو دکھائے گی کہ اگر آپ ایسا نہیں کرتے ہیں تو ان کو انسٹال کیسے کریں گے۔)

02. ننگی ہڈیاں

لہذا سرور کی ننگی ہڈیوں کو بنانے کے لئے ، ہمیں اٹھنے اور چلانے کے لئے ایک دو چیزیں کرنے کی ضرورت ہے۔

// app.js

// A.1
var ایکسپریس = مطلوبہ (’ایکسپریس‘) ،
ایپ = ایکسپریس ()؛
سرور = کی ضرورت ہوتی ہے (’HTTP’)۔ تخلیق سرور (ایپ) ،
io = اړتیا (’ساکٹ.یو‘)۔ سنو (سرور)؛

// A.2
app.configure (فنکشن () {
ایپ.یوز (ایکسپریس.سٹاٹٹک (__ ڈیر نام + ’/ عوامی‘))؛
});

// A.3
سرور.لیسٹن (1337)؛

A.1 ہم اپنے Node.js ماڈیولز کا اعلان اور انسٹینٹیشن کر رہے ہیں تاکہ ہم ان کو اپنی درخواست میں استعمال کرسکیں۔ ہم ایکسپریس کا اعلان ، ایکسپریس کو تیز اور پھر ایک HTTP سرور بنا رہے ہیں اور اس میں ایکسپریس مثال بھیج رہے ہیں۔ اور وہاں سے ہم ساکٹ.یو کو تیز کررہے ہیں اور اسے ہمارے سرور کی مثال پر نگاہ رکھنے کے لئے کہہ رہے ہیں۔

A.2 تب ہم اپنے ایکسپریس ایپ کو فائلوں کی خدمت کیلئے اپنی عوامی ڈائرکٹری کا استعمال کرنے کے لئے کہہ رہے ہیں۔

A.3 ہم سرور شروع کرتے ہیں اور بندرگاہ پر سننے کو کہتے ہیں 1337.

اب تک وہ بہت ہی تکلیف دہ اور تیز ہے۔ مجھے یقین ہے کہ ہم کوڈ میں 10 لائنوں سے بھی کم ہیں اور پہلے سے ہی ہمارے پاس ایک فنکشنل نوڈ. جے سرور ہے۔ آگے!

03. اپنی انحصار کا اعلان کریں

// package.json
{
"نام": "کونیی-کولیب بورڈ" ،
"وضاحت": "AngularJS सहयोग بورڈ" ،
"ورژن": "0.0.1-1" ،
"نجی": سچ ،
"انحصار": {
"ایکسپریس": "3.x" ،
"socket.io": "0.9.x"
}
}

این پی ایم کی سب سے اچھ ofی خصوصیات میں سے ایک آپ کی انحصار کا اعلان کرنے کی صلاحیت ہے package.json فائل کریں اور پھر خود بخود انسٹال کریں npm انسٹال کریں کمانڈ لائن پر

04. وائر اپ ساکٹ.یو

ہم نے پہلے ہی بنیادی خصوصیات کی وضاحت کی ہے جو ہم درخواست میں چاہتے ہیں اور لہذا ہمیں Socket.io ایونٹ کے سامعین کو ترتیب دینے کی ضرورت ہے اور ہر ایک کارروائی کے لئے واقعہ کو سنبھالنے کے لئے مناسب بندش کی ضرورت ہے۔

نیچے دیے گئے کوڈ میں آپ دیکھیں گے کہ یہ بنیادی طور پر ایونٹ کے سننے والوں اور کال بیکس کی ترتیب ہے۔ پہلا واقعہ ہے رابطہ ایونٹ ، جسے ہم بند ہونے میں اپنے دوسرے واقعات کو تار تار کرنے کے لئے استعمال کرتے ہیں۔

io.sockets.on (’کنکشن‘ ، فنکشن (ساکٹ) {
ساکٹ ڈاٹ کام (’تخلیق نوٹ‘ ، فنکشن (ڈیٹا) {
ساکٹ.بروڈکاسٹ ڈاٹ اییمٹ (’آن نوٹٹریٹریٹڈ‘ ، ڈیٹا)؛
});

ساکٹ ڈاٹ کام (’اپ ڈیٹ نوٹ‘ ، فنکشن (ڈیٹا) {
ساکٹ.بروڈکاسٹ ڈاٹ اییمٹ (’آن نوٹٹڈیٹڈ‘ ، ڈیٹا)؛
});

ساکٹ ڈاٹ کام (’ڈیلیٹ نوٹ‘ ، فنکشن (ڈیٹا) {
ساکٹ.بروڈکاسٹ ڈاٹ اییمٹ (’آن نوٹٹیلیٹڈ‘ ، ڈیٹا)؛
});

ساکٹ ڈاٹ کام (’اقدام نوٹ‘ ، فنکشن (ڈیٹا) {
ساکٹ.بروڈکاسٹ ڈاٹ اییمٹ (’آن نوٹٹ مووڈڈ‘ ، ڈیٹا)؛
});
});

یہاں سے ہم سننے والوں کو شامل کرتے ہیں تخلیق نوٹ, اپ ڈیٹ نوٹ, ڈیلیٹ نوٹ اور اقدام نوٹ. اور کال بیک فنکشن میں ، ہم براہ راست نشر کررہے ہیں کہ کون سا واقعہ پیش آیا ہے تاکہ کسی بھی مؤکل کے سننے سے یہ اطلاع مل سکے کہ واقعہ پیش آیا۔

ایونٹ کے انفرادی ہینڈلرز میں کال بیک بیک کے افعال کے بارے میں کچھ اشارہ کرنے کے قابل ہیں۔ ایک ، اگر آپ کسی دوسرے کو ایونٹ بھیجنا چاہتے ہیں لیکن موکل جو آپ کے داخل کردہ ایونٹ کو خارج کرتا ہے نشر کرنا اس سے پہلے اخراج فنکشن کال دوم ، ہم آسانی سے دلچسپی رکھنے والی پارٹیوں کو ایونٹ کا پے لوڈ دے رہے ہیں تاکہ وہ اس پر عملدرآمد کرسکیں کہ وہ کس حد تک فٹ نظر آتے ہیں۔

05. اپنے انجنوں کو شروع کریں!

اب جب کہ ہم نے اپنی انحصار کی تعریف کی ہے اور ایکسپریس اور ساکٹ ڈاٹ او پاورز کے ساتھ اپنی نوڈ ڈاٹ جے ایس ایپلیکیشن کو ترتیب دیا ہے ، نوڈ. جے سرور کو شروع کرنا آسان ہے۔

پہلے آپ اپنی Node.js پر انحصار انسٹال کریں:

npm انسٹال کریں

اور پھر آپ سرور کو اس طرح شروع کرتے ہیں:

نوڈ app.js

اور پھر! آپ اپنے براؤزر میں اس پتے پر جاتے ہیں۔ بام!

06. آگے بڑھنے سے پہلے کچھ واضح خیالات

میں بنیادی طور پر ایک فرنٹ اینڈ ڈویلپر ہوں اور ابتدائی طور پر مجھے اپنی ایپلی کیشن میں نوڈ ڈاٹ جے ایس سرور کے ساتھ لگانے سے تھوڑا سا ڈرا گیا تھا۔ AngularJS حصہ ایک سنیپ لیکن سرور سائڈ جاوا اسکرپٹ تھا؟ ہارر فلک سے ڈراونا میوزک کی قطار لگائیں۔

لیکن ، میں بالکل یہ دریافت کرنے کے لئے فرش تھا کہ میں صرف چند لائنوں کے کوڈ میں ایک جامد ویب سرور قائم کرسکتا ہوں اور کچھ اور لائنوں میں براؤزرز کے مابین ہونے والے تمام واقعات کو سنبھالنے کے لئے ساکٹ ڈاٹیو کا استعمال کرتا ہوں۔ اور یہ ابھی بھی صرف جاوا اسکرپٹ تھا! ہم آہنگی کی خاطر ، ہم صرف کچھ خصوصیات کا احاطہ کر رہے ہیں ، لیکن مجھے امید ہے کہ مضمون کے آخر تک آپ دیکھیں گے کہ تیرنا آسان ہے۔ اور تالاب کا گہرا آخر اتنا خوفناک نہیں ہے۔

07. مؤکل

اب جب کہ ہمارے پاس ہمارے سرور کے ساتھ اپنی مضبوط ٹھوس بنیاد ہے ، آئیے اپنے پسندیدہ حصے یعنی مؤکل کی طرف چلیں۔ ہم ڈریگ ایبل حصے کے لئے AngularJS ، jQueryUI اور اسٹائل بیس کے لئے ٹویٹر بوٹسٹریپ استعمال کریں گے۔

08. ننگی ہڈیوں

ذاتی ترجیح کی بات کے طور پر ، جب میں ایک نیا انگولر جے ایس ایپلی کیشن شروع کرتا ہوں ، تو میں فوری طور پر کم سے کم اس کی وضاحت کرنا چاہتا ہوں کہ میں جانتا ہوں کہ مجھے شروع کرنے کی ضرورت ہے اور اس کے بعد جلد سے جلد اس پر تکرار کرنا شروع کردوں گا۔

ہر انگولر جے ایس ایپلی کیشن کو کم از کم ایک کنٹرولر موجود کے ساتھ بوٹسٹریپ کرنے کی ضرورت ہے اور لہذا یہ وہ جگہ ہے جہاں میں ہمیشہ شروع کرتا ہوں۔

خود بخود ایپلی کیشن کو بوٹسٹریپ کرنے کے ل you آپ کو صرف شامل کرنے کی ضرورت ہے ng-app HTML نوڈ میں جہاں آپ چاہتے ہیں کہ ایپلی کیشن زندہ رہے۔ زیادہ تر وقت ، اس کو HTML ٹیگ میں شامل کرنا بالکل قابل قبول ہوگا۔ میں نے اس میں ایک وصف بھی شامل کیا ہے ng-app یہ بتانے کے لئے کہ میں استعمال کرنا چاہتا ہوں ایپ ماڈیول ، جس کی وضاحت میں صرف ایک لمحے میں کروں گا۔

// عوام / اشاریہ html
html ng-app = "app">

میں جانتا ہوں کہ مجھے کم از کم ایک کنٹرولر کی ضرورت ہے لہذا میں اسے استعمال کرکے کال کروں گا این جی - کنٹرولر اور اسے ایک پراپرٹی تفویض کرنا مین سی ٹی آر ایل.

باڈی این جی - کنٹرولر = "مین سی ٹی آر ایل" </ باڈی>

لہذا اب ہم نامی ماڈیول کے حصول پر ہیں ایپ اور ایک کنٹرولر نامزد مین سی ٹی آر ایل. آئیے ہم آگے بڑھیں اور انہیں اب تخلیق کریں۔

ماڈیول بنانا کافی سیدھا ہے۔ آپ فون کرکے اس کی وضاحت کریں کونیی.موڈول اور اسے ایک نام دینا۔ مستقبل کے حوالہ کے ل، ، خالی صف کا دوسرا پیرامیٹر وہ ہے جہاں آپ ایپلی کیشن میں استعمال کیلئے سب ماڈیولز انجیکشن کرسکتے ہیں۔ یہ اس ٹیوٹوریل کے دائرہ کار سے باہر ہے ، لیکن جب آپ کی ایپلی کیشن پیچیدگیوں اور ضرورتوں کے مطابق بڑھنے لگتی ہے تو اس کا فائدہ ہوتا ہے۔

// پبلک / جے ایس / کولیب.جے
var اے پی پی = کونیی۔ جدید (’ایپ‘ ، [])؛

ہم اس میں کچھ خالی جگہ داروں کا اعلان کرنے جارہے ہیں ایپ ماڈیول کے ساتھ شروع مین سی ٹی آر ایل نیچےہم بعد میں ان سب کو پر کریں گے لیکن میں شروع سے ہی بنیادی ڈھانچہ کی وضاحت کرنا چاہتا تھا۔

app.controller (’مینکٹرل‘ ، فنکشن ($ دائرہ کار) {})؛

ہم Socket.io فعالیت کو بھی a میں لپیٹنے جا رہے ہیں ساکٹ خدمت تاکہ ہم اس چیز کو گھیر لیں اور اسے عالمی نام کی جگہ پر تیرتا نہ چھوڑیں۔

ایپ.فیکٹری (’ساکٹ‘ ، فنکشن ($ روٹ سکوپ) {})؛

اور جب ہم اس میں موجود ہیں ، ہم ایک ہدایت نامہ جاری کرنے جارہے ہیں چپچپا نوٹ جس میں ہم چپکی نوٹ کی فعالیت کو گنجائش میں استعمال کرنے جا رہے ہیں۔

app.directive (’اسٹکی نوٹ‘ ، فنکشن (ساکٹ) {})؛

تو آئیے ہم نے اب تک کیا کیا ہے اس کا جائزہ لیں۔ ہم نے استعمال کرتے ہوئے ایپلی کیشن کو بوٹسٹریپ کردیا ہے ng-app اور HTML میں ہمارے ایپلی کیشن کنٹرولر کا اعلان کیا۔ ہم نے ایپلی کیشن ماڈیول کی بھی وضاحت کی ہے اور اس کو تشکیل دیا ہے مین سی ٹی آر ایل کنٹرولر ، ساکٹ خدمت اور چپچپا نوٹ ہدایت

09. ایک چپچپا نوٹ بنانا

اب جب کہ ہمارے پاس AngularJS درخواست کا کنکال موجود ہے ، ہم تخلیق کی خصوصیت تیار کرنا شروع کردیں گے۔

app.controller (’مینکٹرل‘ ، فنکشن ($ دائرہ کار ، ساکٹ) {// B.1
$ সুযোগ. نوٹس = []؛ // B.2

// آنے والی
ساکٹ ڈاٹ کام (’onNoteCreated’ ، فنکشن (ڈیٹا) {// B.3
. اسپورٹ.نوٹس.پش (ڈیٹا)؛
});

// سبکدوش ہونے والے
$ اسپورٹ کریٹ نوٹ = فنکشن () {// B.4
var نوٹ = {
ID: نئی تاریخ (). گیٹ ٹائم () ،
عنوان: ’نیا نوٹ‘ ،
باڈی: ’زیر التواء‘
};

. اسپورٹ.نوٹس.پش (نوٹ)؛
ساکٹ ڈاٹ اییمٹ (’تخلیق نوٹ‘ ، نوٹ)؛
};

B.1 AngularJS میں انحصار انجکشن کی خصوصیت موجود ہے لہذا ہم انجکشن لگارہے ہیں . گنجائش اعتراض اور ساکٹ خدمت . گنجائش آبجیکٹ ویو موڈل کے طور پر کام کرتی ہے اور بنیادی طور پر ایک جاوا اسکرپٹ آبجیکٹ ہے جس میں دو ایونٹ ڈیٹا بینڈنگ کو اہل بنانے کے ل some کچھ واقعات میں اس میں بیک کیا گیا ہے۔

B.2 ہم اس صف کا اعلان کر رہے ہیں جس میں ہم قول کو پابند کرنے کے لئے استعمال کریں گے۔

B.3 ہم نے سننے والوں کو شامل کر رہے ہیں onNoteCreated پر واقعہ ساکٹ سروس اور ایونٹ کے بوجھ کو آگے بڑھانا $ اسپورٹ.نوٹس سرنی۔

B.4 ہم نے اعلان کیا ہے تخلیق نوٹ ایک طے شدہ تخلیق کا طریقہ نوٹ اعتراض اور اس میں دھکا $ اسپورٹ.نوٹس سرنی۔ یہ بھی استعمال کرتا ہے ساکٹ خارج کرنے کے لئے خدمت تخلیق نوٹ واقعہ اور پاس نیا نوٹ اعتراض کے ساتھ.

تو اب جب ہمارے پاس نوٹ بنانے کا ایک طریقہ موجود ہے تو ہم اسے کیسے کہتے ہیں؟ یہ ایک اچھا سوال ہے! ایچ ٹی ایم ایل فائل میں ، ہم اینگولر جے ایس ہدایت نامہ کو شامل کرتے ہیں این جی کلک کریں بٹن پر اور پھر شامل کریں تخلیق نوٹ خصوصیت کی قدر کے طور پر طریقہ کال۔

بٹن id = "createButton" ng-click = "createNote ()"> نوٹ بنائیں / بٹن>

ہم نے اب تک کیا کیا ہے اس کے سرسری جائزہ لینے کا وقت۔ ہم نے اس میں ایک صف شامل کی ہے . گنجائش میں اعتراض مین سی ٹی آر ایل جو اطلاق کے لئے تمام نوٹ رکھتا ہے۔ ہم نے بھی شامل کیا ہے a تخلیق نوٹ پر طریقہ . گنجائش ایک نیا مقامی نوٹ بنانے اور پھر دوسرے گاہکوں کو اس نوٹ کو براڈ کاسٹ کرنے کا اعتراض ساکٹ خدمت ہم نے ایک پروگرام سننے والے کو بھی شامل کیا ہے ساکٹ خدمت تاکہ ہم جان سکیں کہ جب دوسرے مؤکلوں نے نوٹ بنائے ہیں تو ہم اسے اپنے مجموعہ میں شامل کرسکیں گے۔

10. چپچپا نوٹ کی نمائش

اب ہمارے پاس نوٹس آبجیکٹ بنانے اور اسے براؤزرز کے مابین بانٹنے کی صلاحیت موجود ہے لیکن ہم اسے اصل میں کیسے ظاہر کریں گے یہیں سے ہدایتیں آتی ہیں۔

ہدایات اور ان کی پیچیدگیاں ایک وسیع مضمون ہے ، لیکن مختصر ورژن یہ ہے کہ وہ عناصر اور خصوصیات کو اپنی مرضی کے مطابق فعالیت کے ساتھ بڑھانے کا ایک طریقہ فراہم کرتے ہیں۔ ہدایات AngularJS کے بارے میں آسانی سے میرا پسندیدہ حصہ ہیں کیونکہ یہ آپ کو HTML میں اپنی درخواست کے ارد گرد ایک پوری DSL (ڈومین مخصوص زبان) بنانے کی اجازت دیتا ہے۔

یہ قدرتی بات ہے کہ چونکہ ہم اپنے تعاون بورڈ کے لئے چپچپا نوٹ بناتے جارہے ہیں کہ ہمیں ایک بنانا چاہئے چپچپا نوٹ ہدایت ہدایت نامے کی وضاحت کسی ایسے ماڈیول پر ہدایت کے طریقہ پر کال کرکے کی جاتی ہے جس پر آپ اس کا اعلان کرنا چاہتے ہو اور کسی نام اور فنکشن میں گزرنا چاہتے ہو جو ہدایت نامہ آبجیکٹ کو لوٹائے۔ ہدایت کی تعریف کی آبجیکٹ میں بہت ساری ممکنہ خصوصیات موجود ہیں جن کی آپ اس پر وضاحت کرسکتے ہیں ، لیکن ہم یہاں اپنے مقاصد کے لئے صرف کچھ استعمال کرنے جارہے ہیں۔

میری سفارش ہے کہ آپ انگولر جے ایس دستاویزات کو چیک کریں تاکہ آپ ان پراپرٹیز کی پوری فہرستوں کو دیکھیں جو آپ ڈائریکٹیو ڈیفینیشن آبجیکٹ پر بیان کرسکتے ہیں۔

app.directive (’اسٹکی نوٹ‘ ، فنکشن (ساکٹ) {
var linker = فنکشن (دائرہ کار ، عنصر ، اٹارس) {}؛

var کنٹرولر = فنکشن ($ دائرہ کار) {}؛

واپسی {
پابندی لگائیں: ’A‘ ، // C.1
لنک: لنکر ، // سی 2
کنٹرولر: کنٹرولر ، // C.3
دائرہ کار: {// C.4
نوٹ: ’=’ ،
آنڈیلیٹ: ’&’
}
};
});

C.1 آپ اپنی ہدایت کو کسی خاص قسم کے HTML عنصر تک محدود کرسکتے ہیں۔ دو سب سے عام عنصر یا وصف ہیں ، جسے آپ استعمال کرتے ہوئے اعلان کرتے ہیں ای اور A بالترتیب آپ اسے کسی CSS کلاس یا کسی تبصرے تک بھی محدود کرسکتے ہیں ، لیکن یہ اتنے عام نہیں ہیں۔

C.2 لنک فنکشن وہ جگہ ہے جہاں آپ اپنے تمام DOM ہیرا پھیری کوڈ ڈالتے ہیں۔ میں نے کچھ استثناءات ہیں جو مجھے پائے ہیں ، لیکن یہ ہمیشہ سچ ہے (کم از کم وقت کا 99 فیصد) یہ انگولر جے ایس کا ایک بنیادی زمینی اصول ہے اور اسی وجہ سے میں نے اس پر زور دیا ہے۔

C.3 کنٹرولر فنکشن بالکل اسی طرح کام کرتا ہے جیسے ہم کنٹرولر کی درخواست کی وضاحت کرتے ہیں . گنجائش ہم جس آبجیکٹ میں گزر رہے ہیں وہ DOM عنصر کے لئے مخصوص ہے جس میں ہدایت جاری ہے۔

C.4 AngularJS الگ تھلگ اسکوپ کا تصور رکھتا ہے ، جو آپ کو واضح طور پر یہ بیان کرنے کی اجازت دیتا ہے کہ ہدایت کا دائرہ بیرونی دنیا کے ساتھ کس طرح مواصلت کرتا ہے۔ اگر ہم نے اسکوپ کا اعلان نہیں کیا ہوتا تو ہدایت والدین کے دائرہ کار سے والدین اور بچے کے تعلقات کے ساتھ وراثت میں مل جاتی۔ بہت سارے معاملات میں یہ زیادہ سے زیادہ نہیں ہے۔ دائرہ کار کو الگ تھلگ کرکے ہم اس امکانات کو کم کرتے ہیں کہ بیرونی دنیا نادانستہ طور پر اور آپ کے ہدایت کی کیفیت پر منفی اثر ڈال سکتی ہے۔

میں نے دو طرفہ ڈیٹا بائنڈنگ کا اعلان کیا ہے نوٹ کے ساتہ = علامت اور اظہار کا پابند ondelete کے ساتہ & علامت براہ کرم الگ تھلگ اسکوپ کی مکمل وضاحت کے لئے انگولر جے ایس دستاویزات پڑھیں کیونکہ یہ فریم ورک میں ایک پیچیدہ مضامین میں سے ایک ہے۔

تو آئیے دراصل ڈوم میں ایک چپچپا نوٹ شامل کریں۔

کسی بھی اچھے فریم ورک کی طرح ، AngularJS کچھ واقعی عمدہ خصوصیات کے ساتھ آتا ہے جو بالکل خانے سے باہر ہے۔ سب سے آسان خصوصیات میں سے ایک ہے این جی - ریپیٹ. یہ AngularJS ہدایت آپ کو اشیاء کی ایک صف میں منتقل کرنے کی اجازت دیتی ہے اور اس میں جو بھی ٹیگ ہوتا ہے اس کو نقل کرتا ہے جتنا کہ صف میں آئٹم ہوتے ہیں۔ نیچے دی گئی صورت میں ، ہم اس پر تکرار کررہے ہیں نوٹ سرنی اور ڈپلیکیٹ تقسیم لمبائی کے لئے عنصر اور اس کے بچوں نوٹ سرنی۔

Div સ્ટીکی نوٹ این جی ریپیٹ = "نوٹ میں نوٹ" نوٹ = "نوٹ" آنڈیلیٹ = "ڈیلیٹ نوٹ (آئی ڈی)">
بٹن کی قسم = "بٹن" این جی - کلک = "ڈیلیٹ نوٹ (نوٹ. ایڈ)"> × / بٹن>
ان پٹ این جی-ماڈل = "نوٹ.title" این جی - چینج = "اپ ڈیٹ نوٹ (نوٹ)" ٹائپ = "ٹیکسٹ">
textarea ng-ماڈل = "نوٹ.body" ng-change = "اپ ڈیٹ نوٹ (نوٹ)"
> {{نوٹ.body}} / textarea>
/ div>

کی خوبصورتی این جی - ریپیٹ یہ ہے کہ آپ جس بھی صف میں داخل ہوں گے اس کا پابند ہے اور ، جب آپ کسی شے کو سرنی میں شامل کرتے ہیں تو ، آپ کا ڈوم عنصر خود بخود اپ ڈیٹ ہوجاتا ہے۔ آپ اس کو مزید ایک قدم اٹھاسکتے ہیں اور نہ صرف معیاری DOM عناصر بلکہ اپنی مرضی کے مطابق دیگر ہدایات بھی دہرا سکتے ہیں۔ اسی لئے آپ دیکھ رہے ہیں چپچپا نوٹ عنصر پر ایک وصف کے طور پر.

کسٹم کوڈ کے دو اور بٹس ہیں جن کو واضح کرنے کی ضرورت ہے۔ ہم نے دائرہ کار کو الگ تھلگ کردیا ہے چپکنے والے نوٹس دو املاک پر ہدایت۔ پہلا ایک پر پابند تعریف الگ تھلگ اسکوپ ہے نوٹ پراپرٹی اس کا مطلب یہ ہے کہ جب بھی نوٹ آبجیکٹ والدین کے دائرہ کار میں تبدیل ہوجاتا ہے ، تو وہ خود بخود اسی طرح کے نوٹ آبجیکٹ کو ہدایت میں اور اس کے برعکس تازہ کاری کرے گا۔ دوسری وضاحت شدہ الگ تھلگ دائرہ کار پر ہے ondelete وصف. اس کا مطلب یہ ہے کہ جب ondelete ہدایت میں کہا جاتا ہے ، وہ جو بھی اظہار ہے اس کو فون کرے گا ondelete ڈوم عنصر سے وابستہ ہے جو ہدایت کو فوری بناتا ہے۔

جب کسی ہدایت کو فوری بنایا جاتا ہے تو اس کو DOM میں شامل کیا جاتا ہے اور لنک فنکشن کہا جاتا ہے۔ عنصر پر کچھ ڈیفالٹ DOM پراپرٹی سیٹ کرنے کا یہ ایک بہترین موقع ہے۔ ہم جس عنصر پیرامیٹر میں سے گزر رہے ہیں وہ دراصل ایک jQuery آبجیکٹ ہے اور لہذا ہم اس پر jQuery آپریشن کرسکتے ہیں۔

(AngularJS دراصل اس میں شامل jQuery کے سب سیٹ کے ساتھ آتا ہے لیکن اگر آپ نے پہلے ہی jQuery کا مکمل ورژن شامل کرلیا ہے تو ، AngularJS اس سے موخر ہوجائے گا۔)

app.directive (’اسٹکی نوٹ‘ ، فنکشن (ساکٹ) {
var linker = فنکشن (دائرہ کار ، عنصر ، اٹارس) {
// اسے بہتر بنانے کے لئے کچھ ڈوم آغاز
عنصر. CSS (’بائیں‘ ، ’10px‘)؛
عنصر.کیس (’’ ٹاپ ‘‘ ، ’’ 50 پکس ‘‘)؛
عنصر ہائڈ (). fadeIn ()؛
};
});

مذکورہ کوڈ میں ہم صرف اسٹیج پر چپچپا نوٹ پوزیشن میں ڈال رہے ہیں اور اس میں دھندلا رہے ہیں۔

11. ایک چپچپا نوٹ کو حذف کرنا

لہذا اب جب ہم ایک چپچپا نوٹ کو شامل اور ظاہر کرسکتے ہیں ، اب وقت آگیا ہے کہ چپچپا نوٹ کو حذف کریں۔ چپچپا نوٹ بنانا اور اسے حذف کرنا صفوں سے ان اشاروں کو شامل کرنے اور حذف کرنے کا معاملہ ہے جو نوٹوں کے پابند ہیں۔ اس صف کو برقرار رکھنا والدین کے دائرہ کار کی ذمہ داری ہے ، یہی وجہ ہے کہ ہم ہدایت کے اندر سے حذف کی درخواست کی ابتدا کرتے ہیں ، لیکن والدین کے دائرہ کار کو اصل بھاری بھرکم کرنے دیں۔

یہی وجہ ہے کہ ہم نے ہدایت پر الگ الگ گنجائش کے اظہار کو پیدا کرنے میں تمام تر پریشانی کا سامنا کیا: لہذا ہدایت کو حذف کرنے والے واقعے کو داخلی طور پر موصول ہوسکے اور پروسیسنگ کے ل its اس کے والدین کے پاس بھیج دیا جاسکے۔

ہدایت کے اندر HTML دیکھیں۔

بٹن کی قسم = "بٹن" این جی - کلک = "ڈیلیٹ نوٹ (نوٹ. ایڈ)"> button / بٹن>

اگلی بات جس کے بارے میں میں سنانے جارہا ہوں شاید اس کی لمبائی بہت دور کی طرح معلوم ہوگی لیکن یاد رکھنا ہم اسی طرف ہیں اور میرے تفصیل کے بعد اس کا مطلب ہوگا۔ جب چپچپا نوٹ کے اوپری دائیں کونے کے بٹن پر کلک کیا جاتا ہے تو ہم کال کر رہے ہیں ڈیلیٹ نوٹ ہدایت کے کنٹرولر اور پاس میں نوٹ.id قدر. پھر کنٹرولر کال کرتا ہے ختم جس کے بعد ہم جس بھی اظہار کو اس تک پہنچاتے ہیں اس پر عمل درآمد ہوتا ہے۔ اب تک اتنا اچھا؟ ہم کنٹرولر پر ایک مقامی طریقہ کو کال کر رہے ہیں جو اس کے بعد الگ تھلگ دائرہ میں جس بھی اظہار کی تعریف کی گئی تھی اسے کال کرکے اسے دور کردیتا ہے۔ وہ اظہار جو والدین سے پکارا جاتا ہے بس پکارا جاتا ہے ڈیلیٹ نوٹ اس کے ساتھ ساتھ.

app.directive (’اسٹکی نوٹ‘ ، فنکشن (ساکٹ) {
var کنٹرولر = فنکشن ($ دائرہ کار)
$ সুযোগ.ڈیلیٹ نوٹ = فنکشن (ID) {
$ اسپورٹ ڈنڈائیلٹ ({
ID: ID
});
};
};

واپسی {
پابندی لگائیں: ’اے‘ ،
لنک: لنکر ،
کنٹرولر: کنٹرولر ،
دائرہ کار: {
نوٹ: ’=’ ،
آنڈیلیٹ: ’&’
}
};
});

(اظہار کی وضاحت سے الگ تھلگ اسکوپ کا استعمال کرتے وقت ، پیرامیٹر کسی آبجیکٹ میپ میں بھیجے جاتے ہیں۔)

والدین کے دائرہ کار میں ، ڈیلیٹ نوٹ کہا جاتا ہے اور اس کا استعمال کرتے ہوئے کافی معیاری حذف ہوجاتا ہے angular.forEach نوٹس سرنی پر اعادہ کرنے کے لئے افادیت کی تقریب. ایک بار جب فنکشن نے اپنے مقامی کاروبار کو سنبھال لیا تو وہ آگے بڑھتی ہے اور پوری دنیا میں اس پروگرام کو اس کے مطابق رد to عمل کے ل. نکلتی ہے۔

app.controller (’مینکٹرل‘ ، فنکشن ($ دائرہ کار ، ساکٹ)
$ সুযোগ. نوٹس = []؛

// آنے والی
ساکٹ ڈاٹ کام (’onNoteDeledted’ ، فنکشن (ڈیٹا) {
$ اسپورٹ ڈیلیٹ نوٹ (ڈیٹا ایڈ)؛
});

// سبکدوش ہونے والے
$ সুযোগ.ڈیلیٹ نوٹ = فنکشن (ID) {
var OldNotes = $કાશ.نوٹس ،
newNotes = []؛

Angular.forEach (پرانے نوٹ ، فنکشن (نوٹ) {
اگر (نوٹ.id! == ID) newNotes.push (نوٹ)؛
});

$ সুযোগ.نوٹس = نئے نوٹ؛
ساکٹ ڈاٹ اییمٹ (’ڈیلیٹ نوٹ‘ ، {ID: id})؛
};
});

12. ایک چپچپا نوٹ کو اپ ڈیٹ کرنا

ہم شاندار ترقی کر رہے ہیں! اب تک میں امید کرتا ہوں کہ آپ اس طوفان آندھی کے دورے سے کچھ نمونوں کو ابھرتے ہوئے دیکھنا شروع کردیں گے جو ہم لے رہے ہیں۔ فہرست میں اگلی آئٹم اپ ڈیٹ کی خصوصیت ہے۔

ہم اصل DOM عناصر سے شروع کرنے جارہے ہیں اور سرور تک پورے راستے پر اس کی پیروی کریں گے اور مؤکل کے پاس واپس جائیں گے۔ پہلے ہمیں یہ جاننے کی ضرورت ہے کہ جب چپچپا نوٹ کا عنوان یا باڈی تبدیل کیا جارہا ہے۔ AngularJS اعداد و شمار کے ماڈل کے ایک حصے کے طور پر عناصر کی تشکیل کرتا ہے تاکہ آپ اسنیپ میں دو طرفہ ڈیٹا بائنڈنگ کو حاصل کرسکیں۔ ایسا کرنے کے لئے این جی ماڈل جس پراپرٹی کو آپ پابند کرنا چاہتے ہیں اسے ہدایت دیں اور رکھیں۔ اس معاملے میں ہم استعمال کرنے جارہے ہیں نوٹ.ٹائٹل اور نوٹ.بائد بالترتیب

جب ان میں سے کوئی بھی خصوصیات تبدیل ہوجائے تو ہم اس معلومات کو ساتھ لے جانے کے ل capture قبضہ کرنا چاہتے ہیں۔ ہم اس کو خدا کے ساتھ پورا کرتے ہیں ng-change ہدایت اور کال کرنے کے لئے اس کا استعمال اپ ڈیٹ نوٹ اور نوٹ اعتراض میں ہی گزریں۔ AngularJS کچھ انتہائی ہوشیار گندا جانچ پڑتال کرتا ہے تاکہ پتہ چل سکے کہ جو کچھ بھی ہے اس کی قیمت ہے این جی ماڈل بدل گیا ہے اور پھر جو اظہار ہے اس پر عمل درآمد کرتا ہے ng-change.

ان پٹ این جی-ماڈل = "نوٹ.title" این جی - چینج = "اپ ڈیٹ نوٹ (نوٹ)" ٹائپ = "ٹیکسٹ">
textarea ng-Model = "note.body" ng-change = "updateNote (نوٹ)"> {{note.body}} / textarea>

استعمال کرنے کا الٹا ng-change یہ ہے کہ مقامی تبدیلی پہلے ہی ہوچکی ہے اور ہم صرف پیغام جاری کرنے کے ذمہ دار ہیں۔ کنٹرولر میں ، اپ ڈیٹ نوٹ کہا جاتا ہے اور وہاں سے ہم باہر نکل رہے ہیں اپ ڈیٹ نوٹ ہمارے سرور کو دوسرے گاہکوں کو براڈکاسٹ کرنے کا پروگرام۔

app.directive (’اسٹکی نوٹ‘ ، فنکشن (ساکٹ) {
var کنٹرولر = فنکشن ($ دائرہ کار)
$ اسپورٹ ڈاٹ نوٹ = فنکشن (نوٹ) {
ساکٹ ڈاٹ اییمٹ (’اپ ڈیٹ نوٹ‘ ، نوٹ)؛
};
};
});

اور ہدایت کار میں ، ہم سن رہے ہیں onNoteUpdated جب دوسرے موکل کی طرف سے نوٹ اپ ڈیٹ ہوتا ہے تو ہم جاننے کے لئے ایونٹ بنائیں تاکہ ہم اپنے مقامی ورژن کو اپ ڈیٹ کرسکیں۔

var کنٹرولر = فنکشن ($ دائرہ کار)
// آنے والی
socket.on (’onNoteUpdated’ ، فنکشن (ڈیٹا) {
// اگر ایک ہی نوٹ
اگر (ڈیٹا ایڈ == $ اسپورٹ ڈاٹ نیٹ)۔ {

$$..note.title = data.title؛
$ সুযোগ.ناٹ.بیڈی = ڈیٹا۔بھڈ؛
}
});
};

13. ایک چپچپا نوٹ منتقل کرنا

اس مقام پر ہم نے بنیادی طور پر سی آر یو ڈی کڈھی پول کے گرد گود لیا ہے اور زندگی اچھی ہے! صرف اپنے دوستوں کو متاثر کرنے کے لئے پارلر کی چال کی خاطر ، ہم اسکرین کے گرد نوٹوں کو منتقل کرنے اور اصلی وقت میں نقاط کو اپ ڈیٹ کرنے کی صلاحیت میں اضافہ کریں گے۔ گھبرائیں نہیں - یہ کوڈ کی چند مزید لائنیں ہیں۔ اس ساری محنت کا خمیازہ بھگتنا ہے۔ میں وعدہ کرتا ہوں!

ہم نے خصوصی مہمان ، jQueryUI ، کو پارٹی میں مدعو کیا ہے ، اور ہم نے یہ سب ڈریگ ایبلز کے ل did کیا۔ مقامی طور پر کسی نوٹ کو گھسیٹنے کی اہلیت میں اضافہ کرنے میں صرف ایک لائن کوڈ لگتا ہے۔ اگر آپ شامل کریں گے عنصر.ڈریگ ایبل ()؛ اپنے لنکر فنکشن میں ، آپ زندہ بچ جانے والے کے ذریعہ ’’ ٹائیگر کی آنکھ ‘‘ سننا شروع کردیں گے کیونکہ اب آپ اپنے نوٹوں کو ادھر ادھر گھسی سکتے ہیں۔

ہم یہ جاننا چاہتے ہیں کہ جب گھسیٹنے کا عمل رک گیا ہے اور ساتھ گزرنے کے لئے نئے نقاط کو گرفت میں لے لیں۔ jQueryUI کچھ بہت ہوشیار لوگوں نے بنایا تھا ، لہذا جب گھسیٹنے سے رک جاتا ہے تو آپ کو بس اسٹاپ ایونٹ کے لئے کال بیک فنکشن کی وضاحت کرنے کی ضرورت ہوتی ہے۔ ہم پکڑو نوٹ.id اسکوپ آبجیکٹ اور بائیں سے اوپر سی ایس ایس قدروں سے دور ui چیز. اس علم کے ساتھ ہم وہ کرتے ہیں جو ہم سب کے ساتھ کرتے آرہے ہیں: خارج!

app.directive (’اسٹکی نوٹ‘ ، فنکشن (ساکٹ) {
var linker = فنکشن (دائرہ کار ، عنصر ، اٹارس) {
عنصر.ڈریگ ایبل ({
اسٹاپ: فنکشن (ایونٹ ، UI) {
ساکٹ ڈاٹ اییمٹ (’اقدام نوٹ‘ ، {
ID: اسپورٹس ڈاٹ ای ڈی ،
x: ui.position.left ،
y: ui.position.top
});
}
});

ساکٹ ڈاٹ این (’آن نوٹٹ مووڈڈ‘ ، فنکشن (ڈیٹا) {
// اگر ایک ہی نوٹ
اگر (ڈیٹا ایڈ == اسپورٹ ڈاٹ ای ڈی) {
عنصر.ایمانیٹ ({
بائیں: ڈیٹا ڈاٹ ایکس ،
سب سے اوپر: data.y
});
}
});
};
});

اس مقام پر یہ حیرت کی بات نہیں ہونی چاہئے کہ ہم ساکٹ سروس سے اقدام سے متعلق پروگرام کی بھی سن رہے ہیں۔ اس معاملے میں یہ ہے onNoteMoved واقعہ اور اگر نوٹ ایک میچ ہے تو ہم بائیں اور ٹاپ سی ایس ایس پراپرٹیز کو اپ ڈیٹ کرتے ہیں۔ بام! ہو گیا!

14. بونس

یہ ایک بونس سیکشن ہے جس میں میں شامل نہیں کروں گا اگر مجھے مکمل اعتماد نہیں تھا کہ آپ اسے 10 منٹ سے بھی کم عرصے میں حاصل کرسکتے ہیں۔ ہم ایک براہ راست سرور پر تعی .ن کرنے جارہے ہیں (میں ابھی بھی حیران ہوں کہ یہ کرنا کتنا آسان ہے)۔

پہلے ، آپ کو مفت نوڈجیتسو آزمائش کے لئے سائن اپ کرنے کی ضرورت ہے۔ مقدمے کی سماعت 30 دن کے لئے مفت ہے ، جو آپ کے پیروں کو گیلے کرنے کے ل. بہترین ہے۔

ایک بار جب آپ اپنا اکاؤنٹ بناتے ہیں تو آپ کو جیتسو پیکیج انسٹال کرنے کی ضرورت ہوتی ہے ، جو آپ کمانڈ لائن سے بھی کرسکتے ہیں $ npm انسٹال jitsu -g.

پھر آپ کو کمانڈ لائن سے لاگ ان ہونے کی ضرورت ہے its جیتسو لاگ ان اور اپنی سندیں داخل کریں۔

یقینی بنائیں کہ آپ براہ راست اپنی ایپ میں ہیں ، ٹائپ کریں its جیتسو تعینات اور سوالات کے ذریعے قدم رکھیں۔ میں عام طور پر زیادہ سے زیادہ ڈیفالٹ پر چھوڑتا ہوں ، جس کا مطلب ہے کہ میں اپنی درخواست کو ایک نام دیتا ہوں لیکن سب ڈومین وغیرہ نہیں۔

اور ، میرے پیارے دوست ، بس اتنا ہی ہے! سرور کے آؤٹ پٹ ہونے سے آپ کو اپنی درخواست کا یو آر ایل ایک بار مل جائے گا اور یہ جانے کے لئے تیار ہوجائے گا۔

15. نتیجہ اخذ کرنا

ہم نے اس آرٹیکل میں بہت زیادہ انگولر جے ایس گراؤنڈ کا احاطہ کیا ہے اور میں امید کرتا ہوں کہ اس عمل میں آپ کو کافی تفریح ​​حاصل ہوگی۔ میرے خیال میں آپ انگولر جے ایس اور ساکٹ ڈاٹ او ای کے ساتھ تقریبا 200 200 لائن کوڈ میں پورا کرسکتے ہیں کہ یہ واقعی صاف ہے۔

کچھ چیزیں ایسی تھیں جن پر میں نے اہم نکات پر توجہ مرکوز کرنے کی خاطر احاطہ نہیں کیا تھا ، لیکن میں آپ کو حوصلہ افزائی کرتا ہوں کہ ماخذ کو کھینچیں اور اطلاق کے ساتھ کھیلیں۔ ہم نے ایک مضبوط فاؤنڈیشن بنائی ہے ، لیکن آپ کے پاس بہت ساری خصوصیات شامل ہیں۔ ہیکنگ حاصل کریں!

لوکاس روئبلک ایک ٹیکنالوجی کا شوق ہے اور وہ ایکول فار میننگ پبلیکیشنز میں ایکگولر جے ایس کی شریک تصنیف کررہا ہے۔ اس کی پسندیدہ چیز یہ ہے کہ وہ نئی ٹیکنالوجی کے بارے میں اتنے ہی پرجوش ہوں۔ وہ فینکس ویب ایپلیکیشن صارف گروپ چلاتا ہے اور اس نے اپنے ساتھی شراکت داروں کے ساتھ جرم میں ایک سے زیادہ ہیکاتھن کی میزبانی کی ہے۔

پسند آیا؟ یہ پڑھیں!

• ایپ بنانے کا طریقہ
• ہمارے پسندیدہ ویب فونٹس۔ اور ان پر ایک پیسہ بھی خرچ نہیں ہوتا ہے
• دریافت کریں کہ اگست کی حقیقت کے لئے آگے کیا ہے
• مفت ٹیکسٹچر ڈاؤن لوڈ کریں: اعلی ریزولوشن اور اب استعمال کے لئے تیار ہے