در قسمت های قبل با ویژگی های مهم Angular آشنا شدیم و یاد گرفتیم چگونه با ترکیب آنها برنامه های ساده درست کنیم. یاد گرفتیم که چطور برنامه آنگولار را با Controller کنترل کنیم. Controller یکی از بخش های مهم برنامه است که در هر برنامه آنگولاری دیده می شود. در این قسمت نیز می خواهیم با دانش اندکی که از قسمت های قبل به دست آورده ایم یک برنامه ساده دیگر درست کنیم.
موضوعات قبل را حتما دنبال کنید:
- یادگیری AngularJS با مثال – ساخت نوار منو
- یادگیری AngularJS با مثال – Controller
- یادگیری AngularJS با مثال – ساخت سیستم CRUD ساده
حتما توجه کرده اید که وقتی وارد یک سایت فروشگاه آنلاین می شوید، چطور محصول مورد نظر را انتخاب و در سبد خرید اضافه می کنیم. در این مثال می خواهیم یک سبد خرید بسیار ساده درست کنیم که کاربر بتواند محصولات را از لیست محصولات انتخاب کند و همچنین می تواند تعداد اقلام را وارد و جمع کل خرید را بصورت real-time مشاهده کند (البته که قرار نیست فروشگاهی در ابعاد واقعی را پیاده سازی کنیم).
[codepen_embed height=500 theme_id=3 slug_hash=’jbXvvy’ user=’patrickava’ default_tab=’result’ animations=’run’] [/codepen_embed]
ابتدا اجازه دهید نگاهی به کدهای Controller خود بیندازیم. همانطور که مشاهده می کنید آرایه products را تعریف کرده ایم داخل آن اطلاعات 4 محصول به دلخواه را نشان می دهد. ما بطور پیشفرض به متغیرهای qty (تعداد محصول انتخابی) و active (آیا محصول انتخاب شده است یا نه) مقادیری اختصاص داده ایم. اگر خروجی را مشاهده کنید می بینید که محصول MacBook Pro انتخاب شده است، چون ما متغیر active آن را true قرار داده ایم. اگر می خواهید این محصول نیز همانند محصولات دیگر غیر فعال باشد false را وارد کنید.
همانند قسمت قبل با استفاده از ng-repeat محصولات را نمایش می دهیم. با هر بار کلیک بر روی محصول فعال/غیرفعال می شود و این بخاطر فراخوانی تابع زیر با ng-click می باشد:
|
1 2 3 |
$scope.addToCart = function(item) { item.active = !item.active; }; |
ما وقتی محصولی را انتخاب می کنیم، آیتم انتخابی به رنگ سبز تغییر می یابد. برای این کار css زیر را به فایل css خود اضافه کرده ایم:
|
1 2 3 |
.active { background-color: #8ec16d; } |
آنگاه با استفاده از ng-class مشخص می کنیم که آیا محصول انتخاب شده است یا نه! اگر محصول انتخاب شده باشد، متغیر active آن محصول به مقدار true تغییر می باید و css فوق اجرا می شود:
|
1 |
ng-class="{ active:product.active }" |
همچنین برای محاسبه جمع کل تابع زیر را نوشته ایم که بسیار ساده است و نیازی به توضیح اضافی ندارد!
|
1 2 3 4 5 6 7 8 9 |
$scope.total = function() { var total = 0; angular.forEach($scope.products, function(item) { if (item.active) { total += (item.price * item.qty); } }); return total; }; |
تابع فوق ابتدا بررسی می کند که آیا مشخصه active محصول فعال است یا نه، اگر فعال بود قیمت آن را به متغیر total اضافه می کند و بصورت real-time در view نمایش می دهد:
|
1 |
<h3>Total: {{ total() | currency }}</h3> |
امیدوارم تا اینجا توانسته باشم انگیزه کار فریم ورک AngularJS را در شما ایجاد کنم. در مثال بعد چیزهای بیشتر یاد خواهیم گرفت پس منتظر قسمت بعدی باشید. 😉