مرجع CLI
مرجع CLI در انگولار (Command Line Interface) یکی از قدرتمندترین ابزارهای توسعه‌دهندگان برای ساخت، مدیریت و بهینه‌سازی پروژه‌های مدرن تحت وب و SPA (برنامه‌های تک‌صفحه‌ای) است. CLI به عنوان ستون فقرات فرآیند توسعه در انگولار، امکان ایجاد سریع کامپوننت‌ها، سرویس‌ها، ماژول‌ها، پایپ‌ها، و سایر بخش‌های برنامه را فراهم می‌کند و از تکرار کارهای دستی جلوگیری می‌نماید. با استفاده از CLI، توسعه‌دهندگان می‌توانند ساختار پروژه را استاندارد، کدها را تمیز و کارایی برنامه را بالا نگه دارند.
CLI در زمانی به‌کار می‌رود که نیاز به ایجاد ساختارهای تکراری، اجرای تست‌ها، بیلد پروژه، و یا دیپلوی خودکار برنامه باشد. این ابزار به‌صورت مستقیم با مفاهیم کلیدی انگولار همچون کامپوننت‌ها، مدیریت وضعیت (state management)، جریان داده (data flow)، و چرخه‌حیات (lifecycle hooks) ارتباط دارد. مرجع CLI نه تنها نحوه اجرای دستورات را توضیح می‌دهد، بلکه نشان می‌دهد چگونه این دستورات می‌توانند چرخه توسعه را تسریع و خطاها را کاهش دهند.
در این فصل، یاد می‌گیرید چگونه از CLI برای ایجاد اجزای قابل‌استفاده مجدد، بهبود جریان داده در اپلیکیشن، مدیریت وضعیت و استقرار برنامه در محیط‌های تولیدی استفاده کنید. درک عمیق CLI در انگولار، مسیر شما را برای توسعه برنامه‌های بزرگ و ساختارمند تسهیل می‌کند.
مثال پایه
typescript// ایجاد یک کامپوننت ساده با استفاده از CLI و مدیریت وضعیت پایه
// دستور CLI: ng generate component counter
import { Component } from '@angular/core';
@Component({
selector: 'app-counter',
template: ` <div class="counter-box"> <h2>کامپوننت شمارنده</h2> <p>مقدار فعلی: {{ count }}</p> <button (click)="increment()">افزایش</button> <button (click)="decrement()">کاهش</button> </div>
`,
styles: [` .counter-box {
text-align: center;
background: #f3f3f3;
padding: 15px;
border-radius: 10px;
width: 250px;
margin: 0 auto;
}
`]
})
export class CounterComponent {
count = 0;
increment() {
this.count++;
}
decrement() {
if (this.count > 0) this.count--;
}
}کد بالا نمونه‌ای از استفاده‌ی CLI برای ایجاد یک کامپوننت ساده در انگولار است. با اجرای دستور ng generate component counter، CLI به‌صورت خودکار پوشه‌ی کامپوننت را با فایل‌های TypeScript، HTML، CSS و تست ایجاد می‌کند. این روش باعث کاهش خطای انسانی و حفظ ساختار منظم پروژه می‌شود.
در این پیاده‌سازی، متغیر count وضعیت محلی (local state) کامپوننت را مدیریت می‌کند و از طریق بایندینگ دوطرفه (interpolation) در قالب (template) نمایش داده می‌شود. با کلیک بر دکمه‌ها، متدهای increment و decrement فراخوانی شده و جریان داده به‌صورت یک‌طرفه (unidirectional data flow) در کامپوننت به‌روزرسانی می‌گردد.
این مثال نشان می‌دهد که چگونه CLI فرآیند ایجاد و یکپارچه‌سازی کامپوننت را ساده و استاندارد می‌سازد. همچنین، با جلوگیری از prop drilling و رعایت الگوی component-based architecture، توسعه‌دهنده می‌تواند به‌راحتی ماژولاریتی و قابلیت نگهداری کد را افزایش دهد. CLI به‌صورت خودکار این کامپوننت را به ماژول اصلی اضافه کرده و روند توسعه را تسهیل می‌کند.
مثال کاربردی
typescript// مثال کاربردی‌تر برای نمایش جریان داده و چرخه‌حیات با CLI
// دستور CLI: ng generate service data
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataSource = new BehaviorSubject<number>(0);
currentData = this.dataSource.asObservable();
updateData(value: number) {
this.dataSource.next(value);
}
}
// دستور CLI: ng generate component display
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-display',
template: ` <h3>نمایش داده</h3> <p>مقدار فعلی: {{ currentValue }}</p> <button (click)="changeValue()">تغییر مقدار</button>
`
})
export class DisplayComponent implements OnInit {
currentValue!: number;
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.currentData.subscribe(value => this.currentValue = value);
}
changeValue() {
this.dataService.updateData(this.currentValue + 5);
}
}Advanced انگولار Implementation
typescript// پیاده‌سازی پیشرفته با مدیریت خطا و بهینه‌سازی عملکرد
// دستور CLI: ng build --configuration production
import { Component, ErrorHandler, Injectable } from '@angular/core';
import { DataService } from './data.service';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: any) {
console.error('خطای برنامه:', error);
alert('مشکلی رخ داده است، لطفاً مجدداً تلاش کنید!');
}
}
@Component({
selector: 'app-root',
template: ` <div class="app-wrapper"> <app-display></app-display> </div>
`,
providers: [{ provide: ErrorHandler, useClass: GlobalErrorHandler }]
})
export class AppComponent {}در مرجع CLI، رعایت اصول بهترین شیوه‌ها (Best Practices) ضروری است. همیشه از نام‌گذاری شفاف و ساختار پوشه‌بندی استاندارد استفاده کنید تا نگهداری پروژه آسان‌تر شود. برای جلوگیری از مشکلاتی چون prop drilling، داده‌ها را از طریق سرویس‌ها و RxJS observables مدیریت کنید.
از تغییر مستقیم state پرهیز کرده و از روش‌های غیرمخرب (immutable updates) استفاده نمایید. همچنین، برای جلوگیری از رندرهای غیرضروری، از ChangeDetectionStrategy.OnPush در کامپوننت‌ها بهره ببرید. CLI به شما امکان می‌دهد تا با استفاده از دستوراتی مانند ng build --prod و ng test، برنامه را بهینه و قابل اطمینان نگه دارید.
برای امنیت، تنظیمات CLI را در فایل angular.json مدیریت کرده و از environment variables جهت تفکیک محیط‌ها (development/production) استفاده کنید. از ng lint جهت بررسی کیفیت کد استفاده نموده و خطاهای احتمالی را زود تشخیص دهید. رعایت این اصول در مرجع CLI باعث افزایش کارایی و پایداری اپلیکیشن در مقیاس بزرگ می‌شود.
📊 مرجع کامل
| انگولار Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| ng new | ایجاد پروژه جدید | ng new app-name | ng new shopApp | شروع سریع پروژه |
| ng serve | اجرای برنامه در لوکال | ng serve | ng serve --open | راه‌اندازی سرور محلی |
| ng generate component | ساخت کامپوننت | ng g c name | ng g c header | ایجاد خودکار فایل‌ها |
| ng generate service | ساخت سرویس | ng g s name | ng g s auth | پشتیبانی از DI |
| ng build | ساخت پروژه | ng build | ng build --prod | بیلد برای تولید |
| ng test | اجرای تست‌ها | ng test | ng test --watch=false | اجرای تست‌های یونیت |
| ng lint | بررسی کد | ng lint | ng lint app | تحلیل استاتیک کد |
| ng e2e | تست End-to-End | ng e2e | ng e2e shop-e2e | اجرای تست‌های جامع |
| ng add | افزودن پکیج جدید | ng add package | ng add @angular/material | افزودن وابستگی‌ها |
| ng update | به‌روزرسانی پکیج‌ها | ng update | ng update @angular/core | مدیریت نسخه‌ها |
| ng doc | نمایش مستندات | ng doc name | ng doc router | ارجاع به مستندات رسمی |
| ng version | نمایش نسخه‌ها | ng version | - | نمایش اطلاعات نسخه |
| ng deploy | دیپلوی پروژه | ng deploy | ng deploy firebase | انتشار در پلتفرم |
| ng config | تنظیم پیکربندی | ng config key value | ng config cli.warnings false | پیکربندی CLI |
| ng analytics | مدیریت تحلیل‌ها | ng analytics | ng analytics off | غیرفعال‌سازی تله‌متری |
📊 Complete انگولار Properties Reference
| Property | Values | Default | Description | انگولار Support |
|---|---|---|---|---|
| prefix | string | 'app' | پیشوند نام‌گذاری کامپوننت‌ها | v9+ |
| inlineStyle | boolean | false | قرار دادن CSS به‌صورت درون‌خطی | v8+ |
| inlineTemplate | boolean | false | قرار دادن قالب در فایل TS | v8+ |
| skipTests | boolean | false | عدم ایجاد فایل تست | v9+ |
| routing | boolean | true | افزودن ماژول مسیرها | v8+ |
| style | css, scss, sass, less | css | انتخاب سبک فایل‌ها | v9+ |
| strict | boolean | true | فعال‌سازی تایپینگ سخت‌گیرانه | v10+ |
| skipInstall | boolean | false | عدم نصب خودکار پکیج‌ها | v9+ |
| directory | string | - | محل ذخیره پروژه | v9+ |
| dryRun | boolean | false | شبیه‌سازی بدون اعمال تغییرات | v9+ |
| defaults | object | - | پیکربندی پیش‌فرض CLI | v10+ |
| verbose | boolean | false | نمایش جزئیات بیشتر در خروجی | v9+ |
خلاصه و گام‌های بعدی در انگولار:
در این بخش، با مفاهیم کلیدی مرجع CLI در انگولار آشنا شدید. یاد گرفتید چگونه از CLI برای تولید کامپوننت‌ها، سرویس‌ها، و بیلد برنامه استفاده کنید و ساختار پروژه خود را بهینه و قابل نگهداری سازید. CLI نه‌تنها سرعت توسعه را افزایش می‌دهد بلکه از بروز خطاهای ساختاری جلوگیری می‌کند.
برای ادامه مسیر، پیشنهاد می‌شود مباحث پیشرفته‌تری مانند مدیریت وضعیت با NgRx، بارگذاری تنبل (Lazy Loading)، بهینه‌سازی عملکرد، و استقرار خودکار با ابزارهای DevOps را بیاموزید. تمرین مداوم با CLI، تسلط شما را در معماری و استقرار پروژه‌های Enterprise افزایش می‌دهد.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود