قسمت چهارم AngularJS: دستورالعمل‌ها در AngularJS چگونه ایجاد می‌شوند؟

خانه » مقالات اموزشی » javascript » قسمت چهارم AngularJS: دستورالعمل‌ها در AngularJS چگونه ایجاد می‌شوند؟
دستورالعمل ها angularjs-part-4

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

12078

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۲-۲۲

Work time-rafiki

زمان مطالعه:

5 دقیقه

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

پیشنهاد می‌شود قبل از ورود به قسمت از آموزش AngularJS قسمت‌های زیر را مطالعه کنید:

انگولار جی اس چیست ؟

اتصال داده‌ها دستورالعمل‌ها رشته‌ها و شی‌ءها در انگولار

ماژول‌ها چگونه در انگولار ایجاد می‌شوند؟

تعریف دستورالعمل‌های انگولار

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

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

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

دستورالعمل‌های انگولار چگونه ایجاد می‌شوند؟

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

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

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


دستور ng-app این را تعیین می‌کند که المان
شروع‌کننده‌ی برنامه است.

اتصال داده در انگولار

در مثال قبل {{firstName}} نمایشگر یک اتصال داده خواهد بود.

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

{{firstName}} با ng-model = “firstName” محدودشده است. در مثال بعدی، دو فیلد متنی همراه با دو دستورالعمل ng-model هستند:

استفاده از ng-init بسیار رایج نیست شما خواهید آموخت که چگونه داده‌های اولیه را در فصل مربوط به کنترل‌کننده‌ها را اولویت‌بندی کنید.

تکرار عناصر HTML

دستورالعمل ng-repeat برای ایجاد حلقه‌ی تکرار یک المان HTML است به مثال زیر توجه کنید:

دستورالعمل ng-repeat یک المان HTML را به دفعات تکرار می‌کند.

دستورالعمل ng-repeat در آرایه‌ای از اشیاء استفاده می‌شود به مثال زیر توجه کنید:

AngularJS برای پایگاه داده CRUD (Create Read Update Clean) مناسب است.
فقط این نکته را به یاد داشته باشید اگر این اشیاء از یک پایگاه داده ثبت‌شده باشند.

دستورالعمل 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 با همان نام برچسب به‌عنوان دستور جدید ایجاد کنید.

هنگام نام‌گذاری یک عنصر شما باید نام عنصر اول را با حروف کوچک و تمام کلمات را کاملاً به هم چسبیده بنویسید و ابتدای باقی کلمات را با حروف بزرگ را نمایش دهید برای مثال testCodepaz نام یک دستورالعمل خواهد بود و برای فراخوانیان باید به‌صورت test-codepaz نوشت.

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

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

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

محدودیت‌ها برای استفاده‌ی خاص از دستورالعمل‌ها

شما می‌توانید دستورات خود را تنها با برخی از روش‌ها محدود کنید.

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

مقادیر محدود قانونی عبارت‌اند از:

E برای نام عناصر

A برای صفت

C برای کلاس

M برای اظهار نظر (کامنت)

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

شما می‌توانید با مراجعه به سایت w3schools اطلاعات بیشتری درباره‌ی انگولار کسب کنید!

با کدپز همراه باشید.

مرتضی افضلی

مرتضی افضلی

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

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

دیدگاهتان را بنویسید