جاري التحميل...

مرجع CLI

مرجع CLI في أنجولار يُعد أحد أهم الأدوات الأساسية التي تمكّن المطورين من إنشاء وإدارة التطبيقات بشكل فعّال ومتسق. CLI (Command Line Interface) في أنجولار هو واجهة سطر أوامر توفر مجموعة من الأوامر القوية التي تُبسّط عمليات التطوير، مثل إنشاء المكونات، والخدمات، والوحدات، والأنابيب، واختبار الأداء، وبناء المشروع للإنتاج. تكمن أهمية CLI في كونه يُوحّد بيئة التطوير ويضمن الالتزام بالمعايير القياسية لأنجولار، مما يسهل الصيانة على المدى الطويل ويساعد في إدارة التعقيد المتزايد في تطبيقات الويب الحديثة وSPAs.
باستخدام CLI، يمكن للمطورين التركيز على منطق المكونات (Component Logic) بدلاً من الانشغال بإعدادات البناء أو تكوين البيئة. يوفّر CLI إمكانيات مثل توليد المكونات مع إدارة الحالة (State Management) وتنظيم تدفق البيانات (Data Flow) والتعامل مع دورة حياة المكونات (Lifecycle Hooks). من خلال هذا المرجع، سيتعلم القارئ كيفية استخدام CLI لإنشاء مشاريع أنجولار من الصفر، إدارة الوحدات والمكونات، تنفيذ أوامر البناء والاختبار، وتحسين الأداء والإنتاج.
يُعتبر CLI أداة محورية في تطوير تطبيقات ويب تفاعلية وحديثة باستخدام أنجولار، حيث يربط المفاهيم النظرية بالممارسات العملية لتحقيق أعلى إنتاجية وكفاءة في بيئة التطوير.

مثال أساسي

typescript

TYPESCRIPT Code

// إنشاء مشروع جديد باستخدام CLI
// الأمر: ng new my-angular-app
// إنشاء مكون جديد داخل المشروع
// الأمر: ng generate component user-profile

// app/user-profile/user-profile.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-user-profile',
template: `       <div class="profile">         <h2>{{ user.name }}</h2>         <p>البريد الإلكتروني: {{ user.email }}</p>         <button (click)="updateName()">تحديث الاسم</button>       </div>
`,
styles: [`.profile { padding: 10px; border: 1px solid #ccc; }`]
})
export class UserProfileComponent {
user = { name: 'محمد علي', email: '[[email protected]](mailto:[email protected])' };

updateName() {
this.user.name = 'محمد المطور';
}
}

// app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { UserProfileComponent } from './user-profile/user-profile.component';

@NgModule({
declarations: [AppComponent, UserProfileComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule {}

الكود أعلاه يوضح كيفية إنشاء مشروع أنجولار باستخدام CLI ثم توليد مكون جديد يدعى UserProfileComponent. عند تنفيذ الأمر ng new، يقوم CLI بإعداد هيكل المشروع كاملاً، بما في ذلك التهيئة، حزم NPM، وإعدادات البناء. بعد ذلك، باستخدام الأمر ng generate component user-profile، يتم إنشاء مجلد مخصص للمكون مع ملفاته الأساسية (HTML، CSS، TS، Spec).
المكون المولد يعبّر عن مبدأ “component-based thinking” في أنجولار، حيث يتم فصل المنطق عن العرض، ما يسهل إعادة الاستخدام والاختبار. الدالة updateName توضح إدارة الحالة المحلية للمكون (Local State Management) بشكل تفاعلي، مما يبرز مفهوم تدفق البيانات أحادي الاتجاه في أنجولار.
تُظهر هذه العملية التكامل بين CLI ودورة حياة التطوير في أنجولار، بدءًا من الإنشاء وحتى التخصيص. عند تشغيل التطبيق، يتم تحميل AppModule وهو الجذر الذي يحتوي على تعريفات المكونات والوحدات. هذه البنية تتيح مرونة عالية في التوسع وتطبيق أنماط مثل OnPush للتقليل من إعادة التصيير غير الضرورية، وتحسين الأداء في تطبيقات SPAs.

مثال عملي

typescript

TYPESCRIPT Code

// مثال أكثر تقدمًا يوضح إدارة البيانات وتفاعل دورة الحياة
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { UserService } from '../services/user.service';

@Component({
selector: 'app-user-dashboard',
template: `       <div *ngIf="userData">         <h3>مرحبًا، {{ userData.name }}</h3>         <p>عدد الإشعارات: {{ notifications }}</p>       </div>
`
})
export class UserDashboardComponent implements OnInit, OnDestroy {
userData: any;
notifications = 0;
private subscription!: Subscription;

constructor(private userService: UserService) {}

ngOnInit() {
this.subscription = this.userService.getUserData().subscribe(data => {
this.userData = data;
this.notifications = data.notifications;
});
}

ngOnDestroy() {
if (this.subscription) this.subscription.unsubscribe();
}
}

// user.service.ts
import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
getUserData() {
return of({ name: 'ليلى', notifications: 5 });
}
}

Advanced أنجولار Implementation

typescript

TYPESCRIPT Code

// تطبيق متقدم يوضح استخدام CLI لإدارة الوحدات والأداء
// الأمر: ng generate module dashboard --route dashboard --module app.module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HttpClientModule } from '@angular/common/http';

const routes: Routes = [{ path: '', component: DashboardComponent }];

@NgModule({
declarations: [DashboardComponent],
imports: [CommonModule, RouterModule.forChild(routes), HttpClientModule],
})
export class DashboardModule {}

// dashboard.component.ts
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
selector: 'app-dashboard',
template: `       <h2>لوحة التحكم</h2>       <p>أداء النظام محدث تلقائيًا</p>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent {}

أفضل الممارسات في أنجولار تتضمن اتباع مبدأ التقسيم إلى مكونات صغيرة وقابلة لإعادة الاستخدام، مع استخدام CLI لتوليدها بطريقة موحدة. يجب إدارة الحالة باستخدام Services أو مكتبات مثل NgRx لتجنب “prop drilling” والاعتماد على Observables لتدفق البيانات بكفاءة.
من الأخطاء الشائعة التي يجب تجنبها: تغيير الحالة مباشرة دون إشعار أنجولار، استخدام التحديثات المكثفة التي تؤدي إلى إعادة التصيير المتكرر، وعدم تنظيف الاشتراكات مما يسبب تسرب الذاكرة.
في سياق CLI، يجب التأكد من استخدام أوامر البناء الصحيحة (ng build --prod) وإدارة التكوينات (angular.json) بدقة. لتحسين الأداء، يمكن تفعيل Lazy Loading للوحدات وتأخير تحميل الموارد الثقيلة.
أما بالنسبة للأمان، فيجب تفعيل Content Security Policy، واستخدام HttpInterceptor لمعالجة الطلبات بأمان.
تساعد CLI أيضًا في عمليات التصحيح (Debugging) عبر أوامر مثل ng test و ng lint، مما يعزز جودة الكود قبل النشر.

📊 المرجع الشامل

أنجولار Element/Method	Description	Syntax	Example	Notes
ng new	إنشاء مشروع أنجولار جديد	ng new <project-name>	ng new myApp	ينشئ هيكلًا كاملاً للمشروع
ng generate component	توليد مكون جديد	ng g c <name>	ng g c login	يولد أربعة ملفات أساسية للمكون
ng generate service	توليد خدمة	ng g s <name>	ng g s user	ينشئ خدمة مشتركة قابلة للحقن
ng build	بناء المشروع للإنتاج	ng build --prod	ng build --configuration production	يحسن الأداء
ng serve	تشغيل الخادم المحلي	ng serve	ng serve --port 4300	يشغل التطبيق محليًا
ng test	تشغيل اختبارات الوحدة	ng test	ng test --code-coverage	للتأكد من جودة الكود
ng lint	تحليل الكود	ng lint	ng lint --fix	يصحح التنسيق البرمجي
ng add	إضافة مكتبة جديدة	ng add <package>	ng add @angular/material	للتكامل مع مكتبات رسمية
ng update	تحديث الإصدارات	ng update	ng update @angular/core	لتحديث المشروع
ng deploy	نشر التطبيق	ng deploy	ng deploy --base-href=/app/	يدعم النشر التلقائي
ng e2e	اختبار شامل للتطبيق	ng e2e	ng e2e myApp	لتنفيذ اختبارات التفاعل
ng generate module	توليد وحدة جديدة	ng g m <name>	ng g m dashboard	للتقسيم المنطقي
ng generate pipe	توليد أنبوب	ng g p <name>	ng g p capitalize	لتنسيق النصوص
ng config	إدارة إعدادات CLI	ng config <jsonPath> <value>	ng config cli.defaultCollection	لتخصيص الإعدادات

📊 Complete أنجولار Properties Reference

Property	Values	Default	Description	أنجولار Support
changeDetection	Default, OnPush	Default	تحديد استراتيجية التصيير	v2+
encapsulation	Emulated, ShadowDom, None	Emulated	تحديد نمط الكبسلة	v2+
strictTemplates	true/false	false	تشغيل التحقق الصارم للقوالب	v9+
aot	true/false	true	تمكين التحويل المسبق	v8+
optimization	true/false	true	تحسين الأداء للبناء	v10+
outputHashing	none, all, media, bundles	all	تحكم في التسمية بعد البناء	v6+
baseHref	string	/	تحديد المسار الأساسي للتطبيق	v5+
deployUrl	string	/	مسار نشر الموارد	v6+
sourceMap	true/false	false	توليد خرائط التصحيح	v7+
vendorChunk	true/false	true	تحكم في تقسيم الحزم	v8+
extractCss	true/false	true	فصل CSS من JS	v9+
budgets	array	[]	تحكم في حجم الحزم	v10+

الخلاصة والخطوات التالية في أنجولار:
تعلم مرجع CLI في أنجولار يُعتبر خطوة أساسية لأي مطور يرغب في بناء تطبيقات عالية الأداء وقابلة للتوسع. CLI ليس مجرد أداة توليد، بل هو نظام متكامل لإدارة دورة حياة التطوير بدءًا من الإنشاء وحتى النشر.
من خلال فهم عميق لأوامر CLI، يصبح المطور قادرًا على إنشاء مكونات ووحدات بكفاءة، التحكم في تدفق البيانات وإدارة الحالة بسهولة، وتحسين الأداء بشكل احترافي.
الخطوة التالية هي دراسة المواضيع المتقدمة مثل: Lazy Loading، إدارة الحالة باستخدام NgRx، وتحسين تجربة المستخدم عبر Preloading Strategies.
كما يُنصح بتعلم بناء بيئات مخصصة باستخدام angular.json وفهم آلية الـSchematics في CLI لتخصيص التوليد البرمجي.
باستخدام CLI بفعالية، يمكنك الانتقال من كتابة الأكواد إلى بناء بنى تطبيقية متكاملة تتوافق مع المعايير المؤسسية في تطوير تطبيقات SPAs الحديثة.

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة

مرجع CLI

شارك هذا الدرس

مثال أساسي

مثال عملي

Advanced أنجولار Implementation

📊 المرجع الشامل

📊 Complete أنجولار Properties Reference

مصطلحات البحث ذات الصلة

🧠 اختبر معرفتك

اختبر معرفتك

📝 التعليمات

🚧 الدورة قادمة قريباً

Course Name

احصل على إشعار عند التوفر

متوفر الآن

Coming Soon

Course Name