Angular Signals: ثورة إدارة الحالة التي طال انتظارها — ودليل التطبيق العملي

// مثال بسيط على إنشاء Signal وتحديثه
import { signal } from '@angular/core';

// إنشاء Signal بقيمة أولية
const count = signal(0);

// قراءة القيمة
console.log(count()); // 0

// تحديث القيمة
count.set(5);
console.log(count()); // 5

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

// إنشاء Signal قابل للكتابة (WritableSignal)
const user = signal({ name: 'Ahmed', age: 30 });
user.mutate(current => {
 current.age += 1;
});
console.log(user().age); // 31

// إنشاء Signal محسوب (Computed Signal)
const isAdult = computed(() => user().age >= 18);
console.log(isAdult()); // true

// مثال على الدمج بين RxJS وSignals
import { signal, computed } from '@angular/core';
import { fromEvent, interval } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';

// إنشاء Signal لتتبع عدد النقرات
const clickCount = signal(0);

// إنشاء Observable من حدث النقر
const click$ = fromEvent(document, 'click');

// تحويل Observable إلى Signal
click$.subscribe(() => {
 clickCount.update(count => count + 1);
});

// إنشاء Signal محسوب لعرض رسالة بناءً على عدد النقرات
const message = computed(() => {
 const count = clickCount();
 if (count === 0) return 'لم تنقر بعد';
 if (count < 5) return `نقرت ${count} مرات`;
 return 'نقرت أكثر من 5 مرات!';
});

// استخدام Signal مع RxJS في Component
@Component({
 selector: 'app-click-counter',
 template: `{{ message() }}`,
})
export class ClickCounterComponent {
 message = message;

 constructor() {
 // مثال على استخدام RxJS مع Signals
 interval(1000).pipe(
 takeUntil(fromEvent(document, 'unload'))
 ).subscribe(() => {
 console.log('عدد النقرات الحالي:', clickCount());
 });
 }
}

// مثال على تحسين الأداء باستخدام Signals
import { signal, computed, effect } from '@angular/core';

// إنشاء Signals لتتبع حالة المستخدم
const user = signal({
 name: 'Fatima',
 age: 28,
 preferences: {
 theme: 'dark',
 language: 'ar'
 }
});

// إنشاء Signal محسوب لعرض رسالة ترحيب
const welcomeMessage = computed(() => {
 return `مرحبًا ${user().name}! عمرك ${user().age} سنة.`;
});

// إنشاء effect لتسجيل التغييرات في الـ console
// سيتم تشغيله فقط عند تغيير user.name أو user.age
// ولن يتم تشغيله عند تغيير user.preferences.theme أو user.preferences.language
const logEffect = effect(() => {
 console.log('تحديث رسالة الترحيب:', welcomeMessage());
});

// تحديث جزء محدد من الحالة دون التأثير على بقية الإشارات
user.mutate(current => {
 current.preferences.theme = 'light';
});
// logEffect لن يتم تشغيله هنا لأن welcomeMessage لا يعتمد على theme

// تحديث جزء من الحالة يؤثر على welcomeMessage
user.mutate(current => {
 current.name = 'Laila';
});
// logEffect سيتم تشغيله هنا لأن welcomeMessage يعتمد على name

// مثال على Fine-grained Reactivity
import { signal, computed } from '@angular/core';

// إنشاء Signals لتتبع حالة المنتج
const product = signal({
 id: 1,
 name: 'Laptop',
 price: 999.99,
 inStock: true,
 specifications: {
 cpu: 'Intel i7',
 ram: '16GB',
 storage: '512GB SSD'
 }
});

// إنشاء Signals محسوبة تعتمد على أجزاء محددة من الحالة
const productName = computed(() => product().name);
const productPrice = computed(() => product().price);
const isAvailable = computed(() => product().inStock);
const productSpecs = computed(() => product().specifications);
const cpuSpec = computed(() => product().specifications.cpu);

// عند تغيير product.name، سيتم تحديث productName فقط
product.mutate(current => {
 current.name = 'Gaming Laptop';
});
// productPrice, isAvailable, productSpecs, cpuSpec لن يتم إعادة حسابها

// عند تغيير product.specifications.cpu، سيتم تحديث cpuSpec فقط
product.mutate(current => {
 current.specifications.cpu = 'Intel i9';
});
// productName, productPrice, isAvailable, productSpecs لن يتم إعادة حسابها

// عند تغيير product.price، سيتم تحديث productPrice فقط
product.mutate(current => {
 current.price = 1099.99;
});
// productName, isAvailable, productSpecs, cpuSpec لن يتم إعادة حسابها

// task-dashboard.component.ts
import { Component, signal, computed, effect } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Task } from './task.model';

@Component({
 selector: 'app-task-dashboard',
 standalone: true,
 imports: [CommonModule, FormsModule],
 template: `
 <div class="task-dashboard">
 <h2>لوحة تحكم المهام</h2>
 
 <div class="task-stats">
 <p>إجمالي المهام: {{ totalTasks() }}</p>
 <p>المهام المكتملة: {{ completedTasks() }}</p>
 <p>نسبة الإنجاز: {{ completionPercentage() }}%</p>
 </div>
 
 <div class="task-controls">
 <input 
 type="text" 
 [(ngModel)]="newTaskTitle" 
 placeholder="أضف مهمة جديدة" 
 (keyup.enter)="addTask()">
 <button (click)="addTask()">إضافة</button>
 
 <select [(ngModel)]="filter">
 <option value="all">جميع المهام</option>
 <option value="completed">مكتملة</option>
 <option value="pending">قيد التنفيذ</option>
 </select>
 </div>
 
 <ul class="task-list">
 <li *ngFor="let task of filteredTasks()">
 <input 
 type="checkbox" 
 [checked]="task.completed" 
 (change)="toggleTask(task.id)">
 <span [class.completed]="task.completed">{{ task.title }}</span>
 <button (click)="deleteTask(task.id)">حذف</button>
 </li>
 </ul>
 </div>
 `,
 styles: [
 `.task-dashboard { max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; }
 .task-stats { display: flex; justify-content: space-between; margin-bottom: 20px; }
 .task-controls { display: flex; gap: 10px; margin-bottom: 20px; }
 .task-controls input, .task-controls select { flex-grow: 1; padding: 8px; }
 .task-list { list-style: none; padding: 0; }
 .task-list li { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #eee; }
 .task-list li input[type="checkbox"] { margin-right: 10px; }
 .task-list li span { flex-grow: 1; }
 .task-list li span.completed { text-decoration: line-through; color: #888; }
 .task-list li button { margin-left: 10px; }`
 ]
})
export class TaskDashboardComponent {
 // Signals لإدارة الحالة
 tasks = signal<Task[]>([]);
 newTaskTitle = '';
 filter = signal<'all' | 'completed' | 'pending'>('all');

 // Signals محسوبة
 totalTasks = computed(() => this.tasks().length);
 completedTasks = computed(() => this.tasks().filter(task => task.completed).length);
 completi computed(() => {
 const total = this.totalTasks();
 const completed = this.completedTasks();
 return total === 0 ? 0 : Math.round((completed / total) * 100);
 });

 filteredTasks = computed(() => {
 const filter = this.filter();
 const tasks = this.tasks();
 
 switch (filter) {
 case 'completed':
 return tasks.filter(task => task.completed);
 case 'pending':
 return tasks.filter(task => !task.completed);
 default:
 return tasks;
 }
 });

 // Effect لتسجيل التغييرات في المهام
 logTasksEffect = effect(() => {
 console.log('المهام الحالية:', this.tasks());
 });

 // إضافة مهمة جديدة
 addTask() {
 if (!this.newTaskTitle.trim()) return;
 
 this.tasks.update(tasks => [
 ...tasks,
 {
 id: Date.now(),
 title: this.newTaskTitle,
 completed: false
 }
 ]);
 
 this.newTaskTitle = '';
 }

 // تبديل حالة المهمة
 toggleTask(id: number) {
 this.tasks.update(tasks =>
 tasks.map(task =>
 task.id === id ? { ...task, completed: !task.completed } : task
 )
 );
 }

 // حذف مهمة
 deleteTask(id: number) {
 this.tasks.update(tasks => tasks.filter(task => task.id !== id));
 }
}

// task.model.ts
export interface Task {
 id: number;
 title: string;
 completed: boolean;
}

// مثال على دمج Angular Signals مع RxJS في مكون معقد
import { Component, signal, computed, effect, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Task } from './task.model';
import { catchError, map, of, Subject, takeUntil } from 'rxjs';

@Component({
 selector: 'app-task-dashboard-advanced',
 standalone: true,
 imports: [CommonModule],
 template: `
 <div class="task-dashboard">
 <h2>لوحة تحكم المهام المتقدمة</h2>
 
 <div *ngIf="loading()" class="loading">جارٍ تحميل المهام...</div>
 <div *ngIf="error()" class="error">حدث خطأ: {{ error() }}</div>
 
 <div *ngIf="!loading() && !error()" class="task-content">
 <div class="task-stats">
 <p>إجمالي المهام: {{ totalTasks() }}</p>
 <p>المهام المكتملة: {{ completedTasks() }}</p>
 <p>نسبة الإنجاز: {{ completionPercentage() }}%</p>
 </div>
 
 <div class="task-controls">
 <button (click)="refreshTasks()">تحديث المهام</button>
 </div>
 
 <ul class="task-list">
 <li *ngFor="let task of filteredTasks()">
 <input 
 type="checkbox" 
 [checked]="task.completed" 
 (change)="toggleTask(task.id)">
 <span [class.completed]="task.completed">{{ task.title }}</span>
 </li>
 </ul>
 </div>
 </div>
 `,
 styles: [
 `.task-dashboard { max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; }
 .loading, .error { padding: 20px; text-align: center; }
 .error { color: red; }
 .task-stats { display: flex; justify-content: space-between; margin-bottom: 20px; }
 .task-controls { margin-bottom: 20px; }
 .task-list { list-style: none; padding: 0; }
 .task-list li { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #eee; }
 .task-list li input[type="checkbox"] { margin-right: 10px; }
 .task-list li span { flex-grow: 1; }
 .task-list li span.completed { text-decoration: line-through; color: #888; }`
 ]
})
export class TaskDashboardAdvancedComponent implements OnInit, OnDestroy {
 private destroy$ = new Subject<void>();
 
 // Signals لإدارة الحالة
 tasks = signal<Task[]>([]);
 loading = signal(false);
 error = signal<string | null>(null);
 filter = signal<'all' | 'completed' | 'pending'>('all');

 // Signals محسوبة
 totalTasks = computed(() => this.tasks().length);
 completedTasks = computed(() => this.tasks().filter(task => task.completed).length);
 completi computed(() => {
 const total = this.totalTasks();
 const completed = this.completedTasks();
 return total === 0 ? 0 : Math.round((completed / total) * 100);
 });

 filteredTasks = computed(() => {
 const filter = this.filter();
 const tasks = this.tasks();
 
 switch (filter) {
 case 'completed':
 return tasks.filter(task => task.completed);
 case 'pending':
 return tasks.filter(task => !task.completed);
 default:
 return tasks;
 }
 });

 constructor(private http: HttpClient) {}

 ngOnInit() {
 this.loadTasks();
 
 // مثال على استخدام effect للتفاعل مع تغييرات الحالة
 effect(() => {
 console.log('حالة التحميل:', this.loading());
 console.log('عدد المهام:', this.totalTasks());
 });
 }

 ngOnDestroy() {
 this.destroy$.next();
 this.destroy$.complete();
 }

 // تحميل المهام من الـ API
 loadTasks() {
 this.loading.set(true);
 this.error.set(null);
 
 this.http.get<Task[]>('https://api.example.com/tasks').pipe(
 takeUntil(this.destroy$),
 catchError(err => {
 this.error.set('فشل تحميل المهام. يرجى المحاولة لاحقًا.');
 return of([]);
 })
 ).subscribe(tasks => {
 this.tasks.set(tasks);
 this.loading.set(false);
 });
 }

