دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۹
  • مرداد

جلسه ۰۴ : آشنایی با دستورالعمل ها در AngularJS

  • دسته‌بندی‌ها :
جلسه ۰۴ : آشنایی با دستورالعمل ها در AngularJS
    • جزئیات
    • kنوع محتواآموزش تصویری

      مقدمه

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

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

      آشنایی با دستورالعمل ها در AngularJS

      AngularJS به شما اجازه می دهد که HTML را با ویژگی های جدید به نام Directives یا دستورالعمل، گسترش دهید.

      AngularJS دارای مجموعه ای از دستورات ساخته شده است. که قابلیت برنامه های کاربردی شما را فراهم می کند.

      AngularJS همچنین به شما اجازه می دهد دستورات خود را تعریف کنید.

      بررسی دستوالعمل ها در AngularJS

      دستورالعمل AngularJS ویژگیهای HTML را با پیشوند ng- تمدید می کنند.

      دستور ng-app یک برنامه AngularJS را راه اندازی می کند.

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

      دستورالعمل مدل ng مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.

      مثال :  استفاده از دستوالعمل ها

      خودتان امتحان کنید »

      مثال : 

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

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

      بیان {{firstName}}، در مثال بالا، بیانگر اتصال داده AngularJS است.

      اتصال داده در AngularJS عبارات AngularJS را به داده های AngularJS متصل می کند.

      {{firstName}} معادلng-model = "firstName" است.

      در این مثال، دو فیلد متنی همراه با دو دستورالعمل مدل ng هستند:

      مثال : دو فیلد متنی

      خودتان امتحان کنید »

      مثال : 

      تکرار عناصر HTML

      دستورالعمل ng-repeat یک عنصر HTML را تکرار می کند:

      مثال : تکرار عناصر html

      خودتان امتحان کنید »

      مثال : 

      دستورالعملng-repeat یک بار برای هر یک از اجزای یک مجموعه، یک عنصر HTML را تمیز می کند.

      دستورالعملng-repeat در آرایه ای از اشیاء استفاده می شود:

      مثال : تکرار عناصر html

      خودتان امتحان کنید »

      مثال : 

      دستورالعمل ng-app

      دستور Ng-app عناصر ریشه یک برنامه AngularJS را تعریف می کند.

      دستورالعمل ng-application بوت استرپ خودکار (به طور خودکار مقداردهی اولیه) برنامه را هنگامی که یک صفحه
      وب بارگذاری می شود، انجام می دهد.

      دستورالعمل ng-init

      دستورالعمل ng-init مقادیر اولیه برای یک برنامه AngularJS را تعریف می کند.

      به طور معمول شما از ng-init استفاده نمی کنید. شما از یک کنترل کننده یا ماژول استفاده می کنید.

      دستورالعمل ng-model

      دستورالعمل ng-model مقدار کنترل های HTML (ورودی، انتخاب، متن منطقه) را به داده های برنامه متصل می کند.

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

      • ارائه تاییدیه نوع داده های برنامه (شماره، ایمیل و…).
      • می توانید وضعیت داده های برنامه را ارائه دهید (نامعتبر، کثیف، لمس شده، خطا).
      • ارائه کلاس CSS برای عناصر HTML.
      • می توانید عناصر HTML را به فرم HTML متصل کنید.

      ایجاد دستورالعمل جدید

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

      دستورالعمل های جدید با استفاده از عملکرد .directive ایجاد می شوند.

      برای فراخوانی دستور جدید، یک عنصر HTML را با همان نام برچسب به عنوان دستور جدید ایجاد کنید.

      هنگام نامگذاری یک دستور، شما باید از نام  w3TestDirective استفاده کنید، اما هنگام فراخوانی، باید از نام
      جدا شده، w3-test-directive استفاده کنید:

      مثال : ایجاد دستور جدید

      خودتان امتحان کنید »

      مثال : 

      شما می توانید یک دستور را با استفاده از موارد زیر ایجاد کنید:

      • نام عنصر
      • صفت
      • کلاس
      • اظهار نظر

      مثالهای زیر همه نتیجه ی مشابهی تولید خواهند کرد:

      مثال : نام عناصر

      خودتان امتحان کنید »

      مثال : 

      مثال : 

      مثال : 

      مثال : توضیحات

      خودتان امتحان کنید 

      مثال : 

      محدودیت ها

      شما می توانید دستورات خود را تنها با برخی از روش ها محدود کنید.
      با اضافه کردن یک خصوصیت restrict با مقدار “A”، دستورالعمل تنها می تواند توسط صفات مورد استفاده
      قرار گیرد:

      مثال : محدود کردن دستوالعمل

      خودتان امتحان کنید »

      مثال : 

      خصوصیت restrict شامل مقادیر زیر است:

      • E برای نام عنصر
      • A برای مشخصه
      • C برای کلاس
      • M برای نظر

      که به طور پیش فرض مقدار EA است، به این معنی که هر دو عنصر نام و نام ویژگی می توانند از دستور استفاده کنند.

      کلام آخر

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

      QR:  جلسه ۰۴ : آشنایی با دستورالعمل ها در AngularJS
      به اشتراک بگذارید