دستورالعمل ها angularjs-part-4

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

در مثال قبل {{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 است، به این معنی که هر دو عنصر نام و نام ویژگی می توانند از دستور استفاده کنند.

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

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

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

یاعلی

برچسب ها : angular، angularjs

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