 // تحديث المهام
 refreshTasks() {
 this.loadTasks();
 }

 // تبديل حالة المهمة
 toggleTask(id: number) {
 this.tasks.update(tasks =>
 tasks.map(task =>
 task.id === id ? { ...task, completed: !task.completed } : task
 )
 );
 
 // في التطبيق الحقيقي، يمكنك إرسال تحديث إلى الـ API هنا
 // this.http.patch(`https://api.example.com/tasks/${id}`, { completed: !task.completed })
 // .subscribe();
 }
}

// مشكلة البيانات المتداخلة وحلها
import { signal } from '@angular/core';
import { produce } from 'immer';

// إنشاء Signal مع بيانات متداخلة
const user = signal({
 name: 'Youssef',
 addresses: [
 { id: 1, city: 'Cairo', street: 'Nile Street' },
 { id: 2, city: 'Alexandria', street: 'Corniche' }
 ]
});

// محاولة تحديث عنوان معين (لن تعمل كما هو متوقع)
// user().addresses[0].city = 'Giza'; // هذا التغيير لن يتم تتبعه

// الحل الأول: استخدام mutate مع التحديث اليدوي
user.mutate(current => {
 const address = current.addresses.find(addr => addr.id === 1);
 if (address) {
 address.city = 'Giza';
 }
});

// الحل الثاني: استخدام Immer لتبسيط التحديثات
const updateAddress = (id: number, city: string) => {
 user.update(current => produce(current, draft => {
 const address = draft.addresses.find(addr => addr.id === id);
 if (address) {
 address.city = city;
 }
 }));
};

updateAddress(2, 'Port Said');
console.log(user().addresses); // [{ id: 1, city: 'Giza', ... }, { id: 2, city: 'Port Said', ... }]

// إدارة الذاكرة مع Angular Signals
import { Component, signal, effect, OnDestroy } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';

@Component({
 selector: 'app-memory-management',
 template: `{{ count() }}`
})
export class MemoryManagementComponent implements OnDestroy {
 private destroy$ = new Subject<void>();
 count = signal(0);

 constructor() {
 // إنشاء effect مع إدارة دورة الحياة
 effect(() => {
 console.log('القيمة الحالية:', this.count());
 }, {
 manualCleanup: true
 });
 
 // استخدام RxJS مع Signals
 interval(1000).pipe(
 takeUntil(this.destroy$)
 ).subscribe(() => {
 this.count.update(c => c + 1);
 });
 }

 ngOnDestroy() {
 this.destroy$.next();
 this.destroy$.complete();
 }
}

// التكامل بين Angular Signals وNgRx
import { Component, signal, computed, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectUser } from './user.selectors';
import { loadUser } from './user.actions';

@Component({
 selector: 'app-user-profile',
 template: `
 <div *ngIf="user()">
 <h2>{{ user().name }}</h2>
 <p>العمر: {{ user().age }}</p>
 <p>البريد الإلكتروني: {{ user().email }}</p>
 
 <div>
 <input [(ngModel)]="localName" placeholder="تغيير الاسم">
 <button (click)="updateName()">تحديث</button>
 </div>
 </div>
 `
})
export class UserProfileComponent implements OnInit {
 user = signal<any>(null);
 localName = '';
 
 constructor(private store: Store) {}

 ngOnInit() {
 // جلب بيانات المستخدم من NgRx
 this.store.select(selectUser).subscribe(user => {
 this.user.set(user);
 this.localName = user?.name || '';
 });
 
 // تحميل بيانات المستخدم إذا لم تكن متاحة
 this.store.dispatch(loadUser());
 }

 // تحديث الاسم محليًا باستخدام Signal
 updateName() {
 if (!this.localName.trim()) return;
 
 this.user.mutate(current => {
 if (current) {
 current.name = this.localName;
 }
 });
 
 // في التطبيق الحقيقي، يمكنك إرسال التحديث إلى NgRx هنا
 // this.store.dispatch(updateUserName({ name: this.localName }));
 }
}