در حال بارگذاری...

مرجع سینتکس قالب

مرجع سینتکس قالب در انگولار، هسته اصلی تعامل بین کامپوننت‌ها و DOM است و امکان مدیریت داده‌ها و رویدادها به صورت دیکلراتیو را فراهم می‌کند. این مرجع شامل تمامی قواعد و سینتکس‌هایی است که توسعه‌دهندگان برای بایندینگ داده، استفاده از دایرکتیوها، مدیریت رویدادها و ارتباط بین کامپوننت‌ها به آن نیاز دارند. در توسعه برنامه‌های مدرن وب و SPA، تسلط بر سینتکس قالب برای ساخت کامپوننت‌های قابل استفاده مجدد، بهینه و قابل نگهداری حیاتی است.
با استفاده از این سینتکس، توسعه‌دهندگان می‌توانند interpolation، property binding، event binding، two-way binding، structural directives مانند ngIf و ngFor و template reference variables مانند #var را به شکل مؤثر پیاده‌سازی کنند. این ابزارها به مدیریت وضعیت (state management)، جریان داده (data flow) و lifecycle کامپوننت‌ها کمک کرده و از prop drilling و re-render غیرضروری جلوگیری می‌کنند.
در این مرجع، شما یاد می‌گیرید چگونه کامپوننت‌های قابل استفاده مجدد بسازید، داده‌ها را به صورت مؤثر بین کامپوننت‌ها منتقل کنید و از lifecycle hooks برای مدیریت مؤثر DOM و state استفاده نمایید. همچنین، تمرکز بر بهینه‌سازی عملکرد، مدیریت state و امنیت برنامه‌های انگولار مدرن خواهد بود تا شما بتوانید پروژه‌های حرفه‌ای SPA را با بهترین استانداردهای انگولار توسعه دهید.

مثال پایه

typescript
TYPESCRIPT Code 
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
selector: 'app-counter',
template: `       <h2>کنتور ساده</h2>       <p #counterDisplay>{{ counter }}</p>       <button (click)="increment()">افزایش</button>
`
})
export class CounterComponent {
counter: number = 0;

@ViewChild('counterDisplay', { static: true }) counterElem!: ElementRef<HTMLParagraphElement>;

increment() {
this.counter++;
console.log('مقدار کنتور:', this.counterElem.nativeElement.textContent);
}
}

در این مثال، CounterComponent ایجاد شده است. با استفاده از template reference variable #counterDisplay، المان <p> شناسایی و با @ViewChild به صورت type-safe در TypeScript دسترسی پیدا می‌کند. تابع increment() مقدار counter را افزایش داده و آن را در console نمایش می‌دهد.
Interpolation با {{ counter }} باعث به‌روزرسانی خودکار UI می‌شود که نمونه‌ای از unidirectional data flow در انگولار است. این الگو از prop drilling جلوگیری می‌کند و state محلی کامپوننت را مدیریت می‌نماید. این روش در ساخت فرم‌ها، کامپوننت‌های dynamic و تعاملات پیچیده کاربرد دارد و پایه‌ای برای استفاده در پروژه‌های واقعی است.

مثال کاربردی

typescript
TYPESCRIPT Code 
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
selector: 'app-message',
template: `       <div #messageBox class="message-box">{{ message }}</div>
`,
styles: ['.message-box { padding: 10px; border: 1px solid #ccc; margin-top: 10px; }']
})
export class MessageComponent implements AfterViewInit {
@Input() message: string = '';
@ViewChild('messageBox') box!: ElementRef<HTMLDivElement>;

ngAfterViewInit() {
console.log('پیام نمایش داده شده:', this.box.nativeElement.textContent);
}
}

@Component({
selector: 'app-root',
template: `       <h1>اپلیکیشن پیام</h1>       <app-message [message]="userMessage"></app-message>       <input [(ngModel)]="userMessage" placeholder="پیام خود را وارد کنید" />
`
})
export class AppComponent {
userMessage: string = 'سلام انگولار!';
}

Advanced انگولار Implementation

