صفحه همکاری AngularJS با Socket.io

محتوا

• 01. سرور
• 02. استخوان های برهنه
• 03. وابستگی های خود را اعلام کنید
• 04. سیم کشی Socket.io
• 05. موتورهای خود را روشن کنید!
• 06. چند فکر صریح قبل از حرکت
• 07. مشتری
• 08. استخوان های برهنه
• 09. ایجاد یادداشت چسبناک
• 10. نمایش نت های چسبناک
• 11. حذف یک یادداشت مهم
• 12. به روزرسانی یک یادداشت مهم
• 13. انتقال یک یادداشت چسبناک
• 14. پاداش
• 15. نتیجه گیری
• این را دوست داشتید؟ اینها رو بخون!

• دانش مورد نیاز: جاوا اسکریپت متوسط
• نیاز دارد: Node.js ، NPM
• زمان پروژه: 2 ساعت

AngularJS مخصوصاً برای ایجاد برنامه های غنی از سمت مشتری در مرورگر مناسب است و وقتی کمی Socket.io را به مخلوط اضافه می کنید ، همه چیز جالب می شود. در این مقاله ما می خواهیم یک صفحه همکاری در زمان واقعی ایجاد کنیم که از AngularJS برای برنامه سمت مشتری و Socket.io برای به اشتراک گذاشتن وضعیت بین همه سرویس گیرندگان متصل استفاده می کند.

قبل از شروع به کار کمی از خانه داری بپردازیم. من تصور می کنم که شما یک درک اساسی از HTML و JavaScript دارید زیرا من نمی خواهم هر گوشه از کد را پوشش دهم. به عنوان مثال ، من نمی خواهم پرونده های CSS و JavaScript را که در قسمت اصلی HTML قرار داده ام فراخوانی کنم ، زیرا هیچ اطلاعات جدیدی در آنجا وجود ندارد.

همچنین ، من شما را تشویق می کنم کد را از حساب GitHub خود بگیرید تا دنبال کنید. دوست خوب من برایان فورد همچنین دارای یک دانه عالی Socket.io است که برخی از ایده های اصلی خود را بر اساس آن بنا نهادم.

چهار ویژگی اصلی که ما در صفحه همکاری می خواهیم امکان ایجاد یادداشت ، خواندن یادداشت ها ، به روزرسانی یادداشت ، حذف یادداشت و برای سرگرمی ، انتقال یادداشت بر روی صفحه است. بله ، درست است ، ما بر روی ویژگی های استاندارد CRUD تمرکز کرده ایم. من معتقدم که با تمرکز بر روی این ویژگی های اساسی ، ما کد کافی برای ظهور الگوها را پوشش داده ایم تا بتوانید آنها را بگیرید و آنها را در جای دیگر اعمال کنید.

01. سرور

ما ابتدا قصد داریم با سرور Node.js شروع به کار کنیم زیرا این سرویس دهنده به عنوان پایه ای عمل خواهد کرد که ما می خواهیم همه موارد دیگر را بر روی آن بنا کنیم.

ما در حال ساخت یک سرور Node.js با Express و Socket.io هستیم. دلیل استفاده ما از Express این است که مکانیسم خوبی برای راه اندازی یک سرور دارایی ثابت در Node.js فراهم می کند. Express دارای مجموعه ای از ویژگی های بسیار عالی است ، اما در این حالت ، ما قصد داریم از آن برای تقسیم برنامه به طور تمیز بین سرور و سرویس گیرنده استفاده کنیم.

(من با این فرض که Node.js و NPM را نصب کرده اید کار می کنم. با جستجوی سریع Google به شما نشان داده می شود که در صورت عدم نصب چگونه اینها را نصب کنید).

02. استخوان های برهنه

بنابراین برای ساختن استخوان های خالی سرور ، باید دو کار انجام دهیم تا بیدار شوید.

// app.js

// A.1
var express = نیاز ('express') ،
برنامه = بیان ()؛
سرور = نیاز ('http'). createServer (برنامه) ،
io = نیاز ('socket.io'). گوش دادن (سرور)؛

// A.2
app.configure (تابع () {
app.use (express.static (__ dirname + ’/ public’)) ؛
});

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

A.1 ما ماژول های Node.js خود را اعلام و نمونه سازی می کنیم تا بتوانیم از آنها در برنامه خود استفاده کنیم. ما Express را بیان می کنیم ، Express را فوری می کنیم و سپس یک سرور HTTP ایجاد می کنیم و نمونه Express را در آن می فرستیم. و از آنجا ما Socket.io را نمونه سازی می کنیم و به آن می گوییم تا نمونه سرور ما را تحت نظر داشته باشد.

A.2 ما سپس به برنامه Express خود می گوییم که از فهرست عمومی ما برای ارائه پرونده ها استفاده کند.

A.3 ما سرور را راه اندازی می کنیم و به او می گوییم در پورت گوش دهد 1337.

تا کنون بسیار دردناک و سریع بوده است. من معتقدم که کمتر از 10 خط کد وارد شده ایم و در حال حاضر یک سرور کاربردی Node.js داریم. به بعد

03. وابستگی های خود را اعلام کنید

// packages.json
{
"name": "angular-collab-board" ،
"description": "صفحه همکاری AngularJS" ،
"نسخه": "0.0.1-1" ،
"خصوصی": درست است ،
"وابستگی ها": {
"express": "3.x" ،
"socket.io": "0.9.x"
}
}

یکی از بهترین ویژگی های NPM توانایی اعلام وابستگی های شما در یک است packages.json پرونده را نصب کنید و سپس از طریق آنها به طور خودکار نصب کنید npm نصب کنید در خط فرمان

04. سیم کشی Socket.io

ما قبلاً ویژگی های اصلی مورد نظر را در برنامه تعریف کرده ایم و بنابراین باید شنوندگان رویداد Socket.io و یک بسته مناسب برای مدیریت رویداد برای هر عملیات تنظیم کنیم.

در کد زیر متوجه خواهید شد که اساساً پیکربندی شنوندگان رویداد و پاسخ به تماس است. اولین رویداد است ارتباط رویداد ، که ما برای بستن رویدادهای دیگر خود در تعطیلی از آن استفاده می کنیم.

io.sockets.on ('اتصال' ، عملکرد (سوکت) {
socket.on ("createNote" ، تابع (داده))
socket.broadcast.emit ('onNoteCreated'، data)؛
});

socket.on ('updateNote'، تابع (داده))
socket.broadcast.emit ('onNoteUpdated' ، داده)
});

socket.on ("deleteNote" ، تابع (داده))
socket.broadcast.emit ('onNoteDeleted' ، داده)
});

socket.on ('moveNote'، تابع (داده))
socket.broadcast.emit ('onNoteMoved' ، داده)
});
});

از اینجا ما شنوندگان را به اضافه می کنیم ایجاد توجه داشته باشید, به روز رسانی توجه داشته باشید, حذف توجه داشته باشید و moveNote. و در عملکرد پاسخگویی ، ما به سادگی در حال پخش چه اتفاقی افتاده ایم هستیم تا هر مشتری که گوش می دهد از وقوع این رویداد مطلع شود.

چند نکته وجود دارد که باید در مورد عملکردهای برگشت تماس در موارد کنترل کننده رویداد جداگانه ذکر شود. یکی ، اگر می خواهید یک رویداد را به غیر از مشتری که رویدادی را که وارد کرده اید منتشر کرده است ، برای همه ارسال کنید پخش قبل از بیرون ریختن فراخوانی عملکرد ثانیا ، ما به راحتی محموله این رویداد را به افراد علاقه مند منتقل می کنیم تا آنها بتوانند آن را به دلخواه خود پردازش کنند.

05. موتورهای خود را روشن کنید!

اکنون که وابستگی های خود را تعریف کردیم و برنامه Node.js خود را با استفاده از قدرت های Express و Socket.io راه اندازی کردیم ، تنظیم اولیه سرور Node.js کاملاً ساده است.

ابتدا وابستگی های Node.js خود را نصب می کنید:

npm نصب کنید

و سپس سرور را اینگونه شروع می کنید:

node app.js

و بعد! در مرورگر خود به این آدرس می روید. بام

06. چند فکر صریح قبل از حرکت

من در درجه اول یک توسعه دهنده frontend هستم و در ابتدا با اتصال سرور Node.js به برنامه خود کمی ترسیدم. قسمت AngularJS جاوا اسکریپت سریع اما سمت سرور بود؟ از یک حرکت وحشتناک ، موسیقی مهیج را در صف بکشید.

اما کاملاً جا افتاده بود و کشف کردم که می توانم فقط در چند خط کد یک وب سرور ثابت راه اندازی کنم و در چند خط دیگر از Socket.io برای مدیریت تمام وقایع بین مرورگرها استفاده کنم. و هنوز فقط جاوا اسکریپت بود! به خاطر به موقع بودن ، ما فقط چند ویژگی را پوشش می دهیم ، اما امیدوارم که در پایان مقاله مشاهده کنید که شنا کردن آن آسان است - و انتهای عمق استخر خیلی ترسناک نیست.

07. مشتری

اکنون که پایه و اساس محکم خود را با سرور خود فراهم کرده ایم ، اجازه دهید به قسمت مورد علاقه من - مشتری برویم! ما قصد داریم از AngularJS ، jQueryUI برای قسمت قابل کشیدن و Twitter Bootstrap برای یک سبک استفاده کنیم.

08. استخوان های برهنه

به عنوان یک اولویت شخصی ، هنگامی که من یک برنامه AngularJS جدید را شروع می کنم دوست دارم به سرعت حداقل موردی را که می دانم برای شروع به کار می خواهم تعریف کنم و سپس تکرار آن را در اسرع وقت شروع کنم.

هر برنامه AngularJS باید حداقل با یک کنترل کننده بوت استرپ شود و بنابراین من همیشه این کار را شروع می کنم.

برای راه اندازی خودکار برنامه ، باید به سادگی اضافه کنید ng-app به گره HTML که می خواهید برنامه در آن زندگی کند. بیشتر اوقات ، افزودن آن به برچسب HTML کاملاً قابل قبول است. من همچنین یک ویژگی به اضافه کرده ام ng-app به آن بگویم که من می خواهم از برنامه ماژول ، که من فقط در یک لحظه تعریف می کنم.

// 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' ، عملکرد ($ دامنه) {})؛

ما همچنین می خواهیم قابلیت Socket.io را در یک بسته بندی کنیم سوکت سرویس به این ترتیب می توانیم آن شی را کپسوله کنیم و آن را در فضای نام جهانی نگذاریم.

app.factory ('socket'، function ($ rootScope) {})؛

و در حالی که در این کار هستیم ، می خواهیم بخشنامه ای به نام چسبنده که ما می خواهیم برای محصور کردن عملکرد یادداشت های مهم در آن استفاده کنیم.

app.directive ('stickyNote' ، عملکرد (سوکت) {})؛

بنابراین اجازه دهید آنچه را که تاکنون انجام داده ایم مرور کنیم. ما با استفاده از برنامه را راه اندازی کردیم ng-app و کنترل کننده برنامه ما را در HTML اعلام کرد. ما همچنین ماژول برنامه را تعریف کرده و آن را ایجاد کرده ایم MainCtrl کنترل کننده ، سوکت خدمات و چسبنده بخشنامه

09. ایجاد یادداشت چسبناک

اکنون که اسکلت برنامه AngularJS را در محل خود داریم ، ساخت ویژگی ایجاد را شروع خواهیم کرد.

