تعلم أنغولار من الصفر للمبتدئين

في هذا النمط، تقوم بـ:

1. البحث عن عنصر في الـ DOM
2. إنشاء عناصر جديدة يدويًا
3. إضافة مستمعي أحداث (Event Listeners)
4. تحديث الـ DOM يدويًا في كل مرة

طريقة Angular (Declarative)

بـ Angular، تستخدم طريقة Declarative (وصفية). تصف ما تريده وتترك Angular تتولى الباقي.

// مثال على Angular (Declarative)
export class AppComponent {
  count = 0;
  
  increment() {
    this.count++;
  }
}

<!-- القالب (Template) -->
<h1>{{ count }}</h1>
<button (click)="increment()">زيادة</button>

الفرق الرئيسي:

• في JavaScript: تغيّر الـ DOM مباشرة
• في Angular: تغيّر البيانات فقط، وتترك Angular تحدّث الـ DOM تلقائيًا

بنية تطبيق Angular

مقارنة مع JavaScript التقليدي

عند بناء تطبيق بـ JavaScript النقي، قد تكون البنية كالتالي:

project/
├── index.html
├── style.css
└── main.js

مع نمو التطبيق، تصبح البنية أكثر تعقيدًا:

project/
├── index.html
├── styles/
│   └── style.css
├── scripts/
│   ├── header.js
│   ├── article.js
│   ├── comments.js
│   └── api.js

بنية Angular

في Angular، يتم تنظيم الملفات بطريقة مختلفة:

src/
├── app/
│   ├── components/
│   │   ├── button/
│   │   └── card/
│   ├── services/
│   │   └── api.service.ts
│   ├── features/
│   └── templates/
├── index.html
└── styles.css

العناصر الرئيسية:

إعداد البيئة

تحميل Node.js

الخطوة الأولى هي تحميل Node.js من الموقع الرسمي.

1. زر الموقع: https://nodejs.org
2. اختر إما LTS (الإصدار المستقر) أو Latest
3. اختر نظام التشغيل الخاص بك (Windows, Linux, macOS)

نصيحة: استخدم nvm أو fnm لإدارة إصدارات Node.js بسهولة.

التحقق من التثبيت

بعد التثبيت، افتح Terminal وأدخل:

node --version
npm --version

يجب أن ترى إصدار Node.js و npm:

v22.10.0
10.9.0

ما هو npm؟

npm هو مدير الحزم (Package Manager). يسمح لك بتحميل مكتبات وأدوات مختلفة.

فكّر به كمستودع حيث يمكنك البحث عن حزم وتحميلها:

npm search react

تثبيت Angular CLI

قم بتثبيت أداة سطر الأوامر الخاصة بـ Angular بشكل عام:

npm install -g @angular/cli

للتحقق من التثبيت:

ng version

إنشاء أول تطبيق Angular

أنشئ مشروع جديد:

ng new my-first-app

ستظهر خيارات - اختر CSS للأسلوب والـ No لـ server-side rendering.

انتقل إلى مجلد المشروع:

cd my-first-app

شغّل الخادم:

ng serve

افتح المتصفح على: http://localhost:4200

فهم بنية المشروع

عندما يتم إنشاء المشروع، يحويل Angular كل ملفات TypeScript إلى JavaScript:

ng serve

ما يحدث خلف الكواليس:

• تحويل TypeScript إلى JavaScript
• دمج جميع الملفات
• تشغيل التطبيق في المتصفح

Hot Reload

عند حفظ ملف، يحدّث المتصفح نفسه تلقائيًا دون الحاجة لإعادة تشغيل الخادم.

المكونات (Components)

ما هو المكون؟

المكون هو جزء من واجهة المستخدم يمكن إعادة استخدامه.

// مثال: مكون زر
import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  template: '<button>اضغط هنا</button>',
  styles: ['button { padding: 10px; }']
})
export class ButtonComponent {}

استخدام المكون

<app-button></app-button>

الربط الأحادي والثنائي (Binding)

Interpolation (الربط الأحادي)

لعرض البيانات في القالب:

export class AppComponent {
  name = 'أحمد';
  age = 25;
}

<h1>اسمي {{ name }}</h1>
<p>عمري {{ age }} سنة</p>

Two-Way Binding (الربط الثنائي)

استخدم ngModel لربط البيانات بالاتجاهين:

أولاً، استورد FormsModule:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  imports: [FormsModule]
})
export class MyComponent {}

بعد ذلك، استخدم ngModel:

export class AppComponent {
  username = '';
}

<input [(ngModel)]="username" />
<p>مرحبًا {{ username }}</p>

مجرد أن تكتب في الـ input، سيتحدّث الـ username تلقائيًا.

الإشارات (Signals)

ما هي الإشارة؟

الإشارة هي متغير تفاعلي. عندما تتغير قيمته، يعرف Angular تلقائيًا أن يحدّث الواجهة.

استورد signal:

import { Component } from '@angular/core';
import { signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html'
})
export class CounterComponent {
  count = signal(0);
  
  increment() {
    this.count.update(value => value + 1);
  }
}

لقراءة قيمة الإشارة، استدعها كدالة:

<h1>{{ count() }}</h1>
<button (click)="increment()">زيادة</button>

الفرق بين set و update

// set - تعيين مباشر
this.count.set(10);

// update - تحديث بناءً على القيمة السابقة
this.count.update(value => value + 1);

المكونات المحسوبة (Computed)

استخدم computed لإنشاء قيم مشتقة من الإشارات:

import { Component } from '@angular/core';
import { signal, computed } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  count = signal(5);
  
  // يتحدّث تلقائيًا عند تغير count
  doubled = computed(() => this.count() * 2);
}

<p>العد: {{ count() }}</p>
<p>الضعف: {{ doubled() }}</p>

عندما تتغير count، تُحسب doubled مرة أخرى تلقائيًا.

الأنماط (Services)

إنشاء خدمة

الخدمات تحفظ البيانات والمنطق المشترك:

ng generate service services/task

import { Injectable } from '@angular/core';
import { signal } from '@angular/core';

interface Task {
  id: number;
  title: string;
  completed: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks = signal<Task[]>([
    { id: 1, title: 'تعلم Angular', completed: false },
    { id: 2, title: 'بناء مشروع', completed: false }
  ]);

  getTasks() {
    return this.tasks.asReadonly();
  }

  addTask(title: string) {
    this.tasks.update(tasks => [
      ...tasks,
      { id: Math.random(), title, completed: false }
    ]);
  }
}

استخدام الخدمة

import { Component } from '@angular/core';
import { inject } from '@angular/core';
import { TaskService } from './services/task.service';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html'
})
export class TaskListComponent {
  taskService = inject(TaskService);
  tasks = this.taskService.getTasks();
}

التوجيه (Routing)

تحديد الطرق

إنشاء ملف الطرق:

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';

export const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

استخدام RouterOutlet

في المكون الرئيسي، أضف <router-outlet>:

<nav>
  <a routerLink="/">الرئيسية</a>
  <a routerLink="/about">عن البرنامج</a>
</nav>

<router-outlet></router-outlet>

طرق ديناميكية

للطرق التي تحتوي على معاملات:

export const appRoutes: Routes = [
  { path: 'task/:id', component: TaskDetailsComponent }
];

في المكون:

import { Component, OnInit, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { signal } from '@angular/core';

@Component({
  selector: 'app-task-details',
  templateUrl: './task-details.component.html'
})
export class TaskDetailsComponent implements OnInit {
  private route = inject(ActivatedRoute);
  taskId = signal<string | null>(null);

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.taskId.set(id);
    }
  }
}

النماذج التفاعلية (Reactive Forms)

إنشاء نموذج

أولاً، استورد ReactiveFormsModule:

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  imports: [ReactiveFormsModule]
})
export class ContactFormComponent {}

أنشئ نموذج:

import { Component, inject } from '@angular/core';
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  imports: [ReactiveFormsModule]
})
export class ContactFormComponent {
  private fb = inject(FormBuilder);

  contactForm = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(3)]],
    message: ['', [Validators.required, Validators.minLength(10)]]
  });

  onSubmit() {
    if (this.contactForm.valid) {
      console.log(this.contactForm.value);
    }
  }
}

القالب

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" type="text" />
  
  <textarea formControlName="message"></textarea>
  
  <button [disabled]="contactForm.invalid">إرسال</button>
</form>

بناء مشروع مدير المهام (Task Manager)

سنبني الآن مشروعًا كاملاً يجمع كل ما تعلمناه. المشروع سيحتوي على:

• إضافة مهام جديدة
• حذف المهام
• تصفية المهام (الكل، النشطة، المكتملة)
• عرض تفاصيل المهمة
• وضع علامة على المهام كمكتملة

هيكل المشروع سيكون كالتالي:

src/app/
├── pages/
│   ├── home/
│   ├── task-list/
│   ├── task-details/
│   └── task-form/
├── services/
│   └── task.service.ts
└── app.routes.ts

الخلاصة والخطوات التالية

تعلمنا في هذا الكورس:

• ✅ أساسيات Angular
• ✅ المكونات والخدمات
• ✅ الربط الثنائي
• ✅ الإشارات والحسابات
• ✅ التوجيه
• ✅ النماذج التفاعلية

ننصحك بـ:

• التدرب على المفاهيم التي تعلمتها
• بناء مشاريع صغيرة بنفسك
• استكشاف دورات Angular المتقدمة

بالتوفيق! 🚀