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

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

Statement Context

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

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

چارچوب گزاره یا 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) اقدام به کنترل مواردی می‌کند که کاربر روی صفحه می‌بیند و به طور خاص مقادیر داده‌های اپلیکیشن را کنترل می‌کند. ما باید از فریمورک اتصال برای نمایش آسان‌تر داده‌ها کمک گیریم. انگولار انواع مختلفی از اتصال داده ارائه می‌کند که آن‌ها را می‌توان در دسته‌بندی‌های زیر تجمیع کرد:

فیلم آموزش نود جی اس، انگولار و مونگو دی بی – پیاده سازی احراز هویت کاربر با Angular، Node.js و MongoDB در فرادرس

کلیک کنید

• از منبع (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 نیستند.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

بنابراین نتیجه می‌گیریم که خصوصیت‌های 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 با مشخصه استایل و در ادامه مشخصه‌ای که قرار است تعیین شود، وجود دارد.

سخن پایانی

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

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

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

• مجموعه آموزش‌‌های جاوا اسکریپت
• مجموعه آموزش‌های برنامه‌‌نویسی
• نخستین اپلیکیشن انگولار خود را بسازید
• آشنایی با Angular CLI – به زبان ساده
• ۱۰ قابلیت مفید انگولار که احتمالاً از وجودشان اطلاع ندارید — راهنمای کاربردی

==