Kod Paylaşımı

Dependency injection kodu paylaşmanıza olanak tanır.

Bileşenler arasında mantık paylaşmanız gerektiğinde, Angular bağımlılık enjeksiyonu tasarım deseninden yararlanır ve “servis” oluşturmanıza olanak tanır. Bu da bileşenlere kod enjekte etmenize ve bunu tek bir doğru kaynaktan yönetmenize olanak sağlar.

Services nedir? #

Services , enjekte edilebilen yeniden kullanılabilir kod parçalarıdır.

Bir bileşeni tanımlamaya benzer şekilde, hizmetler aşağıdakilerden oluşur:

• Bir TypeScript dekoratörü, sınıfı Angular servisi olarak ilan eden @Injectable ile birlikte uygulamanın hangi bölümünün hizmete erişebileceğini providedIn özelliği aracılığıyla tanımlamanızı sağlar (genellikle ‘root‘ olarak ayarlanır) böylece bir servisin uygulamanın herhangi bir yerinde erişilebilir olmasını sağlar.
• Hizmet enjekte edildiğinde erişilebilir olacak istenen kodu tanımlayan bir TypeScript sınıfı

import {Injectable} from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class CalculatorService {
  add(x: number, y: number) {
    return x + y;
  }
}

Bir service nasıl kullanılır #

Bir bileşende bir hizmeti kullanmak istediğinizde şunları yapmanız gerekir:

•  Hizmeti içe aktarın
• Enjekte edilen hizmetin bulunduğu bir sınıf alanı bildirin, Hizmeti oluşturan yerleşik enjekte işlevinin çağrısının sonucunu içeren sınıf alanını atayın.

İşte Receipt bileşiminde nasıl görünebileceğine dair bir örnek:

import { Component } from '@angular/core';
import { CalculatorService } from './calculator.service';
@Component({
  selector: 'app-receipt',
  template: `<h1>The total is {{ totalCost }}</h1>`,
})
export class Receipt {
  private calculatorService = inject(CalculatorService);
  totalCost = this.calculatorService.add(50, 25);
}

Bu örnekte, CalculatorService, Angular fonksiyonu inject çağrılarak ve servis ona iletilerek kullanılıyor.