معرفی چرخه حیات (LifeCycle) در انگولار

با مطالعه‌ی فصل گذشته اطلاعات مفیدی از مقدمات انگولار و زبان تایپ اسکریپت بدست آوردید. حالا وقت آن رسیده است که شیرجه‌ی عمیق‌تری زده و به قلب انگولار نشانه برویم. در این فصل قصد داریم توضیحات عمیق و تکمیلی‌ تری در ارتباط با انواع قسمت‌های فریم‌ورک قدرتمند انگولار ارائه دهیم. با ما همراه باشید.

روند اجرایی برنامه‌‌ های انگولار

همانطور که با یکدیگر بررسی کردیم اگر صفحه‌ی مربوط به app.component.html را باز کرده و سپس محتویات فایل درون آن را حذف کنیم و در نهایت اقدام به اجرای دستور ng serve‌ نماییم، آنگاه صفحه‌ای سفید و بدون اطلاعات نمایش داده می‌شود.

اما این تصور ذهنی نباید وجود داشته باشد که فایل app.component.html در سرور کامپایل و در صفحه مانیتور اجرا می‌شود بلکه تمام محتویات موجود در کل کامپوننت‌ ها باید در یک فایل به نام index.html خلاصه شود. این بدین معنی‌ست که هر تعداد کامپوننت داشته باشیم با فرخوانی تگ‌های آنها در فایل index.html به قالب ساختاری آنها دسترسی داریم.

بنابراین اگر فایل Index.html را از مسیر src باز کنید مجموعه‌ی کدهایی به صورت زیر در آن قرار گرفته است:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Learning</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

تمام تگ‌های موجود در این صفحه از نوع html‌ بوده و چنانچه به این زبان تسلط داشته باشید برای شما قابل فهم هستند. اما یک تگ به نام <app-root> وجود دارد که تا به حال به آن برخورد نکردید. این تگ در واقع همان رابط بین کامپوننت app و مشتقات آن با صفحه اصلی وب اپلیکیشن شما است. کامپوننت app در مسیر src -> app‌ موجود می‌باشد.

معرفی فایل app.component.ts در انگولار

این فایل به عنوان یک کنترلر یا مرکز کنترل کامپوننت شما (که در اینجا app نام دارد) انجام وظیفه می‌ کند. محتویات دستورات و اطلاعات موجود در این کامپوننت را با یکدیگر بررسی خواهیم کرد:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

در این فایل یک عبارت با عنوان Component‌ تعریف شده و محتویاتی را برای معرفی مجموعه‌ی خود ارائه می‌دهد. یکی از کلمات کلیدی که درون این کامپوننت استفاده شده است برابر است با selector.

سلکتور به عنوان یک معرف تگ در کامپوننت‌ها مورد استفاده قرار می‌گیرد. یعنی هر آنچه مقابل selector نوشته شود در صفحه index.html یا سایر صفحات قابل دسترسی است.

بنابراین در این فایل که به صورت پیش‌فرض ایجاد شده یک سلکتور برای کامپوننت app‌ به نام <app-root> معرفی شده است.

به عبارت دیگر دستور <app-root></app-root> معرف چهار فایل app.component.ts, app.component.html, app.component.spec.ts و app.component.css‌ است.

حال اگر آدرس http://localhost:4200‌ را باز کنید و روی آن راست کلیک کرده و سپس عبارت view page source را انتخاب کنید با مجموعه‌ی دستورهای زیر روبه‌رو خواهید شد:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Learning</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

شاید این سوال برای شما پیش بیاید که انتهای این صفحه یک سری تگ‌های script وجود دارد که مربوط به فایل‌های جاوا اسکریپت است. در ارتباط با این موضوع باید خدمت شما عزیزان اطلاع دهیم که این دستورها به صورت اتوماتیک و توسط ng serve انگولار ایجاد شده‌اند و در ادامه‌ به آنها اشاره‌ای خواهیم کرد. حال یک قدم جلوتر رفته و فایل‌های ts را مورد بررسی قرار می‌دهیم.

پس از معرفی قلب یک کامپوننت که در فایل‌هایی با پسوند ts. خلاصه می‌شوند لازم دانستیم تا فایل و قلب اصلی نرم‌افزار را مورد تحلیل قرار دهیم. هدف از این تحلیل‌ها ارائه و تعریف خط به خط کدها نیست بلکه ارائه‌ی یک دید کلی نسبت به فایل‌هاست تا شما تسلط کافی را برای ساخت ایده‌های خود را بدست بیاورید.

معرفی فایل main.ts

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

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

نسبت به این فایل واکنشی نشان ندهید چون تمام این مباحث را به صورت کامل پوشش خواهیم داد. اما مهم‌ترین بخش این فایل خط آخر آن است که در آن یک ماژول خودراه‌انداز یا bootstrap اجرا می‌شود.

توسط این ماژول یک AppModule به عنوان آرگومان ورودی دریافت شده که به صورت مستقیم با AppModule موجود در خط ۴ در ارتباط است. یعنی به صورت خودکار در ابتدای شروع برنامه، این ماژول از فولدر src -> app فراخوانی و اجرا می‌شود.

معرفی فایل app.module.ts در انگولار

حال اگر نگاهی به فایل app.module بیاندازیم با مجموعه‌ی دستورهای زیر روبه‌رو خواهیم شد:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

با بررسی این فایل متوجه خواهید شد که در بخش NgModule@ مجموعه‌ای از تعاریف شامل کامپوننت‌ها، کلاس‌های مورد استفاده، سرویس‌دهنده‌ها و کامپوننتی که خود راه‌انداز یا bootstrap است، وجود دارند. بنابراین با تعریف bootstrap کامپوننت مادر (والد) را مشخص می‌کنیم و سپس آن را در بخش مربوط به معرفی کامپوننت (declarations) نوشته و مورد استفاده قرار می‌دهیم.

چرخه حیات انگولار

معرفی ۳ فایل فوق تنها با یک هدف انجام شد و آن ارائه‌ی درک صحیح از روند کار انگولار است. بنابراین هنگامیکه یک برنامه‌ی انگولاری اجرا می‌شود مراحل زیر به ترتیب اتفاق می‌افتد:

ابتدا فایل main.ts اجرا می‌شود.
سپس در قسمت bootstrap یا خودراه‌انداز این فایل، AppModule به عنوان آرگومان به متد bootstrap ارسال می‌گردد.
آرگومان AppModule از کامپوننت app و فایل app.module.ts بدست می‌آید.
داخل فایل app.module.ts یک خود‌راه‌انداز دیگر به نام bootstrap تعریف شده است که کامپوونت والد (مادر) را مشخص می‌کند.

در انتها فراموش نکنید که انگولار چیزی نیست جز یک فریم‌ورک جاوا اسکریپت که بسیاری از دستورهای جاوا اسکریپت در بستر تایپ اسکریپت در آن فراهم است و در نهایت شما با استفاده از آن به صورت همزمان Real Time المان‌های صفحه و به صورت کلی DOM را تغییر می‌دهید.

بسیار عالی پس تا به اینجای کار با چرخه حیات یا Life Cycle نرم افزارهای مبتنی با انگولار آشنا شدید و روند اجرایی آن را فرا گرفتید. در مباحث بعدی نگاهی تخصصی تر به قسمت‌های مختلف خواهیم داشت.

توجه: دوستان عزیز آموزش ویدیویی انگولار ۵ از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید.