اجرا و برنامه نویسی اولین پروژه با انگولار ۲ - بخش ۱-۲

همانگونه که مشاهده کردید در بخش ۱-۱ به آموزش نصب فارسی انگولار ۲ پرداختیم. در ادامه از ابزار angular-cli برای مدیریت فایل‌های ایجاد شده و بررسی بروزرسانی‌های نرم‌افزار بهره بردیم. در نهایت با اجرای دستور ng new angular2 اولین اپلیکیشن خود را ایجاد کرده و ساختار پوشه‌ها را دیدیم. این بخش در ادامه‌ی بخش گذشته است که به تولید یک نرم‌افزار بسیار ساده و تحت وب می‌انجامد. با ما همراه باشید.

نوشتن و اجرا کردن اولین کدهای انگولار ۲

قبل از ایجاد هر چیز، باید خروجی نرم‌افزار خود را روی مرورگرها مشاهده کنید. angular-cli‌ سرور HTTP‌ای دارد که با استفاده از آن می‌توان نرم‌افزار خود را اجرا کرد. به ترمینال یا خط فرمان بازگردید و در روت فایل‌های اپلیکیشن خود ( در پروژه قبلی، آدرس روت به صورت angular2 بود) دستور زیر را اجرا کنید:

ng serve

با اجرای این دستور سرور HTTP‌ مختص ابزار angular-cli اجرا خواهد شد. سپس خروجی آدرس لوکال هاست برای شما به نمایش گذاشته می‌شود. این خروجی به صورت http://localhost:4200 خواهد بود. البته اگر بنا به دلایلی پورت ۴۲۰۰ برای شما اشغال شده بود، ابزار angular-cli به صورت خودکار پورت دیگری را جایگزین می‌کند. اگر تمام مراحل را به درستی انجام داده باشید با صفحه زیر روبه‌رو خواهید شد.

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

ساخت یک کامپوننت

یک ایده‌ی منحصربه‌فرد و بزرگ پشت انگولار ۲ قرار گرفته است که نام این ایده کامپوننت می‌باشد.

در نرم‌افزارهای انگولار، کدهای HTML به‌گونه‌ای عمل می‌کنند که نرم‌افزار ما به صورت تعاملی عمل کند اما مرورگرها تنها برخی از تگ‌های مشخص مانند <select> یا <form> یا <video> را می‌شناسند. حال سوال پیش میاید که چگونه می‌توان تگ‌های جدید و تولید شده توسط برنامه‌نویس را به مرورگرها فهماند؟! چگونه می‌توان تگی مانند <weather> را تولید کرد و درون مرورگرها نمایش داد؟ یا چگونه می‌توان یک تگ <login> برای پنل ورود و عضویت کاربران ایجاد کرد؟

در پاسخ به این سوال‌ها باید به ایده‌ی اصلی و ریشه‌ای کامپوننت‌ها اشاره کرد:‌ ما به مرورگرها تگ‌های جدیدی را آموزش می‌دهیم که دارای توابع دلخواه هستند!

بسیار عالی! هم اکنون اولین کامپوننت خود را ایجاد کنید. اگر بتوان کامپوننت مناسبی نوشت، قابلیت استفاده‌ی آن در سند HTML شما امکان‌پذیر خواهد بود. برای ایجاد یک کامپوننت جدید از ابزار angular-cli استفاده کنید. دستور موردنیاز برای ایجاد یک کامپوننت با نام مشخص به صورت زیر خواهد بود:

ng generate component hello-world

با اجرای دستور فوق خروجی زیر مشاهده خواهد شد:

create src\app\hello-world\hello-world.component.css
create src\app\hello-world\hello-world.component.html
create src\app\hello-world\hello-world.component.spec.ts
create src\app\hello-world\hello-world.component.ts

یک سوال دیگری که بوجود می‌آید:‌ چگونه می‌توان به صورت طبیعی و بدون دستور یک کامپوننت واقعی تولید کرد؟ در جواب این سوال باید در جریان باشید که هر کامپوننت از دو بخش اصلی تقسیم شده است:

• تفسیر component
• کلاس تعریف‌شده کامپوننت

اجاره بدهید نگاهی به کدهای درون کامپوننت‌ انداخته و سپس به توضیح هر یک بپردازیم. اولین فایل تایپ اسکریپت خود را با پسوند ts‌ باز کنید. مسیر این فایل src/app/hello-world/hello-world.component.ts می‌باشد.

محتوای این فایل به صورت زیر می‌باشد:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

توجه: فایل‌های کامپوننت‌ها با پسوند تایپ اسکریپت ذخیره می‌شوند، اما مشکل اینجاست که مرورگرها قادر به تفسیر فایل‌های تایپ اسکریپت نیستند. در نتیجه با استفاده از وب سرور ng serve که سرور HTTP ابزار angular-cli هست، فایل‌هایی با پسوند ts به فایل‌هایی با پسوند js تبدیل و در نتیجه کدها برای مرورگرها به مفاهیم قابل فهم تبدیل خواهند شد.

این کدها در ابتدا ممکن است بسیار ترسناک به نظر برسند اما اصلا نگران نباشید. قدم به قدم تمامی مفاهیم توضیح داده خواهند شد.

وارد کردن وابستگی‌ها (Importing Dependencies)

کلمه‌ی import در ابتدای کدها برای تعریف کردن ماژول‌هایی‌ست که برای نوشتن کدها استفاده می‌شوند. در فایل بالا دو کلمه ایمپورت شده‌اند: Component و OnInit.

در واقع دستور import Component ماژول "@angular/core" را فراخوانی می‌کند. "@angular/code" هسته‌ای‌ست که به برنامه ما اطلاع می‌دهد:‌ وابستگی‌هایی که به دنبالشان بودیم را کجا پیدا کرده‌ایم. در این شرایط، به کامپایلر اطلاع می‌دهیم که "@angular/core" دو شیء جاوا اسکریپت/تایپ اسکریپ را تعریف و استخراج کند که Component و OnInit نام دارند. مشابه همین امر برای دستور import OnInit وجود دارد. بعدا در مورد OnInit آموزش مفصلی را ارائه خواهیم داد. اما در همین حد بدانید که OnInit به نرم افزار ما برای اجرای کدهایی که مقداردهی اولیه شده‌اند، کمک می‌کند.

توجه داشته باشید که ساختار import تحت هر شرایطی به فرمت زیر می‌باشد. درون کروشه‌ی {things} کارهایی انجام می‌شود که به آنها destructuring یا مخرب گفته می‌شود. مخرب یک ویژگی است که توسط ES6 و TypeScript ایجاد شده است. در مورد مخرب‌ها به تفصیل بعدا صحبت خواهیم کرد.

ایده‌ی import در تایپ اسکریپت تا حدودی شبیه import در جاوا یا require در روبی است. در انتها می‌توان گفت با استفاده از این دستور وابستگی‌های که در سایر ماژول‌ها وجود دارد، در دسترس خواهند بود.

تفسیر کامپوننت‌ها

پس از ایمپورت کردن وابستگی‌های موردنیاز، باید کامپوننت موردنظر را تعریف کنید:

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})

اگر شما برنامه نویسی جاوا اسکریپت کرده باشید ممکن است جمله زیر برایتان کمی عجیب و غریب به نظر برسد:

@component({
    // ...
})

اینجا چه کاری انجام می‌شود؟ اگر شما پس زمینه‌ای از زبان‌برنامه نویسی جاوا داشته باشید متوجه خواهید شد که بسیار شبیه به هم هستند. این شباهت تفسیر یا annotation نام دارد. در واقع تفسیر راهی است برای اضافه کردن توابع به کدها با استفاده از کامپایلر!

شما می‌توانید به این صورت فکر کنید که تفاسیر یا annotation‌ها مانند metadata اضافه شده به کدها هستند! هنگامیکه در کلاس HelloWorld از @Component اضافه می‌شود، عمل decorating یا پیراستن و تزئین روی HelloWorld به عنوان یک Component صورت پذیرفته است.

هم اکنون می‌توان از این کامپوننت با تگ <app-hello-world> در صفحه HTML خود استفاده کرد. برای اینکار باید تنظیمات @Component انجام شده و یک سلکتور یا نشانه مشخص تحت عنوان app-hello-world برای آن در نظر گرفته شود. بنابراین قدم به قدم رو به جلو حرکت می‌کنیم:

@Component({
	selector: 'app-hello-world'
	// ... more here
})

این انتخاب کننده (selector) دقیقا مشابه سلکتورها در CSS یا JQeury عمل می‌کنند. راه‌های مختلف دیگری برای تنظیم کردن سلکتورها در انگولار ۲ وجود دارد که در آینده به آنها و سلکتورهای ترکیبی نیز اشاره خواهیم کرد. تنها نکته‌ای که باید در ذهن بسپارید این است، ما یک تگ جدید برای نشانه‌گذاری HTML ایجاد کردیم. بنابراین هر تگی به صورت <app-hello-world></app-hello-world> نمایانگر قالب مشخصی است که این کلاس کامپوننت و هر آنچه درون آن است را مورد استفاده قرار می‌دهد.

اضافه کردن یک قالب (template) با استفاده از templateUrl

در کامپوننت موردنظر یک templateUrl مشخص تعریف شده است که از آدرس ./hello-world.component.html در دسترس است. این بدین معنی است که قالب موردنظر ما از طریق فایل hello-world.component.html بارگذاری می‌شود. این فایل در پوشه مشابه کامپوننت قرار دارد. به درون فایل قالب نگاهی می‌اندازیم:

<p>
  hello-world ROXO.ir works!
</p>

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

اضافه کردن یک قالب (template)

به دو شیوه می‌توانید قالب‌های خود را تغریف کنید. ۱) با استفاده از کلید template داخل شیء @Component یا ۲) با استفاده از تعریف templateUrl.

ابتدا با روش شماره ۱، قالبی به @Component اضافه می‌کنیم:

@Component({
	selector: 'app-hello-world',
	template: '
		<p>
		hello world ROXO.ir Works!
		</p>
	'
})

یک سوال: آیا حتما باید قالب‌ها را درون یا خارج از کامپوننت‌ها تعریف کرد؟
پاسخ: به طور معمول و در اکثر موارد قالب‌ها را در فایل جداگانه تعریف و سپس با استفاده از دستور templateUrl آن را به کامپوننت موردنظر پیوست می‌کنند. علت این امر تمیز کد زدن و خوانا بودن برنامه برای سایر برنامه‌نویسان است.

اضافه کردن استایل‌های CSS با استفاده از styleUrls

توجه داشته باشید که کلید styleUrl به صورت زیر تعریف می‌شود:

styleUrls: ['./hello-world-component-css']

با استفاده از دستور بالا استایل و ظاهر CSS درون فایل hello-world.component.css به کامپوننت موردنظر اعمال می‌شود. در انگولار ۲ با مفهومی تحت عنوان "استایل کپسوله‌شده" آشنا خواهید شد. این بدین معنی‌ست که هر استایل تنها به کامپوننت مشخصی اعمال می‌شود و روی آن اثر می‌گذارد. در مباحث بعدی به دقت این موضوع را بررسی خواهیم کرد.

بارگذاری کامپوننت ایجاد شده

هم اکنون کامپوننت موردنظر ما با فیلدهای مورد انتظار پر شده است و آماده اجراست! اما چگونه می‌توان یک صفحه را بارگذاری کرد؟

اگر هم اکنون به مرورگر خود مراجعه کنید و مجددا صفحه را بازیابی کنید هیچ اطلاعاتی تغییر نکرده است. زیرا ما فقط یک کامپوننت را ایجاد کرده‌ایم و هنوز از آن استفاده‌ای نبرده‌ایم. برای تغییر این صفحه و اعمال کامپوننت، نیاز به اضافه کردن تگ کامپوننت به قالب اصلی‌ست که در مسیر root/angular2/src/app/app.component.html واقع شده است. همواره به یاد داشته باشید که چون ما کامپوننت HelloWorldComponent را با سلکتور app-hello-world مشخص کرده‌ایم بنابراین تگ مورد استفاده آن <app-hello-world></app-hello-world> خواهد بود. در نهایت تگ را به فایل قالب app.component.html اضافه می‌کنیم و نتیجه:

<h1>
    {{title}}
    <app-hello-world></app-hello-world>
</h1>

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

به شما تبریک می‌گوییم اطلاعات شما به نسبت بخش ۱-۱ بسیار تکمیل شد و هم اکنون با مفاهیم کامپوننت‌ها، قالب‌ها و ظاهر یک تگ دلخواه در انگولار ۲ آشنا شدید. در بخش ۱-۳ مفاهیم را ادامه داده تا بتوان داده‌ای را خوانده و به نمایش در‌آورد.

برای افزایش تمرکز کاربران عزیز و جلوگیری از طولانی شدن مطالب، هر بخش را به قسمت‌های کوچکتری تبدیل کرده‌ایم. در لیست زیر تمام بخش‌ها و زیربخش‌های آموزشی مجموعه‌ی انگولار ۲ در اختیار شما قرار گرفته است.

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

فصل ۱

• بخش ۱-۱: معرفی مفاهیم اولیه به همراه آموزش فارسی نصب انگولار ۲
• بخش ۱-۲: برنامه‌نویسی و اجرای اولین پروژه با انگولار ۲
• بخش ۱-۳:‌ کار با کامپوننت‌ها و ارسال داده‌ها در انگولار ۲
• بخش ۱-۴:‌ طراحی و برنامه‌نویسی سایت نظرسنجی با انگولار ۲
• بخش ۱-۵: طراحی پیشرفته سایت نظرسنجی با انگولار ۲

فصل ۲

• بخش ۲-۱: مقدمه و شروع کار با زبان TypeScript
• بخش ۲-۲:‌ کار با کلاس‌ها، متدها، ویژگی‌ها و ... در TypeScript

فصل ۳

• دستورهای شرطی و کنترلی Built-in در انگولار ۲

فصل ۴

• بخش ۴-۱: آشنایی با فرم‌ها (NgForm و NgModel) در انگولار ۲
• بخش ۴-۲: اعتبارسنجی FormBuilder و ngModel در انگولار ۲

فصل ۵

• بخش ۵-۱:‌ آشنایی با ماژول HTTP‌ در انگولار ۲ به همراه مثال ساده

فصل ۶

• مقدماتی تا پیشرفته مسیریابی (Routing) در انگولار ۲