ساخت یک سبد خرید ساده با AngularJS

ساخت یک سبد خرید ساده با AngularJS

در این آموزش می خواهیم با هم یک سبد خرید ساده با استفاده از AngularJS درست کنیم. این آموزش بیشتر بر روی دستوردهنده های (directives) آنگولار تمرکز دارد. دستور دهنده های آنگولار بخشی از هسته AngularJS هستند.

 

طراحی سبد صفحه

 

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

 

برای شروع ابتدا یک فایل با نام index.html درست کنید. حال بوت استراپ را دانلود و آن را در صفحه خود قرار دهید:

 

 

حال درون .container یک div با کلاس .row ایجاد کنید:

 

 

در صفحه index.html ما دو ستون داریم. یکی، لیستی از اقلام را با قیمت و ستون دوم قیمت کل اقلام انتخاب شده را نشان می دهد. پس بیایید این دو ستون را ایجاد کنیم، توجه داشته باشید که ستون های زیر را در .row قرار دهید:

 

 

حال اجازه دهید در ستون اول آیتم ها و گزینه های انتخابی را اضافه کنیم:

 

 

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

 

 

تغییرات را ذخیره کنید و فایل index.html را در مرورگر مشاهده کنید، خروجی مثل زیر است:

 

shopping-cart-angularjs

ایجاد یک برنامه سبد خرید

ایجاد یک سرور Node

 

درحالی که می خواهیم برنامه AngularJS خود را درست کنیم، ما باید از دستوردهنده های ngView برای تغییر نماها یا view خود استفاده کنیم. بنابراین نیاز داریم که برنامه AngularJS را با یک سرور اجرا کنیم.  از این رو از سرور Node.js استفاده می کنیم.

 

ابتدا داخل دایرکتوری خود فایلی به نام server.js ایجاد کنید. ما در این مورد از Express برای رندر صفحات استفاده می کنیم، پس با استفاده از NPM، ماژول express را نصب کنید. توجه داشته باشید که برنامه NodeJS را نصب کرده باشید، البته نیازی به نصب npm بصورت جداگانه نیست چون همراه با Node نصب می شود:

 

 

پس از نصب خروجی به صورت زیر خواهد بود:

 

 

هنگامی که express را نصب کردید، فایل server.js را باز کرده و ماژول express را با دستور require به برنامه خود اصافه کنید و یک app ایجاد کنید:

 

 

ما قصد داریم فایل های AngularJS را در پوشه جداگانه به نام public نگهداری کنیم. برای این کار پوشه public را در دایرکتوری پروژه خود ایجاد کنید. حال در فایل server.js آدرس /public و /node_modules را تعریف کنید:

 

 

در مرحله بعدی، برنامه خود را در یک آدرس پورت محلی متصل می کنیم:

 

 

حال با استفاده از دستور زیر سرور Node.js را اجرا می کنیم، و خروجی مبنی بر اجرا شدن سرور در کنسول خود مشاهده خواهید کرد:

 

 

اما همانطور که خروجی را در آدرس http://localhost:3000 خود مشاهده می کنید، خطای Cannot GET / به ما نشان می دهد، به این دلیل است که ما هیچ مسیر یا route تعریف نکرده ایم.

 

توجه داشته باشید که در هر بار تغییر در کدهای خود می بایست سرور Node.js خود را خاموش و از نو اجرا کنید، برای این کار ابتدا Ctrl+C را فشرده و به دنبال آن دوباره دستور node server.js را اجرا کنید.

 

اگر دوست ندارید در هر بار تغییر در کد مجبور باشید سرور خود را غیر فعال و فعال کنید، می توانید از nodemon استفاده کنید.


ساخت یک برنامه AngularJS

 

داخل دایرکتوری public یک صفحه با نام main.html ایجاد کنید. این فایل به عنوان قالب اصلی ما در نظر گرفته می شود. به سادگی محتوای فایل index.html را که قبل درست کرده ایم را داخل فایل main.html کپی کنید و محتوای داخل تگ body را پاک کنید.

 

AngularJS را دانلود کرده و آن را در فایل main.html وارد کنید. همچنین directive یا دستوردهنده ngApp را در بالاترین تگ HTML خود وارد اضافه کنید.

 

 

در تگ body فایل main.html، یک div درست کنید و به آن دستوردهنده ngView اضافه کنید. وقتی تمام تغییرات را انجام دادیم، حال باید فایل ما شبیه به زیر باشد:

 

 

حال، اجازه دهید وقتی سرور Node اجرا شد صفحه ای را به عنوان پیش فرض برای نمایش تعریف کنیم. فایل server.js را باز کرده و تکه کد زیر را برای منتقل شده به صفحه main.html اضافه کنید.

 

 

تغییرات را ذخیره کنید و سرور Node را دوباره از نو اجرا کنید. به آدرس http://localhost:3000 رفته، این بار بجای نمایش خطا، صفحه ای خالی در مرورگر نمایش داده می شود.

 

ساخت View و Route کارت

 

حال اجازه دهید طرح سبد خرید را با AngularJS ادغام کنیم. در داخل دایرکتوری public پوشه با نام cart درست کنید. داخل پوشه cart دو فایل cart.html و cart.js اضافه کنید. از طراحی فایل index.html که از bootstrap استفاده کرده بودیم استفاده می کنیم – محتوای داخل تگ body آن را داخل فایل cart.html کپی کنید.

 

ما همچنین به ngRoute نیاز داریم، بنابراین با استفاده از NPM دانلود و نصب کنید:

 

 

هنگامی که نصب شد، angular-route را به main.html لینک کنید.

 

 

cart.js را باز کرده و ماژول cart را تعریف کنید.

 

 

همانطور که در کد فوق دیده می شود، ما باید از ماژول ngRoute برای تعریف مسیرها (routes) استفاده کنیم.

 

 

با استفاده از ماژول ngRoute، ما توانستیم مسیر /cart با قالب و کنترلر مربوط به این مسیر را تعریف کنیم. همچنین باید در داخل cart.js کنترلر CartCtrl را تعریف کرد، که به صورت زیر خواهد بود:

 

 

ما همچنین به یک فایل ریشه (root) نیاز داریم تا تمام ماژولها را داخل برنامه آنگولار ما تزریق کند. پس داخل دایرکتوری public یک فایل با نام app.js درست کنید. این فایل به عنوان فایل root در برنامه آنگولار به کار گرفته می شود. ماژولی جدید با نام shoppingCart داخل app.js درست کنید و ماژول cart را داخل آن تزریق کنید.

 

 

حال در app.js یک route پیشفرض برای /cart تعریف کنید.

 

 

فایل های cart.js و app.js را به صفحه main.html ارجاع دهید.

 

 

تمام تغییرات را ذخیره کنید و سرور را ری استارت کنید. به آدرس http://localhost:3000 رفته و شما باید صفحه سبد خرید را مشاهده کنید.


 

ساخت View و Route پرداخت نهایی

 

داخل دایرکتوری public، پوشه ای با نام checkout ایجاد کنید. داخل این پوشه، دو فایل با نام های checkout.html و checkout.js اضافه کنید. فایل checkout.html را باز کرده و کدهای HTML زیر را به آن اضافه کنید:

 

 

فایل checkout.js را باز کرده و ماژول checkout را درست کنید. ماژول ngRoute را تزریق کنید و قالب و کنترلر پیشفرض را در آن تعریف کنید. checkout.js باید بصورت زیر به نظر برسد:

 

 

checkout.js را به فایل main.html ارجاع دهید.

 

 

ماژول checkout در app.js تزریق کنید بطوری که shoppingCart از این ماژول باخبر باشد.

 

 

تغییرات را ذخیره کنید و سرور را از نو راه اندازی کنید، و همانطور که می دانید به آدرس http://localhost:3000/#/checkout رفته و باید خروجی زیر به شما نمایش داده شود.

 

angular-cart

 

خلاصه

 

در این آموزش که از وب سایت tutsplus ترجمه شده است، ما توانستیم که یک کارت خرید ساده را طراحی کنیم و آن را با برنامه AngularJS ادغام کنیم. در پست بعدی، خواهیم دید که چطور یک directive سفارشی برای اجرای ویژگی های مورد نیاز ایجاد کنیم.


  • siavash ameli

    TNX 😉
    fk konin ke in amoozeshayee ke mizarin besooorat film miboood chi mished…..?kheili khooo boood

    • پاتریک

      شما لطف دارید 🙂 خوشحالم که راضی هستید. یه روز بلاخره فیلم هم می زارم. جالب می شه 🙂

  • حمید

    واقعه خیلی عالی کارتون.
    امکان آموزش آنگولار با لاراول هم هست؟

    • پاتریک

      خواهش می کنم، مرسی که نظر میدید.
      بله چرا که نه! شما هرچی که به نظرتون جالب میاد پیشنهاد بدید، سعی می کنم درباره اون پست بزارم. 😉