Services
Services
جدول المصطلحات:
مقدمة:
الخدمات (Services) في Angular هي حجر الأساس لمشاركة المنطق والتواصل بين المكونات. بدلاً من كتابة نفس الكود في عدة مكونات، نضع المنطق المشترك في خدمة ونحقنها حيثما نحتاج.
لماذا تستخدم الخدمات؟
1. إعادة استخدام الكود.
2. فصل المنطق عن واجهة المستخدم.
3. تسهيل الاختبار (Testing).
4. إدارة الحالة (State Management) المشتركة.
كيفية إنشاء خدمة
يمكن إنشاء خدمة باستخدام Angular CLI:
ng generate service اسم-الخدمة
أو يدويًا بإنشاء ملف TypeScript واستخدام ديكوراتور @Injectable.
مثال 1: خدمة التسجيل (Logger Service)
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LoggerService {
log(message: string): void {
console.log(`[LOG]: ${message}`);
}
error(message: string): void {
console.error(`[ERROR]: ${message}`);
}
warn(message: string): void {
console.warn(`[WARN]: ${message}`);
}}
مثال 2: خدمة الاتصال بالخادم (API Service)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export interface Hero {
id: number;
name: string;
}
@Injectable({
providedIn: 'root'
})
export class HeroService {
private apiUrl = 'https://api.example.com/heroes';
constructor(private http: HttpClient) {}
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.apiUrl);
}
addHero(hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.apiUrl, hero);
}
}
كيفية استخدام الخدمة في المكون
import { Component, OnInit } from '@angular/core';
import { HeroService, Hero } from './hero.service';
import { LoggerService } from './logger.service';
@Component({
selector: 'app-hero-list',
template: `
<h2>قائمة الأبطال</h2>
<ul>
<li *ngFor="let hero of heroes">{{ hero.name }}</li>
</ul>
`
})
export class HeroListComponent implements OnInit {
heroes: Hero[] = [];
constructor(
private heroService: HeroService,
private logger: LoggerService
) {}
ngOnInit(): void {
this.heroService.getHeroes().subscribe(
(data: Hero[]) => {
this.heroes = data;
this.logger.log(`تم جلب ${data.length} بطل`);
},
(error) => {
this.logger.error(`فشل في جلب البيانات: ${error}`); } ); }}
طرق تزويد الخدمات (Providing Services)
1. على مستوى الجذر (مستوى التطبيق)
@Injectable({
providedIn: 'root'
})
الخدمة متاحة في كل التطبيق.
2. على مستوى الموديول
@NgModule({
providers: [HeroService]
})
الخدمة متاحة داخل هذا الموديول فقط
3. على مستوى المكون
@Component({
providers: [HeroService]
})
الخدمة متاحة لهذا المكون وأبنائه فقط.
جدول مقارنة بين الخدمات والمكونات
نصائح وإرشادات
استخدم providedIn: 'root' للخدمات العامة والمشتركة.
احقن الخدمات في constructor وليس في أي مكان آخر.
قسّم الخدمات حسب الوظيفة: خدمة للـ API، خدمة للمصادقة، خدمة للتخزين المحلي، إلخ.
استخدم الواجهات (Interfaces) لتحديد هياكل البيانات.
تعامل مع الأخطاء داخل الخدمات باستخدام catchError من RxJS.
لا تضع منطق العرض داخل الخدمات.
ليست هناك تعليقات: