دیزاینرهای وب AngularJS یاد بگیرند

دیزاینرهای وب AngularJS یاد بگیرند

Misko Hevery سازنده AngularJS، در چندین مصاحبه مختلف،  هدف از ساخت آنگولار، قادر ساختن دیزاینرها (نه برنامه‌نویس‌ها) برای ساخت برنامه‌های ساده مثل وب سایت دانسته است، اما در صفحه اول سایت و مستندات Angular به نظر می رسد که تنها برای توسعه دهنده‌های وب نوشته شده است، نه تنها درک کار با Angular برای طراحان سخت نیست بلکه بسیار راحت و باید علاقه مند به یادگیری آن باشند.

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

اگر کدهای زیر را درک می کنید، پس آماده هستید که کار را شروع کنیم.

شروع

راه اندازی آنگولار بسیار ساده است. از تگ <script> برای لینک کردن angular.js استفاده کنید و اتریبیوت ng-app را به تگ <html> اضافه کنید. اتریبیوت ng-app همچنین در آنگولار directive نامیده می شود، این کار باعث می شود سند html به یک برنامه آنگولار کامپایل شود.

در کد فوق آنگولار عبارات بین در جفت براکت {{ }} را پردازش می کند.

 

ng-show

اولین directive که عاشقش خواهید شد ng-show خواهد بود. با ng-show می توانید مشخص کنید عناصر آیا نمایش داده شوند یا نه.

همانطور که مشاهده می کنید کد بسیار ساده است. پاراگرافی که شامل ng-show="true" است قابل دیدن است اما آن یکی که ng-show="false" است قابل دیدن نیست و مخفی است.

خروجی تکه برنامه فوق:

 

ng-click

بی‌فایده است که تنها از ng-show استفاده کنید، پس نیاز دارید که برای تعامل از ng-click استفاده کنید. دایرکتیو ng-click را به عنصر (معمولا دکمه‌ها) اضافه کنید. مقدار ng-click وقتی نمایش داده می شود که بر رور عنصر کلید شود.

مقدار متغیر count با هر بار کلیک بر روی دکمه یکی به آن اضافه می شود. از ng-init برای تنظیم متغیر count با مقدار پیشفرض 0 استفاده کرده ایم.

ng-click + ng-show

با ترکیب ng-click و ng-show حالا می توانید با برنامه تعامل بیشتر داشته باشید. به عنوان مثال، یک toggle button.

وقتی بر روی دکمه کلیک می شود، مقدار display به true / false تغییر می کند و پاراگراف، متناسب با مقدار display نمایش/مخفی می شود.

یا می توانید اسلایدها را بطور دستی کنترل کنید.

و همچنین تعاملات بیشتر که می توانید با ng-click و ng-show  انجام دهید.

 

ng-class

شاید بخواهد بجز نمایش و مخفی کردن عناصر، قصد تغییر style عناصر را داشته باشید. می توانید از ng-class برای اضافه کردن css بصورت پویا به عناصر HTML استفاده کنید. برای این کار باید یک نقشه از نام کلاس‌های خود به ng-class بصورت زیر اضافه کنید:

اگر مقدار (foo /bar) صحیح (true باشد، یعنی مقدارش هر چیزی بجز خالی باشد) باشد، کلید (strike / bold) به عنوان کلاس‌های css به عنصر اضافه می شوند:

کد فوق خروجی زیر را به شما برگشت می دهد:

با این حال عملی نیست که از مقدار ثابت در ng-class استفاده شود. بخش بعدی را مشاهده کنید!

 

ng-click + ng-class

با ترکیب ng-click و ng-class می توانید دکمه‌ای درست کنید که از استایل‌های bootstrap.css استفاده شده است.

یا با bootstrap.css تب (tab) درست کنید.

همین! ما الان تنها با سه دایرکتیو ng-clickng-showng-class آشنا شدیم.  حالا می توانید تعاملات طراحی را با AngularJS داشته باشید. آسان است نه؟ 🙂

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

 

  • امیرحسین

    مثل همیشه عالی, نو شدن ظاهر وبلاگتونم تبریک می‌گم 🙂

    • پاتریک درآواکیانس

      مرسی مرسی 🙂

  • محمد

    ترکوندین !!!!

    • پاتریک درآواکیانس