Bu başlıkta ilk Angular Service’ imizi oluşturacağız. İlk olduğu için basit bir iş yapacak. Lakin yaptığı işten ziyade, nasıl yaptığı ve diğer bileşenler ile olan ilişkisini net bir şekilde göreceğiz.

Service Oluşturmak

  • CLI vasıtası ile logging isminde ve services klasöründe yer alan bir service oluşturuyoruz;
    ng generate service services/logging
  • Oluşan service’ i inceleyelim;
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoggingService {

  constructor() { }
}
  • Service bir Injectable’ dır. Injectable decorator’ ü import eder ve kullanır.
  • providedIn parametresi, hangi seviyede inject edilebileceğini belirler.
  • LoggingService’ e basit bir metod yazıyoruz, log ismindeki metod ile, metoda gelen parametre’ yi console.log ile basıyoruz;
log(data) {
    console.log('logged: ' + data);
}

Dependency Injector ile Service’ e Erişmek

Angular Service de diğer bileşenler olan component, directive vb. gibi bir TypeScript class’ ıdır. Bu sebeple, service’ i kullanacağımız bileşen içerisinde, objesini yaratarak erişilebilir. AMA bu şekilde bir kullanım ASLA tavsiye edilmemektedir. bknz : https://gelistir.net/374/angular-service-ve-dependency-injection/ adresinde detaylıca anlattım. Angular framework, pek çok diğer frameworkler gibi, dependency injection yapısını bize sunuyor. Kullanmak ŞART DEĞİL ! Teknik zorunluluk DEĞİL ! Lakin bu akıllıca çözümü uygulamamak mantıksızlık olur.

Service‘ i kullanacağımız bileşen’ in constructor metodu içerisinde, o service’ e ihtiyacımız olduğunu Angular’ a belirtiyoruz, örneğin component’ in constructor’ ın da;

constructor(private logging: LoggingService) {
}
  • logging isminde ve private erişim belirleyicisinde bir öznitelik tanımlayıp, bu özniteliğe LoggingService’ ten bir instance verilmesini istedim.
  • neden private ? Çünkü LoggingService ilgili component’ in kendi iç yapısı değil ! Dışarıdan bir yapı, bu component üzerinden loggingService’ e erişmemeli ! LoggingService’ e erişmenin yolu bu component DEĞİL ! Benim bu component’ te elde ettiğim loggingService bana kadar 🙂 Public olarak dışarıya AÇMIYORUM !
  • Ek olarak, service‘ in inject edileceği bileşenin decorator‘ ünde ki providers parametresi içerisindeki dizi de de bu service’ in nasıl oluşması gerektiğini belirtmemiz lazım. Basit bir örnek yaptığımız, sadece service’ in ismini ekliyoruz. İleride daha gelişmiş örneklerde olacak;
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers : [LoggingService]
    })
  • Artık log metodunu kullanabiliriz. Component içerisinde, "this.logging" üzerinden loggingService’ e erişebiliriz;
    ngOnInit() {
    this.logging.log('component initiated');
    }
  • ngOnInit metodu içerisinde log metodunu ilgili mesaj ile tetikledim.

Canlı Örnek;

Sağ alttan console’ u açmayı unutmayın.

Last modified: 12 November 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.