Angular 19 مع Signals و Resource API: بناء تطبيقات ويب تفاعلية في 2026

npm install -g @angular/cli@19
ng new signals-dashboard --style=css --ssr=false --standalone
cd signals-dashboard

import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
 
bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideHttpClient(),
  ],
}).catch((err) => console.error(err));

import { signal, computed, effect } from '@angular/core';
 
const count = signal(0);
const double = computed(() => count() * 2);
 
effect(() => {
  console.log(`العداد ${count()}، الضعف ${double()}`);
});
 
count.set(5);
count.update((n) => n + 1);

import { Injectable, signal, computed, effect } from '@angular/core';
 
export type SortBy = 'stars' | 'updated' | 'name';
 
@Injectable({ providedIn: 'root' })
export class PreferencesStore {
  readonly query = signal('');
  readonly sortBy = signal<SortBy>('stars');
  readonly minStars = signal(0);
 
  readonly activeFiltersCount = computed(() => {
    let count = 0;
    if (this.query().length > 0) count++;
    if (this.minStars() > 0) count++;
    return count;
  });
 
  constructor() {
    const saved = localStorage.getItem('prefs');
    if (saved) {
      const parsed = JSON.parse(saved);
      this.query.set(parsed.query ?? '');
      this.sortBy.set(parsed.sortBy ?? 'stars');
      this.minStars.set(parsed.minStars ?? 0);
    }
 
    effect(() => {
      const snapshot = {
        query: this.query(),
        sortBy: this.sortBy(),
        minStars: this.minStars(),
      };
      localStorage.setItem('prefs', JSON.stringify(snapshot));
    });
  }
 
  reset(): void {
    this.query.set('');
    this.sortBy.set('stars');
    this.minStars.set(0);
  }
}

import { Injectable, computed, inject } from '@angular/core';
import { httpResource } from '@angular/common/http';
import { PreferencesStore } from '../stores/preferences.store';
 
export interface Repo {
  id: number;
  name: string;
  full_name: string;
  description: string | null;
  stargazers_count: number;
  updated_at: string;
  html_url: string;
}
 
@Injectable({ providedIn: 'root' })
export class ReposService {
  private readonly prefs = inject(PreferencesStore);
 
  readonly reposResource = httpResource<Repo[]>(() => {
    const q = this.prefs.query().trim();
    if (!q) return undefined;
    return `https://api.github.com/search/repositories?q=${encodeURIComponent(q)}`;
  });
 
  readonly filteredRepos = computed(() => {
    const repos = this.reposResource.value() ?? [];
    const minStars = this.prefs.minStars();
    const sortBy = this.prefs.sortBy();
 
    const filtered = repos.filter((r) => r.stargazers_count >= minStars);
 
    return [...filtered].sort((a, b) => {
      if (sortBy === 'stars') return b.stargazers_count - a.stargazers_count;
      if (sortBy === 'name') return a.name.localeCompare(b.name);
      return b.updated_at.localeCompare(a.updated_at);
    });
  });
}

import { Component, inject } from '@angular/core';
import { ReposService } from '../services/repos.service';
 
@Component({
  selector: 'app-repo-list',
  standalone: true,
  template: `
    @if (repos.reposResource.status() === 'loading') {
      <p class="loading">جاري تحميل المستودعات...</p>
    } @else if (repos.reposResource.error()) {
      <p class="error">فشل التحميل: {{ repos.reposResource.error()?.message }}</p>
    } @else {
      @for (repo of repos.filteredRepos(); track repo.id) {
        <article class="repo-card">
          <h3>
            <a [href]="repo.html_url" target="_blank">{{ repo.full_name }}</a>
          </h3>
          @if (repo.description) {
            <p>{{ repo.description }}</p>
          }
          <div class="meta">
            <span>&#9733; {{ repo.stargazers_count }}</span>
            <span>آخر تحديث {{ repo.updated_at | date: 'mediumDate' }}</span>
          </div>
        </article>
      } @empty {
        <p class="empty">لا توجد مستودعات تطابق معايير التصفية.</p>
      }
    }
  `,
  styleUrl: './repo-list.component.css',
})
export class RepoListComponent {
  readonly repos = inject(ReposService);
}

import { Component, inject } from '@angular/core';
import { PreferencesStore } from '../stores/preferences.store';
 
@Component({
  selector: 'app-search-bar',
  standalone: true,
  template: `
    <div class="search-bar">
      <input
        type="search"
        placeholder="ابحث في مستودعات GitHub..."
        [value]="prefs.query()"
        (input)="onQueryChange($event)"
      />
      <select
        [value]="prefs.sortBy()"
        (change)="onSortChange($event)"
      >
        <option value="stars">الأكثر نجوماً</option>
        <option value="updated">الأحدث تحديثاً</option>
        <option value="name">الاسم أ إلى ي</option>
      </select>
      <input
        type="number"
        min="0"
        placeholder="الحد الأدنى للنجوم"
        [value]="prefs.minStars()"
        (input)="onMinStarsChange($event)"
      />
      @if (prefs.activeFiltersCount() > 0) {
        <button (click)="prefs.reset()">
          إعادة تعيين ({{ prefs.activeFiltersCount() }})
        </button>
      }
    </div>
  `,
})
export class SearchBarComponent {
  readonly prefs = inject(PreferencesStore);
 
  onQueryChange(event: Event): void {
    const value = (event.target as HTMLInputElement).value;
    this.prefs.query.set(value);
  }
 
  onSortChange(event: Event): void {
    const value = (event.target as HTMLSelectElement).value as 'stars' | 'updated' | 'name';
    this.prefs.sortBy.set(value);
  }
 
  onMinStarsChange(event: Event): void {
    const value = Number((event.target as HTMLInputElement).value);
    this.prefs.minStars.set(Number.isFinite(value) ? value : 0);
  }
}

import { Component } from '@angular/core';
import { SearchBarComponent } from './components/search-bar.component';
import { RepoListComponent } from './components/repo-list.component';
 
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SearchBarComponent, RepoListComponent],
  template: `
    <header>
      <h1>لوحة تحكم Angular 19 Signals</h1>
    </header>
    <main>
      <app-search-bar />
      <app-repo-list />
    </main>
  `,
})
export class AppComponent {}

import { Injectable, computed, inject } from '@angular/core';
import { httpResource } from '@angular/common/http';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged } from 'rxjs';
import { PreferencesStore } from '../stores/preferences.store';
 
@Injectable({ providedIn: 'root' })
export class ReposService {
  private readonly prefs = inject(PreferencesStore);
 
  private readonly debouncedQuery = toSignal(
    toObservable(this.prefs.query).pipe(
      debounceTime(300),
      distinctUntilChanged(),
    ),
    { initialValue: '' }
  );
 
  readonly reposResource = httpResource<{ items: Repo[] }>(() => {
    const q = this.debouncedQuery().trim();
    if (!q) return undefined;
    return `https://api.github.com/search/repositories?q=${encodeURIComponent(q)}`;
  });
}

import { TestBed } from '@angular/core/testing';
import { PreferencesStore } from './preferences.store';
 
describe('PreferencesStore', () => {
  let store: PreferencesStore;
 
  beforeEach(() => {
    localStorage.clear();
    TestBed.configureTestingModule({});
    store = TestBed.inject(PreferencesStore);
  });
 
  it('يبدأ بالقيم الافتراضية', () => {
    expect(store.query()).toBe('');
    expect(store.sortBy()).toBe('stars');
    expect(store.activeFiltersCount()).toBe(0);
  });
 
  it('يحسب عدد الفلاتر النشطة', () => {
    store.query.set('angular');
    store.minStars.set(100);
    expect(store.activeFiltersCount()).toBe(2);
  });
 
  it('يعيد تعيين كل التفضيلات', () => {
    store.query.set('test');
    store.reset();
    expect(store.query()).toBe('');
  });
});

ng build --configuration production

npx source-map-explorer dist/signals-dashboard/browser/main-*.js