اولین اپ (First App)
اینجا «اولین اپ انگولار» را می سازیم. محیط آماده است. حالا گام به گام پیش می رویم. اول ریشه را می سازیم. سپس میزبان را تنظیم می کنیم. بعد هم یک داده را Bind می کنیم.
گام 1: ویرایش src/main.ts
در انگولار 20، اپ با یک کامپوننت مستقل بوت می شود. کامپوننت (Component) یعنی کلاس کنترل کننده نما. نما همان قالب HTML است.
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `<h1>Hello, World!</h1>`
})
class App {
}
bootstrapApplication(App);
نکته: با اجرای ng serve ذخیره که شد، مرورگر خودکار تازه می شود.
گام 2: عنصر میزبان در index.html
انگولار در جایی که سلکتور باشد، رندر می کند. سلکتور یعنی نام برچسب کامپوننت. اینجا سلکتور app-root است. برچسب را داخل <body> قرار بده.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Angular App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Host element -->
<app-root></app-root>
</body>
</html>
نکته: تگ <base href="/"> را نگه دار. بعداً روتینگ درست کار می کند.
گام 3: اتصال داده با Interpolation
یک ویژگی بساز و با Interpolation نمایش بده. Interpolation یعنی گذاشتن مقدار متغیر داخل قالب.
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `<h1>Hello, {{ name }}!</h1>`
})
class App {
name = 'Angular 20';
}
bootstrapApplication(App);
نکته: عبارت ها را ساده نگه دار. در قالب، از ویژگی ها استفاده کن.
ساختار پوشه های پروژه
چند فایل مهم را بشناس. سپس راحت تر توسعه می دهی.
src/main.ts؛ بوت باbootstrapApplication.src/app/؛ محل افزودن کامپوننت ها و قابلیت ها.src/index.html؛ میزبان با<app-root>.src/styles.css؛ استایل های سراسری.angular.jsonوpackage.json؛ پیکربندی و وابستگی ها.
گام های عملی کوتاه
- کد گام 1 را وارد کن.
- تگ
app-rootرا بررسی کن. - ویژگی
nameرا اضافه کن. - با
ng serveنتیجه را ببین. - به قالب ها ادامه بده.
پیوندهای داخلی
اگر هنوز آماده نیستی، به شروع سریع انگولار برگرد. سپس فصل قالب ها را باز کن.
جمع بندی سریع
- کامپوننت ریشه در
main.tsبوت می شود. app-rootمیزبان رندر است.- Interpolation متن را پویا می کند.
<base href="/">برای روتینگ لازم است.- قدم به قدم جلو برو و تست کن.