app.controller ('MainCtrl' ، تابع ($ دامنه ، سوکت) {// B.1
$ scope.notes = []؛ // B.2

// ورودی
socket.on ('onNoteCreated'، تابع (داده) {// B.3
$ scope.notes.push (data)؛
});

// برونگرا
$ fush.createNote = تابع () {// B.4
var note = {
شناسه: تاریخ جدید (). getTime () ،
عنوان: "یادداشت جدید" ،
بدن: 'در انتظار'
};

$ scope.notes.push (یادداشت)؛
socket.emit ('ایجادNote ، یادداشت)؛
};

B.1 AngularJS یک ویژگی تزریق وابستگی در آن تعبیه شده است بنابراین ما در حال تزریق a هستیم دامنه $ شی و سوکت سرویس. دامنه $ شی به عنوان ViewModel عمل می کند و اساساً یک شی object JavaScript است که برخی از رویدادها را در آن پخته است تا ایجاد پایگاه داده دو طرفه را انجام دهد.

B.2 ما در حال اعلام آرایه ای هستیم که از آن برای اتصال دید به آن استفاده خواهیم کرد.

B.3 ما در حال اضافه کردن یک شنونده برای onNoteCreated رویداد در سوکت سرویس و فشار دادن محموله رویداد به دامنه $. یادداشت ها آرایه.

B.4 ما اعلام کرده ایم ایجاد توجه داشته باشید روشی که پیش فرض ایجاد می کند توجه داشته باشید شی و آن را به داخل هل می دهد دامنه $. یادداشت ها آرایه. همچنین از سوکت خدمات برای انتشار ایجاد توجه داشته باشید رویداد و عبور یادداشت جدید شی در امتداد.

بنابراین اکنون که روشی برای ایجاد یادداشت در اختیار داریم ، چگونه آن را بنامیم؟ سوال خوبیست! در پرونده HTML ، دستورالعمل داخلی AngularJS را اضافه می کنیم ng-کلیک کنید را فشار دهید و سپس دکمه را اضافه کنید ایجاد توجه داشته باشید فراخوانی روش به عنوان مقدار ویژگی

دکمه id = "createButton" ng-click = "createNote ()"> ایجاد یادداشت / دکمه>

زمان بررسی سریع کارهایی که تاکنون انجام داده ایم. ما یک آرایه به آن اضافه کرده ایم دامنه $ شی در MainCtrl که قرار است تمام یادداشت های برنامه را در خود نگه دارد. ما همچنین اضافه شده است ایجاد توجه داشته باشید روش در دامنه $ هدف ایجاد یک یادداشت محلی جدید و سپس پخش آن یادداشت برای سایر مشتریان از طریق سوکت سرویس. ما همچنین یک شنونده رویداد را به سایت اضافه کرده ایم سوکت خدمات ، بنابراین ما می توانیم بفهمیم که مشتریان دیگر چه وقت یادداشتی ایجاد کرده اند ، بنابراین می توانیم آن را به مجموعه خود اضافه کنیم.

10. نمایش نت های چسبناک

اکنون ما توانایی ایجاد شی object یادداشت و به اشتراک گذاری آن را بین مرورگرها داریم اما چگونه واقعاً آن را نمایش دهیم؟ این همان جایی است که بخشنامه ها وارد می شوند.

دستورالعمل ها و پیچیدگی های آنها موضوع گسترده ای است ، اما نسخه کوتاه این است که آنها راهی برای گسترش عناصر و ویژگی ها با عملکرد سفارشی ارائه می دهند. بخشنامه ها به راحتی قسمت مورد علاقه من در مورد AngularJS هستند زیرا به شما اجازه می دهد اساساً یک کل DSL (زبان خاص دامنه) را در اطراف برنامه خود در HTML ایجاد کنید.

طبیعی است که از آنجا که ما قصد داریم یادداشت های مهم برای هیئت همکاری خود ایجاد کنیم که باید ایجاد کنیم چسبنده بخشنامه دستورالعمل ها با فراخوانی روش directive روی ماژولی که می خواهید آن را اعلان کنید و انتقال به نام و تابعی که یک شی تعریف دایرکتوری را برمی گرداند ، تعریف می شوند. هدف تعریف دستورالعمل دارای بسیاری از ویژگی های ممکن است که می توانید روی آن تعریف کنید ، اما ما در اینجا فقط چند مورد را برای اهداف خود استفاده خواهیم کرد.

من توصیه می کنم مستندات AngularJS را بررسی کنید تا لیست کاملی از خصوصیاتی را که می توانید در مورد تعریف دستورالعمل تعریف کنید ، مشاهده کنید.

app.directive ('stickyNote' ، عملکرد (سوکت) {
var linker = تابع (دامنه ، عنصر ، نشانگرها) {}؛

کنترل کننده var = عملکرد ($ دامنه) {}؛

برگشت {
محدود کردن: 'A' ، // C.1
پیوند: پیوند دهنده ، // C.2
کنترل کننده: کنترل کننده ، // C.3
دامنه: {// C.4
توجه داشته باشید: '=' ،
ondelete: '&'
}
};
});

C.1 می توانید دستورالعمل خود را به نوع خاصی از عناصر HTML محدود کنید. دو رایج ترین عنصر یا ویژگی است که شما با استفاده از آن اعلام می کنید E و آ به ترتیب. همچنین می توانید آن را به یک کلاس CSS یا یک نظر محدود کنید ، اما این موارد معمول نیستند.

C.2 عملکرد پیوند جایی است که شما تمام کد دستکاری DOM خود را قرار می دهید. چند مورد استثنا وجود دارد که من پیدا کردم ، اما این همیشه درست است (حداقل 99 درصد از اوقات). این یک قانون اساسی اساسی AngularJS است و به همین دلیل من بر آن تأکید کرده ام.

C.3 عملکرد کنترل کننده دقیقاً مانند کنترل کننده اصلی که برای برنامه تعریف کرده ایم عمل می کند دامنه $ شیئی که ما در حال عبور از آن هستیم مخصوص عنصر DOM است که این دستورالعمل در آن زندگی می کند

C.4 AngularJS مفهومی از محدوده جداگانه دارد ، که به شما امکان می دهد نحوه ارتباط دامنه یک دستورالعمل با جهان خارج را به صراحت تعریف کنید. اگر دامنه را اعلام نکرده بودیم ، این بخشنامه به طور ضمنی از رابطه والدین و فرزند از دامنه والدین به ارث می رسید. در بسیاری از موارد این امر مطلوب نیست. با منزوی کردن دامنه ، شانس اینکه جهان خارج بتواند سهوا و تأثیر منفی بر وضعیت بخشنامه شما بگذارد را کاهش می دهیم.

من داده های دو طرفه را الزام آور اعلام کرده ام توجه داشته باشید با = نماد و عبارتی که به آن الزام آور است حذف مجدد با & سمبل. لطفاً اسناد AngularJS را برای توضیح کامل دامنه جداگانه بخوانید زیرا یکی از موضوعات پیچیده تر در چارچوب است.

بنابراین بیایید در واقع یک یادداشت مهم به DOM اضافه کنیم.

مانند هر چارچوب خوب ، AngularJS از ویژگی های بسیار خوبی خارج از جعبه برخوردار است. یکی از مفیدترین ویژگی ها است ng-تکرار. این دستورالعمل AngularJS به شما اجازه می دهد تا آرایه ای از اشیا را رد کنید و هر برچسب موجود را به تعداد موارد موجود در آرایه کپی می کند. در حالت زیر ، ما در حال تکرار بیش از یادداشت آرایه و کپی کردن تقسیم عنصر و فرزندان آن برای طول یادداشت آرایه.

div sticky-note ng-repeat = "یادداشت در یادداشت ها" note = "note" ondelete = "deleteNote (id)">
نوع دکمه = "دکمه" ng-click = "deleteNote (note.id)"> × / دکمه>
ورودی ng-model = "note.title" ng-change = "updateNote (توجه)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (توجه)"
> {{note.body}} / textarea>
/ div>

زیبایی ng-تکرار این است که به هر آرایه ای که منتقل می کنید الزام آور است و هنگامی که یک مورد را به آرایه اضافه می کنید ، عنصر DOM شما به طور خودکار به روز می شود. می توانید این مرحله را یک گام جلوتر بردارید و نه تنها عناصر استاندارد DOM بلکه سایر دستورالعمل های سفارشی را نیز تکرار کنید. به همین دلیل است که می بینید چسبناک به عنوان یک ویژگی در عنصر.

دو بیت دیگر از کد سفارشی وجود دارد که باید روشن شوند. ما دامنه را در یادداشت های چسبناک بخشنامه دو ویژگی اولین مورد محدوده جدا شده تعریف شده در است توجه داشته باشید ویژگی. این بدان معناست که هرگاه شی توجه داشته باشید در دامنه اصلی تغییر کند ، به طور خودکار شی یادداشت مربوطه را در بخشنامه به روز می کند و بالعکس. دامنه منزوی دیگر تعریف شده در حذف مجدد صفت. معنی این این است که چه زمانی حذف مجدد در این دستورالعمل فراخوانی می شود ، هر عبارت موجود در آن را فراخوانی می کند حذف مجدد ویژگی روی عنصر DOM که دستورالعمل را ایجاد می کند.

وقتی یک دستورالعمل نمونه سازی می شود ، به DOM اضافه می شود و عملکرد پیوند فراخوانی می شود. این یک فرصت مناسب برای تنظیم برخی از خصوصیات DOM پیش فرض روی عنصر است. پارامتر عنصری که از آن عبور می کنیم در واقع یک شی j jQuery است و بنابراین می توانیم عملیات جی کوئری را روی آن انجام دهیم.

(AngularJS در واقع با زیرمجموعه ای از jQuery در آن قرار دارد اما اگر نسخه کامل jQuery را قبلاً درج کرده باشید ، AngularJS به این کار موکول می شود.)

app.directive ('stickyNote' ، عملکرد (سوکت) {
var linker = تابع (دامنه ، عنصر ، نشانگرها) {
// مقداری شروع DOM برای خوب کردن آن
element.css ('چپ' ، '10 پیکسل')؛
element.css ('top'، '50px')؛
element.hide (). fadeIn ()؛
};
});

در کد بالا ما به سادگی نت چسبنده را روی صحنه قرار می دهیم و آن را محو می کنیم.

11. حذف یک یادداشت مهم

بنابراین اکنون که می توانیم یک یادداشت مهم را اضافه و نمایش دهیم ، زمان آن رسیده است که یادداشت های مهم را حذف کنیم. ایجاد و حذف یادداشت های مهم باعث افزودن و حذف مواردی از آرایه ای می شود که نت ها ملزم به آن هستند. این مسئولیت دامنه والد است که آن آرایه را حفظ کند ، به همین دلیل ما درخواست حذف را از این دستورالعمل تهیه می کنیم ، اما اجازه می دهیم دامنه اصلی عمل سنگین سازی را انجام دهد.

به همین دلیل ما در ایجاد دامنه جدا شده تعریف شده بر روی بخشنامه تمام مشکلات را از سر گذرانده ایم: بنابراین این دستورالعمل می تواند رویداد حذف را به صورت داخلی دریافت کند و برای پردازش به والدین خود منتقل کند.

به HTML داخل دستورالعمل توجه کنید.

نوع دکمه = "دکمه" ng-click = "deleteNote (note.id)"> × / دکمه>

نکته بعدی که می خواهم بگویم ممکن است مسیری طولانی به نظر برسد اما به یاد داشته باشید که ما در یک طرف هستیم و بعد از توضیح بیشتر منطقی خواهد بود. وقتی دکمه گوشه سمت راست بالای یادداشت مهم را کلیک می کنیم ، ما تماس می گیریم حذف توجه داشته باشید در کنترل کننده این دستورالعمل و عبور از توجه داشته باشید مقدار. سپس کنترل کننده تماس می گیرد حذف مجدد ، که سپس هر عبارتی را که به آن وصل کردیم ، اجرا می کند. تا کنون خیلی خوب؟ ما در حال فراخوانی یک متد محلی بر روی کنترل کننده هستیم که سپس آنرا با فراخوانی هر عبارتی که در محدوده جدا شده تعریف شده است ، تحویل می دهد. عبارتی که به والدین فراخوانده می شود ، اتفاقاً فراخوانی می شود حذف توجه داشته باشید همچنین.

app.directive ('stickyNote' ، عملکرد (سوکت) {
کنترل کننده var = عملکرد ($ دامنه) {
$ scope.deleteNote = عملکرد (شناسه) {
$ fush.ondelete ({
من کردم
});
};
};

برگشت {
محدود کردن: "A" ،
پیوند: پیوند دهنده ،
کنترل کننده: کنترل کننده ،
محدوده: {
توجه داشته باشید: '=' ،
ondelete: '&'
}
};
});

(هنگام استفاده از دامنه جدا شده با تعریف ، پارامترها در نقشه شی ارسال می شوند.)

در محدوده والدین ، حذف توجه داشته باشید فراخوانی می شود و با استفاده از زاویه دار برای هر تابع ابزار برای تکرار در آرایه یادداشت ها. هنگامی که این عملکرد به مشاغل محلی خود پرداخت ، کار خود را ادامه داده و رویدادی را برای بقیه جهان منتشر می کند تا به آن واکنش نشان دهند.

app.controller ('MainCtrl' ، عملکرد ($ range ، سوکت) {
$ scope.notes = []؛

// ورودی
socket.on ('onNoteDeleted'، تابع (داده) {
$ scope.deleteNote (data.id)؛
});

// برونگرا
$ scope.deleteNote = عملکرد (شناسه) {
var oldNotes = $ fush.notes ،
newNotes = []؛

angular.forEach (oldNotes ، تابع (یادداشت) {
if (note.id! == شناسه) newNotes.push (یادداشت)؛
});

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

12. به روزرسانی یک یادداشت مهم

ما در حال پیشرفت خارق العاده هستیم! اکنون امیدوارم که شما شروع به دیدن برخی الگوها از این تور گردباد که می کنیم ، کنیم. مورد بعدی در لیست ویژگی بروزرسانی است.

ما می خواهیم از عناصر واقعی DOM شروع کنیم و آن را تا سرور دنبال کنیم و برای مشتری بازگردیم. ابتدا باید بدانیم که چه زمانی عنوان یا بدنه یادداشت مهم تغییر می کند. AngularJS عناصر فرم را به عنوان بخشی از مدل داده در نظر می گیرد ، بنابراین می توانید اتصال داده دو طرفه را در یک ضربه محکم وصل کنید. برای انجام این کار از ng-model دستورالعمل را وارد کنید و ملکی را که می خواهید به آن ملزم شوید قرار دهید. در این مورد ما می خواهیم استفاده کنیم یادداشت. عنوان و توجه داشته باشید. بدن به ترتیب.

هنگامی که هر یک از این خصوصیات تغییر می کند ، می خواهیم آن اطلاعات را ضبط کنیم. ما این کار را با ng-change بخشنامه و از آن برای تماس استفاده کنید به روز رسانی توجه داشته باشید و از خود شی یادداشت عبور کنید. AngularJS یک بررسی کثیف بسیار هوشمندانه انجام می دهد تا ارزش هر چیزی را بررسی کند ng-model تغییر کرده است و سپس عبارتی را که در آن است اجرا می کند ng-change.

input ng-model = "note.title" ng-change = "updateNote (توجه)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (توجه)"> {{note.body}} / textarea>

وجه استفاده از ng-change این است که تحول محلی قبلاً اتفاق افتاده است و ما فقط مسئول پخش مجدد پیام هستیم. در کنترل کننده ، به روز رسانی توجه داشته باشید فراخوانی می شود و از آنجا ما قصد داریم به روز رسانی توجه داشته باشید رویدادی که سرور ما برای سایر سرویس گیرندگان پخش می کند.

app.directive ('stickyNote' ، عملکرد (سوکت) {
کنترل کننده var = عملکرد ($ دامنه) {
$ scope.updateNote = تابع (توجه) {
socket.emit ('updateNote' ، یادداشت)؛
};
};
});

و در کنترل کننده راهنما ، ما در حال گوش دادن به onNoteUpdated رویداد را بدانید که یادداشت مشتری دیگر چه زمانی به روز شده است تا بتوانیم نسخه محلی خود را به روز کنیم.

کنترل کننده var = عملکرد ($ دامنه) {
// ورودی
socket.on ("onNoteUpdated" ، تابع (داده))
// اگر همان یادداشت را به روز کنید
if (data.id == $ fush.note.id) {

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

13. انتقال یک یادداشت چسبناک

در این مرحله ما اساساً یک دور دور استخر بچه گانه CRUD انجام داده ایم و زندگی خوب است! فقط بخاطر یک ترفند مجازی برای تحت تأثیر قرار دادن دوستان خود ، ما می خواهیم توانایی حرکت یادداشت ها در صفحه و به روزرسانی مختصات را به صورت واقعی اضافه کنیم. وحشت نکنید - این فقط چند خط کد دیگر است. تمام این سخت کوشی ها نتیجه می دهد. قول میدهم!

ما میهمان ویژه ، jQueryUI را به مهمانی دعوت کرده ایم و همه کارها را برای کارهای قابل حمل انجام داده ایم. افزودن قابلیت کشیدن یادداشت به صورت محلی فقط به یک خط کد نیاز دارد. اگر اضافه کنید element.draggable ()؛ به عملکرد پیوند دهنده خود خواهید شنید "Eye of the Tiger" توسط Survivor زیرا اکنون می توانید یادداشت های خود را به اطراف بکشید.

ما می خواهیم بدانیم چه زمانی کشیدن متوقف شده و مختصات جدید را برای عبور از آن ضبط می کنیم. jQueryUI توسط افراد بسیار باهوشی ساخته شده است ، بنابراین هنگامی که کشیدن متوقف می شود شما به سادگی باید یک تابع فراخوانی را برای رویداد توقف تعریف کنید. ما چنگ می زنیم توجه داشته باشید مقادیر CSS سمت چپ و بالا را از ui هدف - شی. با این دانش ما همان کاری را می کنیم که در تمام مدت انجام داده ایم: انتشار دهید!

app.directive ('stickyNote' ، عملکرد (سوکت) {
var linker = تابع (دامنه ، عنصر ، نشانگرها) {
element.draggable ({
توقف: تابع (رویداد ، رابط کاربری) {
socket.emit ('moveNote' ، {
شناسه: range.note.id ،
x: ui.position.left ،
y: ui.position.top
});
}
});

socket.on ('onNoteMoved'، تابع (داده))
// اگر همان یادداشت را به روز کنید
if (data.id == range.note.id) {
element.animate ({
سمت چپ: data.x ،
بالا: data.y
});
}
});
};
});

در این مرحله تعجب آور نیست که ما در حال گوش دادن به یک رویداد مربوط به حرکت از سرویس سوکت هستیم. در این حالت onNoteMoving اگر یادداشت مطابقت داشته باشد ، خصوصیات CSS سمت چپ و بالا را به روز می کنیم. بام انجام شده!

14. پاداش

اگر اطمینان کامل نداشته باشم که می توانید در کمتر از 10 دقیقه به آن برسید ، این یک بخش پاداش است که من آن را نمی گنجانم. ما می خواهیم در یک سرور مستقیم مستقر شویم (من هنوز از آسان بودن کار آن متعجب هستم).

ابتدا باید در یک دوره آزمایشی رایگان نودژیتسو ثبت نام کنید. دوره آزمایشی به مدت 30 روز رایگان است ، که به دلیل خیس شدن پاها بسیار مناسب است.

پس از ایجاد حساب کاربری خود ، باید بسته jitsu را نصب کنید ، این کار را می توانید از طریق خط فرمان انجام دهید $ npm نصب jitsu -g.

سپس باید از طریق خط فرمان وارد شوید ورود به سیستم jitsu $ و مدارک خود را وارد کنید.

مطمئن شوید که مستقیماً در برنامه خود هستید ، تایپ کنید $ jitsu استقرار و س throughالات را گام بردارید. من معمولاً تا حد ممکن پیش فرض را ترک می کنم ، این بدان معناست که من به برنامه خود یک نام می دهم اما یک زیر دامنه و غیره

و دوستان عزیزم ، این تنها چیزی است که در آن وجود دارد! پس از استقرار و آماده شدن سرور ، URL آن را از خروجی سرور دریافت خواهید کرد.

15. نتیجه گیری

ما در این مقاله بسیاری از زمینه های AngularJS را مورد بررسی قرار داده ایم و امیدوارم که در این کار لذت زیادی برده باشید. من فکر می کنم این چیزی است که می توانید با AngularJS و Socket.io در حدود 200 خط کد انجام دهید ، بسیار زیبا است.

چند نکته وجود داشت که من به خاطر تمرکز روی نکات اصلی آنها را پوشش ندادم ، اما من شما را تشویق می کنم که منبع را پایین آورده و با برنامه بازی کنید. ما یک پایه محکم ساخته ایم ، اما هنوز ویژگی های زیادی وجود دارد که می توانید اضافه کنید. هک شوید!

Lukas Ruebbelke یکی از علاقه مندان به فناوری است و از نویسندگان AngularJS در اقدام برای انتشارات Manning است. کار مورد علاقه او این است که مردم را به اندازه خودش از فناوری جدید هیجان زده کند. وی گروه کاربری وب برنامه Phoenix را اداره می کند و چندین همکار با همکاران خود در زمینه جرم را میزبانی کرده است.

این را دوست داشتید؟ اینها رو بخون!

• نحوه ساخت برنامه
• فونت های وب مورد علاقه ما - و هزینه آنها یک پنی هم نیست
• موارد بعدی را برای واقعیت افزوده کشف کنید
• بافت های رایگان را بارگیری کنید: وضوح بالا و اکنون آماده استفاده است