آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش Directive ها در AngularJS

دوره آموزش SPA

رمز فایل :tahlildadeh.com

 

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

Directive ها در AngularJS

Angular یک چارچوب کاری یا کتابخانه ی جاوا اسکریپت هست که به کمک خصیصه های نوینی به نام Directive ها(دستور ها)، به برنامه نویس یا طراح وب این اجازه را می دهد که HTML را بسط داده و قابلیت های آن را گسترش دهد.

Angular Directives

Directive ها با استفاده از پیشوند ng، خصیصه های HTML را بسط می دهند. 

دستور ng-app یک برنامه ی AngularJS را مقدار دهی اولیه (آغاز و تعریف) می کند.

دستور ng-init داده های برنامه (app data) را مقدار دهی اولیه می کند.

دستور ng-model مقدار کنترل های دریافت ورودی HTML از قبیل input و select و textarea را به داده های برنامه مقید bind می کنند.

نمونه یک

    

Input something in the input box:

Name:

You wrote: {{ firstName }}

امتحان کنید

 

دستور ng-app همچنین به AngularJS اطلاع می دهد که المان <div> صاحب برنامه ی AngularJS می باشد.

اتصال داده (Data Binding)

عبارت {{ firstName }} که در مثال بالا مشاهده کردید، یک عبارت اتصال داده AngularJS است.

اتصال داده یا data binding عبارت های AngularJS را با داده های AngularJS هماهنگ و منطبق (synchronize) می سازد.

به طور مثال، {{ firstName }} با ng-model="firstName" برابر می باشد.

در مثال زیر مشاهده می کنید که دو فیلد دریافت متن (text field) با دستور ng-model مساوی و برابر شده اند:

نمونه دو

    

Cost Calculator

Quantity: Price:

Total in dollar: {{quantity * price}}

امتحان کنید

 

همان طور که در مبحث پیشین مطرح شد، استفاده از دستور ng-init برای مقداردهی زیاد توصیه نمی شود. در مباحث آینده با روش بهتری برای مقدار دهی اولیه ی آشنا خواهیم شد.

تکرار کردن المان های  HTML

دستور ng-repeat به منظور تکرار کردن المان HTML بکار رفته و عملکردی مشابه حلقه را دارد:

نمونه سه


    

Looping with ng-repeat:

  • {{ x }}
امتحان کنید

در زیر از دستور ng-repeat بر روی یک آرایه از اشیا استفاده شده است:

نمونه چهار


    

Looping with objects:

  • {{ x.name + ', ' + x.country }}
امتحان کنید

AngualarJS برای آن دسته از برنامه های کاربردی که نیاز به پیاده کردن عملیات Create، Update، Read، Delete (ایجاد، خواندن، آپدیت، حذف) بر روی پایگاه داده دارند بسیار مناسب می باشد.

کافی است فرض کنید که این اشیا سطرهایی از یک پایگاه داده می باشند.

دستور ng-app

این directive در واقع عنصر آغازین (root element) یک برنامه ی کاربردی را تعریف می کند.

directive ng-app زمانی که صفحه بارگذاری می شود، به صورت خودکار راه اندازی (auto-bootstrap) و مقدار دهی اولیه می شود.

در فواصل آینده یاد خواهید گرفت چگونه ng-app می تواند به منظور اتصال کد ماژول ها، دارای یک مقدار (مانند "ng-app="myModule) باشد.

دستور in-init

این دستور مقادیر اولیه ی برنامه را مشخص می کند.

استفاده از in-init برای مقداردهی اولیه چندان متداول نیست، اغلب از یک کنترلر یا ماژول برای initialization استفاده می کنیم.

در مباحث بعدی درک بهتری نسبت به کنترلر ها و ماژول ها بدست خواهید آورد.

دستور ng-model

دستور ng-model مقادیر کنترل های دریافت کننده ورودی  HTML همچون input، select و textarea را به داده های برنامه ی کاربردی متصل (bind) می کند.

دستور ng-model همچنین قادر به انجام عملیات زیر می باشد:

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

وضعیت داده های برنامه را مشخص می کند: نامعتبر، dirty (دستخوش تغییر قرار گرفته)، خطا و دستکاری شده (touched) و غیره ... .

کلاس های  cssرا برای المان های HTML فراهم می نماید.

المان های HTML را به فرم های HTML مقید (bind) می کند.

دستور ng-repeat

دستور  ng-repeat به ازای هر آیتم موجود در یک مجموعه یا آرایه، عناصر HTML را clone (تکثیر) می کند.

  • 1700
  •    1186
  • تاریخ ارسال :   1394/09/17

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .