نوشتن قالب پیچیده برای انگولار — به زبان ساده

۲۱۱ بازدید
آخرین به‌روزرسانی: ۱۱ شهریور ۱۴۰۲
زمان مطالعه: ۴ دقیقه
نوشتن قالب پیچیده برای انگولار — به زبان ساده

انگولار (Angular) یک فریمورک فرانت‌اند محبوب به حساب می‌آید که از سوی گوگل ساخته شده است. انگولار نیز مانند دیگر فریمورک‌های فرانت‌اند از یک معماری مبتنی بر کامپوننت برای سازماندهی اپلیکیشن‌ها استفاده می‌کند. در این مقاله به بررسی روش نوشتن قالب پیچیده برای انگولار می‌پردازیم.

997696

Statement Context

منظور از Statement هر چیزی است که در کامپوننت وجود دارد و شامل متدهای مدیریت رویداد و دیگر اعضای وهله کامپوننت می‌شود.

چارچوب گزاره یا Statement Context به طور معمول وهله کامپوننت را شامل می‌شود. برای نمونه متد toggle اقدام به فراخوانی (click)="toggle()" می‌کند که به AppComponent ارجاع می‌دهد که یک «چارچوب گزاره» (Statement Context) محسوب می‌شود.

  • فایل app.component.ts
1import { Component } from "@angular/core";
2@Component({
3  selector: "app-root",
4  templateUrl: "./app.component.html",
5  styleUrls: ["./app.component.css"]
6})
7export class AppComponent {
8  showText: boolean = false;
9  toggle() {
10    this.showText = !this.showText;
11  }
12}
  • فایل app.component.html
1<button (click)="toggle()">Toggle</button>
2<p *ngIf="showText">foo</p>

نام‌های «چارچوب قالب» (Template context)‌ نسبت به نام‌های چارچوب گزاره تقدم دارند. برای نمونه به کد زیر توجه کنید.

  • فایل app.component.ts
1import { Component } from "@angular/core";
2@Component({
3  selector: "app-root",
4  templateUrl: "./app.component.html",
5  styleUrls: ["./app.component.css"]
6})
7export class AppComponent {
8  names: string[] = ["John", "Jane"];
9  deleteName(name) {
10    const index = this.names.findIndex(n => n === name);
11    this.names.splice(index, 1);
12  }
13}
  • فایل app.component.html
1<div *ngFor="let name of names">
2  {{name}} <button (click)="deleteName(name)">Delete</button>
3</div>

در کد فوق name در app.component.html به متغیر ورودی قالب و نه به مشخصه name مربوط به کامپوننت اشاره دارد.

راهنمای گزاره

گزاره‌های قالب نمی‌توانند به هر چیزی در فضای نام سراسری اشاره کنند، برای نمونه نمی‌توانند به window یا document ارجاع بدهند. ضمناً نمی‌توانند console.log یا Math.min را فراخوانی کنند. همچنین باید از نوشتن گزاره‌های پیچیده قالب اجتناب کنیم. منطق باید به جای قالب در کامپوننت باشد.

ساختار اتصال

«اتصال داده» (Data Binding) اقدام به کنترل مواردی می‌کند که کاربر روی صفحه می‌بیند و به طور خاص مقادیر داده‌های اپلیکیشن را کنترل می‌کند. ما باید از فریمورک اتصال برای نمایش آسان‌تر داده‌ها کمک گیریم. انگولار انواع مختلفی از اتصال داده ارائه می‌کند که آن‌ها را می‌توان در دسته‌بندی‌های زیر تجمیع کرد:

  • از منبع (Source) ‌به نما (View)
  • از نما به منبع
  • دنباله دوطرفه یعنی از منبع به نما و به منبع

میانابی‌هایی مانند {{name}} یک اتصال یک‌طرفه از منبع به نما محسوب می‌شوند. رویدادهایی مانند (click) یک اتصال یک‌طرفه از نما به منبع هستند. اتصال دوطرفه با ساختاری مانند [(name)] مشخص می‌شود. انواع اتصال به جز میان‌یابی یک نام هدف دارند که در سمت چپ تساوی قرار می‌گیرد و درون یکی از ساختارهای [] یا () قرار گرفته و در ابتدای آن bind ،-on- یا bindon- می‌آید.

اتصال داده و HTML

از اتصال داده می‌توان برای افزودن داده‌های دینامیک به HTML استفاده کرد. برای نمونه می‌توانیم برای HTML استاتیک استفاده کنیم:

1<div class="special">foo</div>
2<img
3  src="https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
4/>
5<button disabled>Save</button>

