یادگیری AngularJS با مثال – ساخت سیستم CRUD ساده

یادگیری AngularJS با مثال – ساخت سیستم CRUD ساده

در قسمت اول و دوم با بخش های مهمی از AngularJS آشنا شدیم که می توانیم با استفاده از آنها برنامه های ساده آنگولار گوناگون درست کنیم. همانطور که در قسمت قبل اشاره شد، قرار است یک سیستم CRUD ساده ایجاد کنیم. همانطور که می دانیم CRUD مخفف (CREATE-READ-UPDATE-DELETE) است. بهترین مثال برای CURD، سیستم مدیریت محتوا مثل WordPress است. (البته قصد نداریم سیستمی مثل وردپرس درست کنیم).

در این آموزش قصد داریم یک سیستم CRUD داشته باشیم که کاربر بتواند از طریق فیلد ها وارد (CREATE)، اطلاعات ذخیره شده را مشاهده کند (READ)، اطلاعات را ویرایش کند (UPDATE) و بتواند داده ها را حذف کند (DELETE). همچنین کاربر می تواند با استفاده از یک فیلد ورودی در داده ها جستجو کند. توجه داشته باشید که در این مثال برای ذخیره اطلاعات از دیتابیس استفاده نمی کنیم و تنها داده ها را در یک شیء جاوا اسکریپت ذخیره می کنیم.

 

  [fa type=”globe”] دمو

 

حالا که با سناریو برنامه آشنا شدیم، اجازه دهید به کدهای آن نگاهی بیندازیم.

Controller و View برنامه را بصورت زیر وارد کنید تا در ادامه آنها را توضیح دهم:

controller

view

در قسمت قبل با تعریف controller در آنگولار آشنا شدیم، پس نیازی به توضیح ندارد. در این مثال ما کنترولری با نام myCtrl تعریف کرده ایم. در داخل آن آرایه ای به نام list تعریف کرده ایم که داده های پیشفرض ما را در قالب شیء نگهداری می کند. (در این مثال نیازی به استفاده از دیتابیس خاصی نداریم، بعدها می توانید از NoSQLهایی مثل MongoDB استفاده کنید).

READ

در قسمت قبل با ng-repeat آشنا شدیم، بله درست حدس زدید، با استفاده از ng-repeat می خواهیم رکورهایی که در list قرار دارد را در view نمایش دهیم:

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

از آنجایی که سیستم ما قابلیت جستجو کردن از طریق فیلد ورودی را دارد، نیاز است قسمت هایی از کد را بیشتر توضیح دهم.

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

CREATE

در ادامه ما تابع addItem را تعریف کرده ایم که شامل پارامتر item است، همانطور که حدس زده این این متد وظیفه اضافه کردن اطلاعات با استفاده از متد معروف push به آرایه list را بر عهده دارد. متد addItem وقتی فراخوانی می شود که کاربر اطلاعات خود را در فیلد های Name و Year وارد کرده است و بر روی دکمه ADD کلیک کرده. وقتی بر روی دکمه ADD کلیک می کند شیء editedItem را به عنوان پارامتر به تابع addItem منتقل می کند. شیء editedItem شامل متغیرهای name و year است که اطلاعات ورودی کاربر را نگهداری می کند.

UPDATE

همانطور که توجه کرده اید، هر رکورد شامل لینک Edit است که کاربر با کلیک بر روی آن می تواند رکورد را ویرایش کند و با کلیک بر روی دکمه SAVE تغییرات را ذخیره کند.

ما ابتدا یک شیء موقتی editedItem تعریف کرده ایم که اطلاعات (name,year) با کلیک بر روی هر لینک Edit رکورد را در خود بصورت موقتی نگه می دارد. از این شیء موقتی برای قرار دادن داده های آن در ورودی های زیر استفاده می کنیم تا کاربر آنها را ویرایش کند:

برای تست، بر روی Edit هر رکورد دلخواه کلیک کنید و داده ها را ویرایش کند و در آخر بر روی Save کلیک کنید تا تغییرات احساس شود.

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

DELETE

حال نوبت آن است قابلیت حذف رکورد را به مینی برنامه خود اظافه کنیم. این کار بسیار آسان است، از تابع زیر استفاده می کنیم:

در اینجا موقعیت رکورد را با استفاده از متد جاوا اسکریپت indexOf پیدا کرده و در متغیر index قرار می دهیم تا بتوانیم به سادگی با متد splice رکورد مورد نظر را حذف کنیم.

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