الدرس 6: مقدمة Angular | المستوى الرابع

تقدمك في المستوى الرابع 50%

📖 ما هو Angular ولماذا تختاره؟

Angular هو إطار عمل (Framework) شامل وقوي من تطوير Google لبناء تطبيقات ويب كبيرة ومعقدة. بخلاف React التي تُعتبر مجرد مكتبة للواجهات، Angular توفر حلاً متكاملاً يشمل التوجيه (Routing)، إدارة الحالة (State Management)، الحقن (Dependency Injection)، والاختبار - كل ذلك في إطار عمل واحد مترابط.

Angular مبنية على TypeScript، وهي نسخة مطورة من JavaScript تضيف الأنواع الثابتة (Static Typing) والبرمجة الموجهة للكائنات (OOP). ده بيخلّيها أكثر تنظيماً في المشاريع الكبيرة، لكنه بيضيف طبقة تعقيد للمبتدئين.

بنهاية هذا الدرس، هتعرف:

الفرق الجوهري بين React و Angular ومتى تختار كل واحد
كيف تنشئ مشروع Angular من الصفر باستخدام Angular CLI
هيكل الملفات في Angular والفرق عن React
أنواع الربط (Data Binding) في Angular وإزاي تستخدمها
التوجيهات (Directives) وإزاي تتحكم في عرض العناصر
الخدمات (Services) و Dependency Injection

💡 نصيحة: لو اتقنت React أولاً، هيكون تعلم Angular أسهل بكتير. Angular بتشارك مع React نفس المفاهيم الأساسية (Components, State, Props) لكن بأسماء وطريقة مختلفة.

🔄 React vs Angular: مقارنة شاملة

اختيار الإطار المناسب بيعتمد على حجم المشروع، خبرة الفريق، والمتطلبات التقنية. الجدول ده بيُلخّص الفروقات الرئيسية:

مقارنة شاملة بين React و Angular
الجانب	React	Angular
النوع	مكتبة UI فقط	إطار عمل كامل (Full Framework)
اللغة	JavaScript + JSX	TypeScript (إجباري)
منحنى التعلم	أسهل للمبتدئين	أكثر تعقيداً (TypeScript + OOP)
الأداء	سريع (Virtual DOM)	قوي للتطبيقات الكبيرة (Change Detection)
Routing	مكتبة منفصلة (React Router)	مدمجة في الإطار
State Management	Redux أو Context (منفصلة)	RxJS + Services (مدمجة)
Forms	HTML Forms + State يدوي	Reactive Forms و Template-driven Forms
Testing	Jest + React Testing Library (منفصل)	Jasmine + Karma (مدمج)
الشركة الداعمة	Meta (Facebook)	Google

🎯 القاعدة الذهبية: استخدم React للمشاريع الصغيرة والمتوسطة أو لو فريقك بيفضل المرونة. استخدم Angular للمشاريع الكبيرة (Enterprise) اللي محتاجة هيكل صارم ومعايير موحدة.

⚡ إنشاء مشروع Angular من الصفر

Angular بتستخدم أداة سطر أوامر اسمها Angular CLI (Command Line Interface). الأداة دي بتسهّل عليك إنشاء المشروع، إضافة المكونات، وبناء التطبيق للإنتاج. خليني نبدأ:

الخطوة 1: تثبيت Angular CLI

# تثبيت Angular CLI عالمياً على جهازك
npm install -g @angular/cli

# التحقق من الإصدار المثبت
ng version
        

الأمر npm install -g بيثبت Angular CLI على مستوى النظام، يعني تقدر تستخدم ng من أي مكان في الجهاز.

الخطوة 2: إنشاء مشروع جديد

# إنشاء مشروع جديد (هيسألك عن Routing و CSS Preprocessor)
ng new my-first-app
cd my-first-app
        

لما تشغل الأمر ده، Angular CLI هيسألك سؤالين:

Would you like to add Angular routing? اختار Yes لو هتحتاج تنقل بين صفحات.
Which stylesheet format? اختار CSS لو مبتدئ، أو SCSS لو عايز ميزات إضافية.

الخطوة 3: تشغيل سيرفر التطوير

# تشغيل سيرفر التطوير (Hot Reload)
ng serve

# سيتم فتح التطبيق تلقائياً على:
# http://localhost:4200
        

الأمر ng serve بيشغل سيرفر محلي مع Hot Reload - يعني أي تغيير تعمله في الكود هيظهر في المتصفح فوراً من غير ما تعيد تحميل الصفحة.

📁 فهم هيكل ملفات مشروع Angular

Angular بتفرض هيكل معين للملفات. ده ممكن يبقى مربك في الأول، لكنه بيساعد في تنظيم المشاريع الكبيرة. خليني نشرح كل ملف:

src/
├── app/                          // مجلد التطبيق الرئيسي
│   ├── app.component.ts          // منطق المكون (Class + Decorator)
│   ├── app.component.html        // قالب العرض (Template)
│   ├── app.component.css         // أنماط خاصة بالمكون
│   ├── app.component.spec.ts     // ملف الاختبار
│   └── app.module.ts             // الوحدة الرئيسية (تسجيل المكونات)
├── assets/                       // صور وملفات ثابتة
├── environments/                 // إعدادات البيئات (Dev vs Prod)
├── index.html                    // ملف HTML الرئيسي (نقطة الدخول)
├── main.ts                       // تشغيل التطبيق (Bootstrap)
└── styles.css                    // الأنماط العامة للتطبيق
        

⚠️ ملاحظة مهمة

عكس React اللي بيخلّيك حر في تنظيم الملفات، Angular بتفرض الهيكل ده. كل مكون لازم يكون مسجل في Module (declarations array) عشان يشتغل.

🧩 المكونات (Components) في Angular

مكون Angular بيتكون من 3 ملفات أساسية (وأحياناً 4 لو حسبت الاختبار):

.ts - المنطق (TypeScript Class)
.html - القالب (Template)
.css - الأنماط (Styles)

المكون بيتعرف باستخدام Decorator اسمه @Component، وهو دالة بتضيف metadata للClass.

// app.component.ts - ملف المنطق
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',                    // اسم الوسم اللي هنستخدمه في HTML
  templateUrl: './app.component.html',   // مسار ملف القالب
  styleUrls: ['./app.component.css']    // مصفوفة ملفات CSS
})
export class AppComponent {
  // خصائص (Properties) = State في React
  title = 'تطبيقي الأول';
  count = 0;
  items = ['HTML', 'CSS', 'JavaScript'];

  // دوال (Methods) = Functions في React
  increment() {
    this.count++;  // لازم نستخدم this في Angular (OOP)
  }

  addItem(item: string) {
    this.items.push(item);
  }
}
        

📝 الـ Template - قالب العرض في Angular

قالب Angular بيستخدم HTML عادي مع إضافات خاصة للربط بالبيانات. ده مختلف عن JSX في React اللي بيمزج JavaScript مع HTML.

<!-- app.component.html -->
<div class="container">
  <!-- Interpolation: عرض قيمة من المكون -->
  <h1>{{ title }}</h1>
  
  <p>العدد الحالي: {{ count }}</p>

  <!-- Event Binding: ربط حدث بالدالة -->
  <button (click)="increment()">زيادة العدد</button>

  <!-- Two-way Binding: ربط ثنائي للنماذج -->
  <input [(ngModel)]="title" />

  <!-- Structural Directive: تكرار العناصر -->
  <ul>
    <li *ngFor="let item of items">{{ item }}</li>
  </ul>

  <!-- Conditional Rendering: عرض بناءً على شرط -->
  <p *ngIf="count > 5">🎉 العدد أكبر من 5!</p>
</div>
        

🔍 شرح أنواع الربط (Data Binding):

النوع	الصيغة	الاتجاه	الاستخدام
Interpolation	`{{ value }}`	Component → Template	عرض نصوص وأرقام
Property Binding	`[property]="value"`	Component → Template	تعيين خصائص HTML
Event Binding	`(event)="handler()"`	Template → Component	معالجة النقرات والأحداث
Two-way Binding	`[(ngModel)]="value"`	↔️ الاتجاهين	النماذج والمدخلات

🎯 التوجيهات (Directives) في Angular

التوجيهات هي أوامر خاصة بتضيفها للـ Template عشان تتحكم في سلوك العناصر. Angular فيها نوعين:

Structural Directives: بتغير هيكل DOM (إضافة/حذف عناصر)
Attribute Directives: بتغير مظهر أو سلوك عنصر موجود

// *ngFor - تكرار العناصر (Structural)
<div *ngFor="let item of items; let i = index">
  {{i + 1}}: {{item}}
</div>

// *ngIf - الشرطية (Structural)
<div *ngIf="isLoggedIn; else guest">مرحباً بك</div>
<ng-template #guest>يرجى تسجيل الدخول</ng-template>

// *ngSwitch - حالات متعددة (Structural)
<div [ngSwitch]="status">
  <div *ngSwitchCase="'active'">🟢 نشط</div>
  <div *ngSwitchCase="'inactive'">🔴 غير نشط</div>
  <div *ngSwitchDefault>⚪ غير معروف</div>
</div>

// ngClass - إضافة/إزالة CSS classes (Attribute)
<div [ngClass]="{active: isActive, error: hasError}">
  محتوى ديناميكي
</div>

// ngStyle - تطبيق أنماط مباشرة (Attribute)
<div [ngStyle]="{color: textColor, fontSize: fontSize + 'px'}">
  نص بتنسيق ديناميكي
</div>
        

💡 ملاحظة: النجمة * قبل اسم التوجيه (زي *ngFor) بتعني إن التوجيه ده Structural - يعني بيغير هيكل DOM. من غير النجمة (زي [ngClass]) بيكون Attribute Directive.

⚙️ الخدمات (Services) و Dependency Injection

الخدمات (Services) هي فئات TypeScript بتعمل مهام محددة (زي جلب البيانات من API، إدارة الحالة، أو العمليات الحسابية). الميزة إنها قابلة للمشاركة بين أكتر من مكون.

Dependency Injection (DI) هو نمط تصميم في Angular بيسمح للمكونات "تطلب" الخدمات اللي تحتاجها بدل ما تخلقها بنفسها. Angular بتدير إنشاء وإعادة استخدام الكائنات تلقائياً.

// user.service.ts - خدمة لجلب بيانات المستخدمين
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'  // متاحة في كل التطبيق (Singleton)
})
export class UserService {
  // HttpClient بتُحقن تلقائياً (Dependency Injection)
  constructor(private http: HttpClient) { }

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>('https://jsonplaceholder.typicode.com/users');
  }

  createUser(userData: any): Observable<any> {
    return this.http.post('https://jsonplaceholder.typicode.com/users', userData);
  }
}
        

// user.component.ts - استخدام الخدمة في المكون
import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  users: any[] = [];
  loading = true;
  error = '';

  // Dependency Injection: Angular بتمرر UserService تلقائياً
  constructor(private userService: UserService) { }

  // ngOnInit بتشتغل لما المكون يتحمل (مثل useEffect في React)
  ngOnInit() {
    this.userService.getUsers().subscribe({
      next: (data) => {
        this.users = data;
        this.loading = false;
      },
      error: (err) => {
        this.error = 'فشل في جلب البيانات';
        this.loading = false;
      }
    });
  }
}
        

⚠️ ملاحظة عن RxJS و Observables

Angular بتستخدم RxJS لإدارة البيانات غير المتزامنة (Async). Observable هي كائن بيعمل Subscribe للبيانات. لازم تفهم subscribe و unsubscribe عشان تتجنب Memory Leaks.

⚠️ أخطاء شائعة في Angular وتجنبها

❌ الخطأ 1: نسيان تسجيل المكون في Module

المشكلة: المكون مش بيظهر وبتطلع خطأ في Console.

الحل: تأكد إن المكون موجود في مصفوفة declarations في app.module.ts.

❌ الخطأ 2: تعديل Properties مباشرة من Template

المشكلة: Angular بتستخدم One-way Data Flow افتراضياً. مش هتقدر تعدل State من Template.

الحل: استخدم Event Binding ودوال في المكون عشان تعدل البيانات.

❌ الخطأ 3: نسيان unsubscribe من Observables

المشكلة: Memory Leak لما المكون يُحذف لكن الـ Observable لسه شغال.

الحل: استخدم takeUntil أو async pipe في Template.

✅ متى تختار Angular؟

Angular مش مناسب لكل مشروع. خليني نلخّص متى يكون الاختيار الأمثل:

تطبيقات Enterprise كبيرة: لما يكون عندك 50+ شاشة وفريق من 10+ مطورين.
فريق عمل كبير: Angular بتفرض معايير صارمة (TypeScript، هيكل ملفات موحد) فالكود بيبقى متناسق.
صيانة طويلة الأجل: الكود المنظم بيسهل الصيانة بعد سنوات.
تطبيقات CRUD معقدة: Forms كتيرة، جداول بيانات، تقارير.
لو عايز كل شيء في إطار واحد: Routing, Forms, HTTP, Testing - كلها موجودة من غير مكتبات خارجية.

📊 إحصائية: حسب Stack Overflow Developer Survey 2025، Angular بتستخدم في 17% من المواقع الكبيرة، بينما React بتسيطر على 40%. لكن Angular بتتصدر في مشاريع Enterprise.

📚 دروس ذات صلة

❓ أسئلة شائعة عن Angular

هل Angular أصعب من React؟

نعم، Angular أصعب في البداية لأنها تتطلب فهم TypeScript، OOP، و RxJS. لكن بعد ما تتجاوز منحنى التعلم الأولي، هتلاقي إن الهيكل الصارم بيسهل العمل في المشاريع الكبيرة. React أسهل للمبتدئين لأنها بتعتمد على JavaScript العادي.

هل Angular ماتت بعد ظهور React؟

لا، Angular لسه قوية جداً في سوق العمل. شركات كبيرة زي Google، Microsoft، PayPal، و Forbes بتستخدم Angular. الفرق إن React بتسيطر على المشاريع الناشئة (Startups) بينما Angular بتسيطر على المؤسسات الكبيرة (Enterprise).

هل أحتاج أتعلم React قبل Angular؟

مش إجباري، لكنه مستحسن. React بتعلمك المفاهيم الأساسية (Components, State, Props) بطريقة أبسط. بعد React، هتلاقي Angular أسهل بكتير لأنك هتفهم المفاهيم ومحتاج بس تتعلم الصيغة الجديدة.

ما الفرق بين AngularJS و Angular؟

AngularJS (2010) هي النسخة القديمة المبنية على JavaScript. Angular (2+) هي إعادة بناء كاملة من الصفر باستخدام TypeScript. مفيش توافق بينهم - لو شغلت على AngularJS، لازم تتعلم Angular من جديد.

← الدرس السابق

🅰️ مقدمة في Angular: كل ما تحتاج معرفته قبل البدء