typescript
TYPESCRIPT Code 
import { Component, ViewChild, ElementRef, ChangeDetectionStrategy, AfterViewInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
selector: 'app-live-counter',
template: `       <h2>کنتور پیشرفته</h2>       <p #display>{{ counter$ | async }}</p>       <button (click)="increment()">افزایش</button>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LiveCounterComponent implements AfterViewInit {
private counterSubject = new BehaviorSubject<number>(0);
counter$ = this.counterSubject.asObservable();

@ViewChild('display') displayElem!: ElementRef<HTMLParagraphElement>;

increment() {
this.counterSubject.next(this.counterSubject.value + 1);
}

ngAfterViewInit() {
console.log('مقدار اولیه کنتور:', this.displayElem.nativeElement.textContent);
}
}

در مرجع سینتکس قالب، استفاده درست از ViewChild، مدیریت state با BehaviorSubject و جریان داده reactive، و استفاده از ChangeDetectionStrategy.OnPush نمونه‌ای از بهترین practices برای جلوگیری از re-render غیرضروری است.
خطاهای رایج شامل prop drilling، دستکاری مستقیم state و دسترسی به DOM قبل از init هستند. ابزارهایی مانند Angular DevTools و unit tests برای رفع مشکلات و دیباگ توصیه می‌شوند. برای امنیت، از دستکاری مستقیم DOM و داده‌های ناامن جلوگیری کنید و از Angular sanitizer بهره ببرید. این روش‌ها امکان ساخت کامپوننت‌های modular، پرسرعت و maintainable در SPAها را فراهم می‌کنند.

📊 مرجع کامل

انگولار Element/Method Description Syntax Example Notes
template reference variable دسترسی به المان محلی #varName <input #username /> با @ViewChild دسترسی پیدا می‌کند
@ViewChild دسترسی به template reference @ViewChild('var') varElem @ViewChild('username') inputEl static: true/false
@ViewChildren دسترسی به چند reference مشابه @ViewChildren('var') elems @ViewChildren('item') items QueryList برمی‌گرداند
ngIf رندر شرطی *ngIf="condition" <div *ngIf="isVisible"></div> نمایش/مخفی کردن المان
ngFor رندر حلقه‌ای *ngFor="let item of items" <li *ngFor="let i of list">{{i}}</li> استفاده از trackBy توصیه می‌شود
ngClass استایل پویا [ngClass]="{'class': condition}" <div [ngClass]="{'active': isActive}"></div> پذیرش object/array/string
ngStyle استایل inline پویا [ngStyle]="{'color': color}" <p [ngStyle]="{'font-size.px': size}"></p> CSS inline
@Input ورودی parent→child @Input() prop @Input() message:string; Data binding
@Output خروجی child→parent @Output() event = new EventEmitter() @Output() changed = new EventEmitter<number>() EventEmitter
ngModel Two-way binding [(ngModel)]="value" <input [(ngModel)]="username" /> نیاز به FormsModule
AfterViewInit Lifecycle hook ngAfterViewInit() ngAfterViewInit() {…} پس از ایجاد view
ChangeDetectionStrategy Default/OnPush Default استراتژی تشخیص تغییرات بهینه‌سازی render
BehaviorSubject Reactive state new BehaviorSubject(initial) counter$ = new BehaviorSubject(0) Observable با مقدار اولیه

📊 Complete انگولار Properties Reference

Property Values Default Description انگولار Support
static true/false false زمان initialization @ViewChild Angular 8+
read ElementRef/TemplateRef/Component ElementRef نوع داده inject شده Angular 8+
trackBy Function undefined بهینه‌سازی ngFor Angular 2+
changeDetection Default/OnPush Default استراتژی تشخیص تغییرات Angular 2+
encapsulation Emulated/None/ShadowDom Emulated CSS encapsulation Angular 2+
providers Array [] DI services Angular 2+
animations Array [] Animationهای component Angular 4+
interpolation Array ['{{','}}'] سینتکس interpolation Angular 2+
preserveWhitespaces true/false true حفظ فاصله سفید Angular 2+
outputs Array [] خروجی‌های component Angular 2+
inputs Array [] ورودی‌های component Angular 2+
host Object {} Host bindings/listeners Angular 2+

مرجع سینتکس قالب پایه‌ای برای ساخت کامپوننت‌های قابل استفاده مجدد و بهینه در انگولار است. توسعه‌دهندگان با تسلط بر این مرجع می‌توانند جریان داده، مدیریت state و lifecycle را به شکل موثری کنترل کنند. برای یادگیری پیشرفته‌تر، مطالعه @Input/@Output، Angular Forms، RxJS Observables و دایرکتیوهای پیشرفته توصیه می‌شود. تمرین در پروژه‌های واقعی و مطالعه مستندات رسمی، درک عمیق و تسلط بر سینتکس قالب را تضمین می‌کند.

کلیدواژه‌های مرتبط

کاربران همچنین با این عبارات این محتوا را جستجو می‌کنند:

مرجع سینتکس قالب انگولار template reference انگولار Angular ViewChild مثال ngIf ngFor انگولار data binding انگولار two-way binding انگولار مدیریت state کامپوننت انگولار lifecycle hooks انگولار بهینه‌سازی عملکرد انگولار SPA کامپوننت انگولار جلوگیری از prop drilling انگولار Angular Forms two-way binding RxJS reactive state انگولار ChangeDetectionStrategy OnPush دایرکتیوهای پیشرفته انگولار

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
4
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 1 از 1
Angular آموزش