راه‌اندازی local environment و workspace

این guide توضیح می‌دهد چطور environment خود را برای Angular development با استفاده از Angular CLI setup کنید. این راهنما شامل اطلاعاتی درباره نصب CLI، ساخت workspace اولیه و starter app، و اجرای local آن app برای بررسی setup شماست.

قبل از شروع

برای استفاده از Angular CLI، بهتر است با موارد زیر آشنا باشید:

همچنین باید با استفاده از ابزارهای command line interface یا CLI آشنا باشید و درک کلی از command shellها داشته باشید. دانستن TypeScript مفید است، اما الزامی نیست.

Dependencyها

برای نصب Angular CLI روی سیستم local خود، باید Node.js را نصب کنید. Angular CLI از Node و package manager همراه آن، یعنی npm، برای نصب و اجرای JavaScript toolها خارج از browser استفاده می‌کند.

Node.js را دانلود و نصب کنید، که npm CLI را هم شامل می‌شود. Angular به نسخه‌ای از Node.js نیاز دارد که active LTS یا maintenance LTS باشد. برای اطلاعات بیشتر، guide مربوط به version compatibility در Angular را ببینید.

نصب Angular CLI

برای نصب Angular CLI، یک terminal window باز کنید و command زیر را اجرا کنید:

npm install -g @angular/cli

pnpm install -g @angular/cli

yarn global add @angular/cli

bun install -g @angular/cli

PowerShell execution policy

روی کامپیوترهای Windows client، اجرای PowerShell scriptها به‌صورت پیش‌فرض disabled است؛ بنابراین command بالا ممکن است با error شکست بخورد. برای اجازه دادن به اجرای PowerShell scriptها، که برای npm global binaryها لازم است، باید execution policy زیر را تنظیم کنید:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

پیامی را که بعد از اجرای command نمایش داده می‌شود با دقت بخوانید و دستورالعمل‌ها را دنبال کنید. مطمئن شوید اثرات تنظیم execution policy را می‌فهمید.

Unix permissionها

در بعضی setupهای شبیه Unix، global scriptها ممکن است متعلق به root user باشند؛ بنابراین command بالا ممکن است با permission error شکست بخورد. برای اجرای command به‌عنوان root user از sudo استفاده کنید و وقتی prompt شد password خود را وارد کنید:

sudo npm install -g @angular/cli

sudo pnpm install -g @angular/cli

sudo yarn global add @angular/cli

sudo bun install -g @angular/cli

مطمئن شوید اثرات اجرای commandها به‌عنوان root را می‌فهمید.

ساخت workspace و application اولیه

شما appها را در context یک Angular workspace توسعه می‌دهید.

برای ساخت یک workspace جدید و starter app اولیه، command مربوط به CLI یعنی ng new را اجرا کنید و نام my-app را بدهید، همان‌طور که اینجا نشان داده شده است؛ سپس به promptهای مربوط به featureهایی که باید include شوند پاسخ دهید:

ng new my-app

Angular CLI packageهای npm لازم برای Angular و dependencyهای دیگر را نصب می‌کند. این کار ممکن است چند دقیقه طول بکشد.

CLI یک workspace جدید و یک welcome app کوچک را در دایرکتوری جدیدی با همان نام workspace می‌سازد که آماده اجراست. به دایرکتوری جدید بروید تا commandهای بعدی از همین workspace استفاده کنند.

cd my-app

اجرای application

Angular CLI یک development server دارد تا app خود را به‌صورت local build و serve کنید. command زیر را اجرا کنید:

ng serve --open

command مربوط به ng serve server را اجرا می‌کند، فایل‌های شما را watch می‌کند، و هنگام تغییر آن فایل‌ها app را rebuild و browser را reload می‌کند.

option مربوط به --open یا فقط -o به‌صورت خودکار browser شما را روی http://localhost:4200/ باز می‌کند تا application generated را ببینید.

Workspaceها و project fileها

command مربوط به ng new یک folder مربوط به Angular workspace می‌سازد و یک application جدید داخل آن generate می‌کند. یک workspace می‌تواند چند application و library داشته باشد. application اولیه‌ای که command مربوط به ng new می‌سازد، در root directory مربوط به workspace قرار دارد. وقتی یک application یا library اضافی در workspace موجود generate می‌کنید، به‌صورت پیش‌فرض داخل subfolder مربوط به projects/ قرار می‌گیرد.

یک application تازه generate شده شامل source fileهای root component و template است. هر application یک folder به نام src دارد که componentها، data و assetهای آن را شامل می‌شود.

می‌توانید فایل‌های generated را مستقیماً edit کنید، یا با CLI commandها به آن‌ها اضافه کنید و آن‌ها را modify کنید. از command مربوط به ng generate برای اضافه کردن فایل‌های جدید برای componentها، directiveها، pipeها، serviceها و موارد دیگر استفاده کنید. commandهایی مثل ng add و ng generate، که applicationها و libraryها را می‌سازند یا روی آن‌ها عمل می‌کنند، باید از داخل یک workspace اجرا شوند. در مقابل، commandهایی مثل ng new باید خارج از workspace اجرا شوند چون workspace جدیدی می‌سازند.

قدم‌های بعدی

• درباره file structure و configuration مربوط به workspace generated بیشتر یاد بگیرید.

• application جدید خود را با ng test test کنید.

• boilerplateهایی مثل componentها، directiveها و pipeها را با ng generate generate کنید.

• application جدیدتان را با ng deploy deploy کنید و آن را در دسترس کاربران واقعی قرار دهید.

• end-to-end testهای application خود را با ng e2e setup و اجرا کنید.