دستورالعمل های Angular
1397/07/01 09:48 , بهزاد ناظمی

دستورالعمل های Angular

معرفی

 دستورالعمل ها اساسا بخشی از یک برنامه Angular هستند و معمولا برای دستکاری در رفتار یا ظاهر عنصر DOM استفاده می شوند.

 چهار نوع مختلف دستورالعمل وجود دارد:

  • اجزاء
  • دستورالعمل های ساختاری
  • دستورالعمل های صفت
  • دستورالعمل های سفارشی

 اجزاء

 بله، درست است - اجزاء در واقع یک دستورالعمل هستند و این تنها دستورالعمل است که دارای قالب HTML است. اجزاء بیشترین دستورالعمل استفاده شده هستند.

 این دستورالعمل از ویرایشگر @component استفاده می کند که حاوی متا داده اجزاء است. یعنی انتخاب کننده، الگو، URL، styleUrls و غیره

 مثال:

import{Component} from '@angular/core'  
@Component({  
selector: 'app-root',  
templateUrl: './app.component.html',  
styleUrls: ['./app.component.css']  
})  
exportclassAppComponent{}  

 

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

 اساسا استفاده از آن برای افزودن یا حذف عناصر DOM است. هنگامی که این دستورات به قالب اضافه می شود، از ستاره (*) استفاده می شود.

 * ngIf، * ngFor، * ngSwitchCase بعضی دستورالعمل های ساختاری معمول است که استفاده می شود.

 مثال

<div *ngIf="isAdmin"class="name">{{user.name}}</div>  
<ul>  
<li *ngFor="let user of users">{{user.name}}</li>  
</ul> 

 

در اینجا شما می توانید در خط  #1 - *ngIf مشاهده کنید، نام کاربر تنها زمانی قابل مشاهده است که Admin (Boolean) درست باشد.

 در خط #3 - *ngFor فهرست کاربران را نمایش می دهد، <li>  اضافه خواهد شد.

 

دستورالعمل مشخص

برای دستکاری ظاهر یا رفتار عنصر DOM مورد استفاده قرار می گیرد. [ngStyle]، [ngClass] معمولا استفاده می شود.

مثال

در اینجا هر دو دستورالعمل  [ngStyle]و [ngClass] از یکی از شرایط مراقبت می کنند اگر نتیجه ی کاربر برابر با ‘Pass’ باشد، سپس به ترتیب  ‘green’ و ‘test-success’اعمال خواهد شد.

<div [ngStyle]="{'background-color':user.result === 'Pass' ? 'green' : 'red' }"></<div>  
<div [ngClass]="{'text-success':user.result === 'Pass'}"></div>  

 

دستورالعمل سفارشی

ما همچنین می توانیم دستورالعمل خودمان را ایجاد کنیم که می توانیم به عنوان یک ویژگی در قالب HTML اضافه کنیم. توسط ویرایشگر @Directive ایجاد می شود.

 مثال

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

import{ Directive, ElementRef } from '@angular/core';  
@Directive({  
selector: '[appHighlight]'  
})  
exportclass HighlightDirective {  
constructor(el: ElementRef) {  
style.backgroundColor = 'yellow';  
}  
}  

خط 1

واردکردن دستورالعمل و عنصر elementRef از کتابخانه ‘@angular/core’

خط شماره 3

اعلام کلاس به عنوان یک دستورالعمل که دارای selector "appHighlight" است که در هنگام اضافه کردن دستورالعمل در قالب استفاده می شود.

 خط شماره 5

صدور خروجی یک کلاس به نام HighlightDirective، که ما باید در آرایه declrable در داخلNgModule اضافه کنیم. سازنده دارای عنصر مرجع است که تغییرات اعمال خواهد شد.

 برای استفاده از آن فقط یک ویژگی اضافه کنید.

  1. <p appHighlight>Highlight me!</p>  

 خلاصه

 دستورالعمل ها اساسی ترین عنصر کاربرد نرم افزار Angular هستند. اجزاء نیز یک دستورالعمل است و این تنها دستورالعملی است که دارای الگو درونی است. دستورالعمل ساختاری و مشخصه برای دستکاری DOM مورد استفاده قرار می گیرد.

 علاوه بر این، ما می توانیم دستورالعمل خاص خود را بسته به نیاز خود ایجاد کنیم که بسیار آسان است.

 

     برگرفته از : https://www.c-sharpcorner.com

جالب است بخوانید

فعال کردن احراز هویت ویندوز در وب API و Angular

دریافت اطلاعات آب و هوا از یک API با استفاده از MVC و Angular

CoffeeScript همان JavaScript است،اما بدون سردرد!

Shell Scripting چیست و چرا باید از آن استفاده کرد؟

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

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

فرم ارسال نظرات