آموزش انگولار-دستورات
انگولار به شما اجازه می دهد که به وسیله ی خصوصیات جدیدی به نام Directives(دستور)، HTML را توسعه دهید.
دستورات انگولار-Angular Directives
دستورات انگولار با استفاده از پیشوند -ng ، خصوصیات HTML را توسعه می دهند.
دستور ng-app یک اپلیکیشن انگولار را مقدار دهی اولیه می کند.
دستور ng-init داده های اپلیکیشن را مقدار دهی اولیه می کند.
دستور ng-model مقدار کنترل های HTML از قبیل input و select و textarea را به داده های اپلیکیشن پیوند می دهد.
مثالی از انگولار
<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 منطبق می شوند(برابر می شوند).
مثالی از انگولار
Quantity: <input type="number" ng-model="quantity">
Costs: <input type="number" ng-model="price">
Total in dollar: {{ quantity * price }}
</div>
 |
استفاده از ng-init متداول نیست. شما در فصل مربوط به کنترلرها، با نحوه ی مقدار دهی اولیه کردن داده ها آشنا خواهید شد. |
|---|
تکرار کردن عناصر HTML
دستور ng-repeat یک عنصر HTML را تکرار می کند:
مثالی از انگولار
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
در مثال زیر از دستور ng-repeat بر روی یک آرایه از اشیاء استفاده شده است:
مثالی از انگولار
{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>
|
انگولار برای اپلیکیشن هایی مناسب است که نیاز به انجام اعمال 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 را تکثیر می کند.
- نوشته شده توسط احسان عباسی
- بازدید: 10988