فهرست سرفصل‌های Angular
خانه (Home) معرفی (Intro) شروع سریع (Get Started) اولین اپ (First App) قالب ها (Templates) جای گذاری (Interpolation) متغیرهای ارجاعی (Reference Variables) ناوبری امن از نال (?.) (Null-Safe Navigation (?.)) دستورهای ساختاری (Structural Directives) ngTemplateOutlet (ngTemplateOutlet) عبارات و $event (Statements and $event) نام مستعار (Alias) پایپ ها (|) (Pipes (|)) بایندینگ ویژگی (Attribute Binding) TrackBy (TrackBy) کامپوننت ها (Components) دیتا بایندینگ (Data Binding) دایرکتیوها (Directives) رویدادها (Events) رندر شرطی (Conditional) لیست ها (Lists) فرم ها (Forms) روتر (Router) سرویس ها و تزریق وابستگی (Services & DI) کلاینت HTTP (HTTP Client) پایپ ها (Pipes) قلاب های چرخه حیات (Lifecycle Hooks) استایل دهی (Styling) راه اندازی برنامه (App Bootstrap) کنترل جریان (Control Flow) سیگنال ها (Signals) تشخیص تغییر (Change Detection) کامپوننت های پویا (Dynamic Comp) تزریق وابستگی پیشرفته (Advanced DI) روتر پیشرفته (Router Advanced) اینترسپتورهای HTTP (HTTP Interceptors) فرم های پیشرفته (Forms Advanced) مدیریت وضعیت (State Management) انیمیشن ها (Animations) تست (Testing) امنیت (Security) SSR و هیدریشن (SSR & Hydration) کامپایلر (Compiler) تمرین ها (Exercises) آزمون (Quiz) سرور (Server)
نتیجه‌ای برای جستجو یافت نشد.
Angular

Angular — شروع سریع (Get Started)

آخرین بروزرسانی: 1404/08/21

شروع سریع (Get Started)

در این صفحه «شروع سریع انگولار» را جلو می رویم. اول Node.js را چک می کنیم. سپس ابزارها را نصب می کنیم. بعد پروژه می سازیم و اجرا می کنیم. همه چیز مرحله ای و ساده است.

پیش نیاز: نصب Node.js و npm

انگولار به npm نیاز دارد. npm با Node.js نصب می شود. npm یعنی مدیر بسته ها در Node.js. مثل فروشگاه اپ است.

نسخه Node.js را چک کن:

node -v

مشاهده در ادیتور

نمونه خروجی می تواند v20.x.x باشد. نسخه LTS مناسب تر است.

نسخه npm را هم چک کن:

npm -v

مشاهده در ادیتور

نصب Angular CLI

CLI یعنی رابط خط فرمان (Command Line Interface). این ابزار پروژه می سازد، بیلد می کند، و سرو اجرا می کند.

CLI را سراسری نصب کن تا دستور ng در دسترس باشد:

npm install -g @angular/cli

مشاهده در ادیتور

نکته: اگر خطای دسترسی دیدی، از npx استفاده کن یا ترمینال را با دسترسی بالاتر اجرا کن.

راستی آزمایی نصب CLI

نسخه ها را ببین تا همه چیز درست باشد:

ng version

مشاهده در ادیتور

این دستور نسخه Angular CLI، Node و npm را نمایش می دهد. PATH یعنی لیست پوشه هایی که سیستم برای یافتن دستورات می گردد.

ساخت پروژه جدید

یک پروژه با نام my-angular-app بساز:

ng new my-angular-app

مشاهده در ادیتور

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

نکته: برای شروع، CSS را انتخاب کن. SSR را فعلاً «No» بزن. Zoneless را فعلاً «No» بزن. بقیه گزینه ها پیش فرض بمانند.

اگر CLI را سراسری نمی خواهی، از npx استفاده کن:

npx @angular/cli@latest new my-angular-app

مشاهده در ادیتور

اجرای برنامه

به پوشه پروژه برو و سرو محلی را اجرا کن:

cd my-angular-app
ng serve

مشاهده در ادیتور

اولین بیلد کمی طول می کشد. خروجی موفق یعنی همه چیز آماده است. پیش فرض روی http://localhost:4200 اجرا می شود.

می خواهی مرورگر خودکار باز شود؟ از این سوییچ استفاده کن:

ng serve --open

مشاهده در ادیتور

گام های عملی سریع (شروع سریع انگولار)

  1. Node.js را نصب یا به روز کن.
  2. نسخه node و npm را چک کن.
  3. Angular CLI را نصب یا از npx استفاده کن.
  4. پروژه جدید با نام دلخواه بساز.
  5. با ng serve پروژه را اجرا کن.

جمع بندی سریع

  • npm همراه Node.js است.
  • CLI پروژه را می سازد و اجرا می کند.
  • ng version سلامت نصب را نشان می دهد.
  • ng new پروژه پایه می سازد.
  • ng serve برنامه را محلی اجرا می کند.