اگر بخواهیم HTML را به صورت دینامیک درآوریم می‌توانیم به صورت زیر عمل کنیم:

  • فایل app.component.ts
1import { Component } from "@angular/core";
2@Component({
3  selector: "app-root",
4  templateUrl: "./app.component.html",
5  styleUrls: ["./app.component.css"]
6})
7export class AppComponent {
8  isUnchanged: boolean = true;
9}
  • فایل app.component.html
1<button [disabled]="isUnchanged">Save</button>

در کد فوق فیلد بولی isUnchanged را داریم که مقدار خصوصیت disabled مربوط به دکمه را تعیین می‌کند. از آنجا که isUnchanged مقدار true در AppComponent دارد، disabled نیز در دکمه مقدار true خواهد داشت.

خصوصیت HTML در برابر مشخصه DOM

خصوصیت‌ها به وسیله HTML تعریف می‌شوند. مشخصه‌ها از سوی گره‌های DOM مورد استفاده قرار می‌گیرند. برخی خصوصیت‌های HTML دارای نگاشت یک به یک مانند id هستند. برخی خصوصیت‌ها مانند خصوصیت aria مشخصه‌های متناظر ندارند. برخی مشخصه‌های DOM مانند textContent دارای خصوصیت‌های متناظر HTML نیستند.

بنابراین نتیجه می‌گیریم که خصوصیت‌های HTML و مشخصه‌های DOM دو چیز کاملاً متفاوت هستند، هر چند نام‌های یکسانی داشته باشند. تنها نقش خصوصیت‌های HTML مقداردهی به عناصر و حالت‌های دایرکتیو است.

اتصال قالب با مشخصه‌ها و رویدادها و نه با خصوصیت‌ها کار می‌کند. برای نمونه عناصر ورودی زیر شامل برخی خصوصیت‌ها هستند:

<input type="text" value="Sarah">

هر دو مورد type و value خصوصیت محسوب می‌شوند. برای تعیین مشخصه disabled می‌توانیم از مشخصه attr.disabled استفاده کرده و به صورت زیر عمل کنیم:

<input [attr.disabled]="condition? 'disabled': null">

از سوی دیگر، ‌اگر از مشخصه disabled استفاده کنیم، می‌توانیم آن را به صورت زیر بنویسیم:

<input [disabled]="condition">

اتصال نوع‌ها و هدف‌ها

هدف اتصال داده چیزی در DOM است. این هدف به نوع اتصال وابسته است و می‌تواند یک عنصر، کامپوننت، دایرکتیو یا رویداد یا هر چیزی که یک نام خصوصیت دارد باشد. مشخصه‌ها روی عناصر، کامپوننت‌ها و دایرکتیوها تنظیم می‌شوند. به مثال زیر توجه کنید:

<div [ngClass]="{'foo': isFoo}"></div>

در این مثال از دایرکتیو ngClass برای تعیین کلاس div به صورت دینامیک استفاده شده است. اگر isFoo مقدار true داشته باشد، در این صورت کلاس foo تعیین می‌شود. رویدادها شامل رویدادهایی می‌شوند که از عناصر، کامپوننت‌ها یا دایرکتیوها ارسال می‌شوند. به عنوان مثال اگر داشته باشیم:

<button (click)="onSave()">Save</button>

در این صورت، ‌رویداد کلیک شدن دکمه را به دستگیره رویداد onSave در کامپوننت وصل می‌کنیم. به این ترتیب زمانی که روی دکمه Save کلیک کنیم، onSave فراخوانی خواهد شد. امکان افزودن اتصال دوطرفه به ورودی به صورت زیر وجود دارد:

<input [(ngModel)]="name">

دایرکتیو ngModel از اتصال دوطرفه از ورودی به کامپوننت و برعکس پشتیبانی می‌کند. به این ترتیب می‌توانیم مقدار ورودی را در هر جایی از قالب که به name اشاره شده باشد ببینیم. همچنین می‌توانیم داده‌ها را به برخی خصوصیت‌ها مانند خصوصیت aria به صورت زیر متصل کنیم:

<button [attr.aria-label]="photo">Photo</button>

کلاس و استایل‌ها نیز می‌توانند به روش خاصی مانند زیر اتصال یابند:

<div [class.green]="isGreen">Green</div>
<button [style.color]="isGreen? 'red': 'green'">

امکان تعیین کلاس div با درج مشخصه class و سپس نام کلاس و style با مشخصه استایل و در ادامه مشخصه‌ای که قرار است تعیین شود، وجود دارد.

سخن پایانی

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

امکان اتصال برخی خصوصیت‌ها به روش‌های خاصی مانند کلاس، استایل و aria وجود دارد.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
javascript-in-plain-english
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *