معرفی ساختار انگولار و ویرایش اولین برنامه

با مطالعه‌ی فصل گذشته اطلاعات نسبتا کلی در ارتباط با انگولار و انواع نسخه های آن بدست آوردید. سپس با اعمال یک سری دستور سیستم مدیریت پکیج یا NPM و سیستم مدیریت خط فرمان انگولار تحت عنوان Angular CLI، را نصب کردید. در نهایت پس از انجام تمام این مراحل با وارد کردن آدرس http://localhost:4200 به صفحه اولین پروژه انگولار خود وارد شده و پیام app Works که به معنای کار کردن نرم‌ افزار شماست، را مشاهده کردید.

حال در ادامه به توضیح ساختار پوشه بندی انگولار و همچنین نحوه‌ی ویرایش آنها می‌پردازیم.

فایل‌های انگولار

پس از نصب انگولار یک پوشه که نام آن را خودتان مشخص کرده‌ اید در مسیر مورد نظرتان ایجاد می‌گردد. توضیح هر یک از این فایل‌ها به صورت زیر است:

پوشه e2e: به عنوان یک پوشه برای تست کردن پروژه مورد استفاده قرار می‌گیرد که مخفف عبارت End 2 End است.

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

سایر فایل‌ها: به عنوان فایل‌های برای تنظیمات نرم‌افزار بوده که اغلب به صورت پیش فرض توسط خط فرمان Angular CLI ایجاد شده است.

محتویات درون پوشه src

این پوشه شامل یک سری فایل‌های ویژه است که برای اجرای نرم‌ افزار شما مورد استفاده قرار می‌گیرند همانطور که قبلا ذکر کردیم مهم‌ترین فایل موجود تحت عنوان index.html در ریشه یا root این پوشه قرار دارد و با کلیک روی آن می‌توانید محتویات درون آن را ملاحظه بفرمایید. علاوه بر این یک سری پوشه‌های دیگر درون src وجود دارند که شرح هر کدام از آنها به صورت زیر است:

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

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

پوشه environment: درون این پوشه معمولا متغییرهای مربوط به محیط نرم‌افزار تنظیم می‌شود که به صورت پیش فرض ثابت می‌باشند و در طول این سری از دوره‌ های آموزشی کمتر به آن می‌پردازیم.

کار کردن با محیط انگولار

برای ایجاد یک سری عملیات مقدماتی در پروژه خود نیاز داریم تا تغییراتی را ایجاد کرده و در وهله‌ی اول با محیط ساختاری انگولار آشنا شویم.

هنگامیکه شما آدرس http://localhost:4200 را وارد می‌کنید با عبارت app works روبه‌رو خواهید شد. البته در نسخه‌های جدید این فریم‌ورک یک آرم از انگولار ۴ مشابه تصویر زیر ملاحظه می‌کنید:

برای ایجاد تغییرات روی این صفحه کافی‌ست وارد پوشه‌ی app شده و روی فایل app.component.ts کلیک نمایید. پسوند ts مخفف عبارت TypeScript می باشد که در ادامه بیشتر درباره آن بحث می‌کنیم. بنابراین محتویات فایل app.component.ts به صورت زیر خواهد بود:

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

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

در صورتیکه مقدار عبارت روبه‌روی title را به عبارت roxo App یا هر عنوان دلخواه دیگری تغییر دهید. عنوان بالای آرم انگولار به Welcome to roxo App!! تغییر می‌کند.

چقدر جالب! شما هم به این نکته پی بردید که بدون اینکه صفحه را مجددا بارگذاری کنید به صورت خودکار تغییرات اعمال شده پس از ذخیره کردن فایل خود به خود در صفحه مرورگر نمایش داده می‌شود.

این قابلیت توسط سرور Nodejs برای شما فراهم شده است تا در سریع‌ترین زمان ممکن تغییرات موردنظر خود را به صورت آنلاین و در لحظه مشاهده کنید. در اصطلاح به این حالت watch یا watch-poll گفته می‌شود. یعنی سرور به حالت انتظار می‌نشیند تا پس از اعمال اولین تغییرات در صفحه، سریعا آن را نمایش دهد.

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

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <img width="300" src="data:">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
  </li>
</ul>

همانطور که ملاحظه می‌کنید تمام اطلاعات مربوط به صفحه اصلی که در آدرس http://localhost:4200 مشاهده می‌کنید، در این بخش قرار گرفته است!

در ابتدای این فایل عبارت welcome to درج شده و سپس دستوری آشنا با عنوان {{title}} بعد از آن قرار گرفته است. در واقع اگر تمام داده‌ها و متغییرهای موجود در انگولار و زبان typescript درون دو کروشه یا {{  }} درج و در فایل html قرار داده شوند، در صفحه مانیتور نمایش داده خواهند شد.

به عبارت دیگر دستور {{ }} همانند دستور print کار می‌کند یعنی متغییر را نمایش می‌دهد.

بنابراین اگر title درون کنترلر (app.component.ts) را تغییر دهیم، اطلاعات به صفحه View (صفحه ای با پسوند html. برای هر کامپوننت) ارسال شده و سپس در آن نمایش داده خواهد شد.

حال تمام دستور‌های موجود در صفحه‌ی app.component.html را پاک کرده تا تغییراتی دلخواه را در این صفحه اعمال کنیم. سپس مجموعه‌ی کد زیر را به صفحه خود اضافه نمایید:

<input type="text" [(ngModel)]="title">
<p>{{title}}</p>

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

ngModel چیست؟

ngModel به عنوان یک دستور یا directive در انگولار معرفی می شود که وظیفه‌ی حمل اطلاعات را به عهده دارد.

یعنی اگر در یک input که به عنوان ورودی اطلاعات است یک صفت تحت عنوان ngModel اضافه کنیم، اطلاعاتی که درون آن text نوشته می‌شوند توسط ngModel به متغییر درون آن یعنی title چسبیده و سپس در هر قسمتی که نام آن متغییر یا ویژگی را ذکر کنیم، آن اطلاعات نمایش داده خواهند شد.

در مثال فوق متغییر یا ویژگی title که در ابتدا عبارت Roxo App را با خود حمل می‌کرد، حال با استفاده از دستور ngModel اطلاعات دریافتی از input text را جایگزین مقادیر قبلی کرده و سپس در تگ پاراگراف <p> نمایش می‌دهد.

برای فعال‌سازی این نحوه‌ی نگه‌داری اطلاعات و نمایش آنها باید از یک ساختار یا ماژول استفاده کنیم.

بنابراین ابتدا وارد فایل app.module شده و سپس این فایل را به صورت زیر ویرایش می‌کنید:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';// ----> اضافه شده است

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // ----> اضافه شده است
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

همانطور که ملاحظه می‌کنید ساختار فرم‌ها را برای پروژه خود قابل فهم کردیم تا بتوانیم از دستورهای موردنیاز به هنگام کار کردن با المان‌ها و اجزای فرم‌ها استفاده کنیم.

بنابراین خروجی ما به صورت زیر خواهد بود:

همانطور که در خروجی مشاهده می‌کنید به ازای هر نوشته‌ای که درون input text نوشته شود، سریعا مقدار موردنظر در تگ <p> نمایش داده خواهد شد.

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

یعنی بدون اینکه صفحه رفرش شود به صورت همزمان و Real-Time اطلاعات برای شما نمایش داده خواهد شد. اگر بخواهید همچین کدی را با زبان جاو اسکریپت بنویسید باید ساعتها زمان گذاشته و صدها خط کدنویسی انجام بدهید.

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

معرفی TypeScript (تایپ اسکریپت)