دوره‌ها / Angular / اولین پروژه (First Project)

اولین پروژه (First Project)

15 دقیقه Article

اولین پروژه Angular: سلام دنیا! 👋

حالا که Angular CLI نصب شده، بیایید اولین پروژه خودمان را بسازیم. این یک لحظه هیجان‌انگیز است!

ایجاد پروژه جدید:

ترمینال را باز کنید، به پوشه‌ای که می‌خواهید پروژه در آن ذخیره شود بروید و دستور زیر را اجرا کنید:

ng new my-first-app

در طول نصب، CLI چند سوال از شما می‌پرسد:

  1. ? Would you like to add Angular routing? (آیا می‌خواهید مسیریابی اضافه کنید؟)
    فعلاً N (خیر) را بزنید (بعداً یاد می‌گیریم).
  2. ? Which stylesheet format would you like to use? (کدام فرمت استایل‌دهی؟)
    گزینه CSS را انتخاب کنید.

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

اجرای پروژه:

پس از اتمام نصب، وارد پوشه پروژه شوید و سرور توسعه را اجرا کنید:

cd my-first-app
ng serve --open

دستور ng serve سرور توسعه را اجرا می‌کند و گزینه --open (یا -o) مرورگر شما را به صورت خودکار باز می‌کند.

🌐 مرورگر شما باید آدرس http://localhost:4200 را باز کند و صفحه پیش‌فرض Angular را ببینید!

ویرایش اولین صفحه:

بیایید چیزی را تغییر دهیم تا مطمئن شویم همه چیز کار می‌کند.

  1. فایل src/app/app.component.html را در ویرایشگر کد خود باز کنید.
  2. تمام محتویات آن را پاک کنید.
  3. کد زیر را جایگزین کنید:
Hello Angular! 🚀


این اولین برنامه انگولار من است.

فایل را ذخیره کنید. مرورگر شما باید به صورت خودکار رفرش شود و تغییرات را نشان دهد. به این ویژگی Hot Reloading می‌گویند.

💡 نکته: سرور توسعه Angular تمام تغییرات فایل‌های شما را زیر نظر دارد و بلافاصله پس از ذخیره، نتیجه را در مرورگر به‌روزرسانی می‌کند.
✅ عالی! شما اولین برنامه Angular خود را ساختید و اجرا کردید!

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

تمرین: ساخت اولین Component Easy
سوال تمرین

🎯 تمرین: ساخت Component سفارشی

یک component جدید به نام WelcomeComponent بسازید که پیام خوش‌آمدگویی نمایش بده.

پاسخ تمرین
TYPESCRIPT 
import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  template: '<h1>Welcome to Angular!</h1>'
})
export class WelcomeComponent {}

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

درس قبلی درس بعدی