Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت بیست و سوم AngularJS : اموزش ساخت وب اپلیکیشن با انگولار جی اس

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

2540

Calendar-amico (2)

تاریخ انتشار:

4 , تیر , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

ساخت لیست فروش

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

توضیحات وب اپلیکیشن

قدم اول : شروع

برای شروع اپلیکیشنی با نام myShoppingList و همچنین کنترل کننده ای با نام myCtrl می سازیم. کنترل کننده یک ارایه با نام products و محتوای $scope اضافه میکند. در تگ html نیز ما از دستورالعمل ng-repeat استفاده میکنیم تا ایتم های داخل ارایه برایمان به نمایش درایند. شاید شما هم نیاز به داشتن اطلاعاتی در رابطه با ساخت سند html داشته باشید که میتوانید به مقاله فوق مراجعه فرمایید.

خب در زیر ما یک سند html برپاییه ایتم های یک ارایه ساختیم:

قدم دوم : افزودن ایتم ها

در سند html نیاز به ساخت یک فیلد و همچنین اتصال ان به اپلیکیشن با استفاده از دستورالعمل ng-model داریم.در کنترل کننده یک تابع با نام addItem میسازیم و مقدار ان را به وسیله ی فیلد ورودی که در سند html ساختیم و همچنین با addMe در ارایه ی products اضافه میکنیم.

حال با توضیحات فوق میتوانید ایتم هایی را به لیست خود اضافه کنید:

قدم سوم : حذف ایتم

ماهمچنین قصد داریم تا حذف کردن ایتم را نیز به برنامه ی خود اضافه کنیم. برای اینکار در کنترل کننده یک تابع با نام removeItem می سازیم این تابع هرمقداری را که شما بخواهید از ارایه حذف میکند. در HTML، یک عنصر <span> برای هر عنصر ایجاد کنید و دستورالعمل ng-click که تابع removeItem را با $index فعلی فراخوانی می کند.

حال با توضیحات فوق توانایی ساخت یک حذف کننده ایتم را داریم :

قدم چهارم : پردازش خطاها

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

ما این را با چک کردن مقدار قبل از اضافه کردن موارد جدید حل خواهیم کرد.

در html یک ظرف برای پیام های خطا اضافه میکنیم و وقتی یک نفر تلاش میکند یک ایتم موجود اضافه کند یک پیام خطا را نمایش دهد.

یک فهرست خرید با امکان نوشتن پیغام‌های خطا:

قدم پنجم : ظاهر برنامه

به همین سادگی برنامه ی شما اجرا شد ، اما بهتر است برای استفاده ی بهتر ظاهر ان را بهبود دهید ، ما برای بهود دادن از فایل w3.css استفاده کردیم .

شیوه W3.CSS را اضافه کنید و کلاس های مناسب را در طول برنامه وارد کنید، و از برنامه ی خود لذت ببرید. شاید برای شما هم سوال باشد که به چه روش هایی میتوان استایل برای این اپلیکیشن تعریف کرد که پیشنهاد میشود انواع روش های افزودن استایل را مطالعه فرمایید.

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

برای مطالعه موارد بیشتر میتوانید به سایت w3schools مراجعه فرمایید.

موفق باشید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت بیست و سوم AngularJS : اموزش ساخت وب اپلیکیشن با انگولار جی اس"

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *