سبد خرید (0)

تبلیغات

آموزش انگولار-دستورات

انگولار به شما اجازه می دهد که به وسیله ی خصوصیات جدیدی به نام Directives(دستور)، HTML را توسعه دهید. 

دستورات انگولار-Angular Directives

دستورات انگولار با استفاده از پیشوند -ng  ، خصوصیات HTML را توسعه می دهند. 

دستور ng-app یک اپلیکیشن انگولار را مقدار دهی اولیه می کند. 

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

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

مثالی از انگولار

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>
خودتان امتحان کنید »

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


پیوند دادن داده ها

عبارت {{firstName}} در مثال بالا، یک عبارت پیوندی مربوط به داده های انگولار می باشد. 

پیوند دادن داده ها در انگولار در واقع عبارات انگولار را با داده های انگولار منطبق می کنند. 

بعنوان نمونه، عبارت {{firstName}} با ng-model=firstName منطبق می شود(برابر می شود).

در مثال زیر، دو فیلد متنی وجود دارند که با دو دستور ng-model منطبق می شوند(برابر می شوند).

مثالی از انگولار

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>
خودتان امتحان کنید »
Note

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


تکرار کردن عناصر HTML

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

مثالی از انگولار

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
خودتان امتحان کنید »

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

مثالی از انگولار

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"
>

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
خودتان امتحان کنید »
Note

انگولار برای اپلیکیشن هایی مناسب است که نیاز به انجام اعمال CURD(ایجاد، خواندن، آپدیت، حذف)  بر روی دیتابیس دارند

تنها کافی است تصور کنید که این اشیاء در واقع رکوردهایی از یک دیتابیس هستند. 


دستور ng-app

دستور ng-app درواقع عنصر ریشه ی یک اپلیکیشن انگولار را تعریف می کند. 

دستور ng-app هنگامی که یک صفحه ی وب لود می شود، به طور خودکار عمل می کند و مقدار دهی اولیه می شود. 

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


دستور in-init

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

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

در آینده بیشتر با کنترلر ها و ماژول ها آشنا خواهید شد. 


دستور ng-model

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

دستور ng-model همچنین کارهای زیر را انجام می دهد:

  • اعتبار سنجی را برای داده های اپلیکیشن از قبیل عدد و ایمیل و داده های ضروری، انجام می دهد. 
  • وضعیت داده های اپلیکیشن را مشخص می کند مانند: نامعتبر، زشت، خطا و ...
  • کلاس های cssرا برای عناصر HTML ارائه می دهد. 
  • عناصر HTML را به فرم های HTML پیوند می دهد. 

دستور ng-repeat

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

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی