Angular 4 İle Service Oluşturma ve Kullanma

Merhaba,

Bir Angular 4 projesi üzerinde bileşenler arasında veri transferi sağlayabilmek ya da her yerde kullanabilmek için servislere ihtiyacımız olabilir. İşte bu içeriğimizde Angular 4 ile bir service nasıl oluşturulur, oluşturulan service nasıl kullanılır ele alacağız ve bu ihtiyaca istinaden sonraki konularda detaylandıracağımız yazılarımıza bir temel teşkil etmiş olacağız.

Service’imizi oluşturmadan önce üzerinde çalışacağımız Angular 4 projemizin klasör dizaynını aşağıdaki ekran görüntüsünde olduğu gibi ayarlıyoruz. Tabi bu programatik dosyaların nasıl bir hiyerarşide bulunmasını istiyorsanız o şekilde stabil olarak yapılan kişisel bir ayarlamadır. Bunu sizlerde kendinize göre ayarlayabilir, istediğiniz dosyayı istediğiniz klasöre atabilirsiniz. Nihayetinde, import esnasında ilgili dosyaların dizinlerini ne olursa olsun belirtebilmekteyiz.

Angular 4 İle Service Oluşturma ve Kullanma
Burada gördüğünüz gibi “personel” isminde bir componentimiz, “entitys” klasörü içerisinde “personel.ts” isminde bir sınıfımız ve birazdan içinde servisleri barındıracağımız “services” klasörümüz mevcuttur. “personel” componenti içerisinde “personel.list.ts” sınıfı ise “personel” tipinden bir veri kaynağı oluşturduğumuz dosyamızdır. Hemen bu dosyaların içeriklerini aşağıda verelim;
“personel.ts”;

export class Personel {
    PersonelNo: number;
    Adi: string;
    SoyAdi: string;
    Memleketi: string;
    DogumTarihi: Date;
    Departman: Departman;
}
export enum Departman {
    IK,
    BI,
    Yonetim,
    Muhasebe,
    Danisma,
    Reklam
}

“personel.list.ts”;

import { Personel, Departman } from "../entitys/personel";
export const PersonelListesi: Personel[] = [
    { Adi: "Gençay", SoyAdi: "Yıldız", Departman: Departman.BI, DogumTarihi: new Date(1992, 5, 9), Memleketi: "Artvin", PersonelNo: 1 },
    { Adi: "Mustafa", SoyAdi: "Çakmak", Departman: Departman.Danisma, DogumTarihi: new Date(1992, 2, 11), Memleketi: "Zonguldak", PersonelNo: 2 },
    { Adi: "Naci", SoyAdi: "Yıldız", Departman: Departman.Reklam, DogumTarihi: new Date(1965, 5, 9), Memleketi: "Artvin", PersonelNo: 3 },
    { Adi: "Fatih", SoyAdi: "Yıldız", Departman: Departman.Muhasebe, DogumTarihi: new Date(1985, 5, 19), Memleketi: "Artvin", PersonelNo: 4 },
    { Adi: "Gülşah", SoyAdi: "Yıldız", Departman: Departman.Yonetim, DogumTarihi: new Date(1985, 12, 29), Memleketi: "Artvin", PersonelNo: 5 },
    { Adi: "Meriç", SoyAdi: "Yoldaş", Departman: Departman.Danisma, DogumTarihi: new Date(1993, 7, 3), Memleketi: "İzmir", PersonelNo: 6 },
    { Adi: "Sabri", SoyAdi: "Şükrü", Departman: Departman.IK, DogumTarihi: new Date(1990, 1, 13), Memleketi: "Malatya", PersonelNo: 7 },
    { Adi: "Mehmet", SoyAdi: "Tokman", Departman: Departman.IK, DogumTarihi: new Date(1992, 3, 12), Memleketi: "Afyon", PersonelNo: 8 }
];

Service Oluşturma

Angular 4 ile service oluşturmak istiyorsanız aşağıdaki prototipte olduğu gibi komutu çalıştırmanız yeterlidir.

ng g service [Servis Adı]

ya da

ng generate service [Servis Adı]

Komutumuzu çalıştırdığımız zaman;
Angular 4 İle Service Oluşturma ve Kullanma
aşağıdaki ekran görüntüsünde olduğu gibi ilgili dizine servis dosyalarımız oluşturulmaktadır.
Angular 4 İle Service Oluşturma ve Kullanma

Burada görmüş olduğunuz “personel.service.ts” dosyası bizim servisimizin ta kendisidir. İlgili dosyanın içeriğine göz atarsak eğer;

import { Injectable } from '@angular/core';
@Injectable()
export class PersonelService {
  constructor() { }
}

“PersonelService” isminde service classımız oluşturulmuştur ve “@angular/core” içerisinden import edilen “Injectable” sınıfından bu class declare edilmiştir.

Bir sınıfın servis olabilmesi için @Injectable() sınıfından deklare ediliyor olması lazım.

Şimdi buradaki senaryomuzda “personel.list.ts” sınıfındaki verileri servisimizin veri kaynağı olarak kullanacağız ve bu servis üzerinden bu verileri yayınlamaya çalışacağız. O halde servis içerisinde aşağıdaki çalışmayı gerçekleştirelim.

import { Injectable } from '@angular/core';
import { PersonelListesi } from "../personel/personel.list";
@Injectable()
export class PersonelService {
  constructor() { }
  getPersoneller() {
    return PersonelListesi;
  }
}

Dikkat ederseniz servis içerisinde “personel.list.ts” import edilmiştir ve ilgili veri kaynağı “getPersoneller” isminde oluşturulan metot ile return edilmiştir.
Şimdi gelin bu servis üzerinden bu veri kaynağına erişmek istiyorsak, erişmek istediğimiz alana servisi import ederek çalışmamızı icra edelim.

Servis Kullanımı

Bu örneğimizde servisi kullanacağımız iki noktamız mevcuttur. Biri modülümüzün varsayılan componenti ile bir diğeri kendi oluşturmuş olduğumuz “personel” componenti. Ben bu yazımızda her ikisi üzerinden de bu service’in kullanımına örnek vereceğim.

Özel Component Üzerinde Kullanım

İlk olarak “personel” componenti üzerinde servisimizi kullanalım. Doğal olarak “personel.component.ts” isimli dosyamızı açıyoruz ve içerisinde aşağıdaki gibi bir çalışma icra ediyoruz.

import { Component, OnInit } from '@angular/core';
import { PersonelListesi } from "../personel/personel.list";
import { Personel } from '../entitys/personel';
import { PersonelService } from '../services/personel.service';
@Component({
  selector: 'app-personel',
  templateUrl: './personel.component.html',
  styleUrls: ['./personel.component.css']
})
export class PersonelComponent implements OnInit {
  _personelList: Personel[];
  constructor(private personelService: PersonelService) { }
  ngOnInit() {
    this._personelList = this.personelService.getPersoneller();
  }
}

Gördüğünüz gibi “personel.ts” sınıfı ile servis sınıfımız dosya içerisine import edilmiştir. “PersonelComponent” sınıfı içerisinde “_personelList” referansı adında “Personel” tipinde bir dizi değişkeni tanımlanmıştır. Constructer metod içerisinde “personelService” isminde “PersonelService” tipinde bir parametre alınmaktadır. Bu parametre uygulamamız çalıştığı zaman servis nesnesini yakalayacak ve bu nesne üzerinden “ngOnInit” eventında olduğu gibi “getPersoneller” metodu çağrılacaktır. Şimdi bu nokta çok önemlidir. Birazdan bu mühim noktaya geri döneceğiz. Lakin bir kaç teferruatı halletmemiz gerekmektedir.

Burada uygulama açısından tek yapmamız gereken componentin “personel.component.html” dosyasında “_personelList” referansını kullanarak ilgili verileri ilgili alanlara basmaktır.

<table style="width:60%;">
  <thead>
    <tr>
      <th>Personel No</th>
      <th>Adı</th>
      <th>Soyadı</th>
      <th>Memleketi</th>
      <th>Doğum Tarihi</th>
      <th>Çalıştığı Departmanı</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align:center;" *ngFor="let personel of _personelList">
      <td>{{personel.PersonelNo}}</td>
      <td>{{personel.Adi}}</td>
      <td>{{personel.SoyAdi}}</td>
      <td>{{personel.Memleketi}}</td>
      <td>{{personel.DogumTarihi | date}}</td>
      <td>{{personel.Departman}}</td>
    </tr>
  </tbody>
</table>

Ayrıca bu sonucu yayında görebilmek için modülün varsayılan componentinin “app.component.html” dosyasında “PersonelComponent” sınıfının “selector” özelliğini vermemiz gerekmektedir.

<app-personel></app-personel>

Tüm bu işlemleri yaptıktan sonra ilgili projemizi kaydedip, yayınladığımız zaman karşımıza hiçbir sonuç gelmeyecektir. Neden mi? Buyrun, gelin beraber nedenini inceleyelim.
Tarayıcının ekranına sağ tıklayarak “İncele” menüsüne tıklayınız. Karşınıza çıkan ekrandan “Console” menüsüne tıklayarak aşağıdaki ekran görüntüsünde olduğu gibi o anda alınan hatanın perde arkasını görebilirsiniz.
Angular 4 İle Service Oluşturma ve Kullanma
Bakın, ne diyor! “No provider for PersonelService“, yani PersonelService nesnesini bulamadığından bahsediyor.
Şimdi Angular 4 makale serimizde önceden ele aldığımız şuradaki içeriği açınız ve içerik içinde “providers” kelimesini aratınız. Ne demiştik orada? “Uygulama içerisinde sürekli bir nesne yaşayacaksa burada tanımlanır…” Hmm

Peki

Yukarıda birkaç paragraf önce, sonrasında tekrar değineceğimiz önemli bir noktadan bahsetmiştim. “Bu parametre uygulamamız çalıştığı zaman servis nesnesini yakalayacak ve bu nesne üzerinden “ngOnInit” eventında olduğu gibi “getPersoneller” metodu çağrılacaktır.

Şimdi düşünelim.
– Biz hiç bir noktada servis nesnesi yarattık mı?
– Hayır.
– Ee peki yaratılmayan nesneyi nasıl yakalamasını bekliyoruz?
– Doğal olarak yakalayamadığı için hata vermiş olacak.
– Peki ne yapmalıyız?
– Componentin providers özelliğine servis nesnemizi verirsek bu component her çağrıldığında ilgili nesne yaratılmış olacaktır.

Bu düşsel muhakemeden sonra düşündüğümüzü uygulayalım.

import { Component, OnInit } from '@angular/core';
import { PersonelListesi } from "../personel/personel.list";
import { Personel } from '../entitys/personel';
import { PersonelService } from '../services/personel.service';
@Component({
  selector: 'app-personel',
  templateUrl: './personel.component.html',
  styleUrls: ['./personel.component.css'],
  providers: [PersonelService]
})
export class PersonelComponent implements OnInit {
  _personelList: Personel[];
  constructor(private personelService: PersonelService) { }
  ngOnInit() {
    this._personelList = this.personelService.getPersoneller();
  }
}

Dikkat ederseniz providers özelliğine “PersonelService” nesnesi tanımlanmıştır.
Şimdi projeyi kaydedip, tekrar yayınladığımız zaman aşağıdaki ekran görüntüsünde olduğu gibi servisimizin çalıştığını göreceğiz.
Angular 4 - Örnek Bir Çalışma

Modülün Varsayılan Componenti Üzerinden Kullanım

Şimdi de aynı işlemi varsayılan component üzerinde tekrarlayalım.

Hızlı hareket etmek maksadıyla teferruat olan bir işlemi öncelikle yapmayı tercih ediyorum. Direkt olarak modülün componentini kullanacağımız ve “app.component.html” dosyası içerisinde çalışmamızı yapacağımızdan dolayı direkt olarak ilgili dosyanın içerisini aşağıdaki gibi düzeltiyorum.

<table style="width:60%;">
    <thead>
        <tr>
            <th>Personel No</th>
            <th>Adı</th>
            <th>Soyadı</th>
            <th>Memleketi</th>
            <th>Doğum Tarihi</th>
            <th>Çalıştığı Departmanı</th>
        </tr>
    </thead>
    <tbody>
        <tr style="text-align:center;" *ngFor="let personel of _personelList">
            <td>{{personel.PersonelNo}}</td>
            <td>{{personel.Adi}}</td>
            <td>{{personel.SoyAdi}}</td>
            <td>{{personel.Memleketi}}</td>
            <td>{{personel.DogumTarihi | date}}</td>
            <td>{{personel.Departman}}</td>
        </tr>
    </tbody>
</table>

Ardından “app.component.ts” dosyamızın içerisine gelerek varsayılan component üzerinde servisimizle ilgili gerekli çalışmaları yapıyorum.
“app.component.ts” öncesi;

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

çalışma yapıldıktan sonrası;

import { Component, OnInit } from '@angular/core';
import { Personel } from './entitys/personel';
import { PersonelService } from './services/personel.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  _personelList: Personel[];
  constructor(private personelService: PersonelService) {
  }
  ngOnInit() {
    this._personelList = this.personelService.getPersoneller();
  }
}

Gördüğünüz gibi yapmış olduğumuz çalışmada; “AppComponent” sınıfına “OnInit” sınıfını implement etmek, constructer oluşturmak vs. gibi birkaç değişiklik mevcuttur. Ama genel manada servisimizi gene aynı şekilde, constructer parametresinde yakalıyor ve ngOnInit olayında çalıştırıyoruz.

Bu işlemden sonra projemizi tekrardan kaydedip, yayınladığımızda o da ne! tekrar aynı hatayla karşılaşıyoruz! ! !
Angular 4 İle Service Oluşturma ve Kullanma
Hmmm… Kodlara baktığımızda bu seferde varsayılan componentin providers özelliğine ilgili servisimizin nesnesini eklemediğimizi/eklemeyi unuttuğumuzu görüyoruz.

import { Component, OnInit } from '@angular/core';
import { Personel } from './entitys/personel';
import { PersonelService } from './services/personel.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [PersonelService]
})
export class AppComponent implements OnInit {
  _personelList: Personel[];
  constructor(private personelService: PersonelService) {
  }
  ngOnInit() {
    this._personelList = this.personelService.getPersoneller();
  }
}

Tekrar componentin özelliklerini düzelterek projeyi kaydedip, yayınladığımızda projenin çalıştığını görüyoruz.

Makale boyunca dikkat ettiyseniz uygulama üzerinde single nesne taşıyan providers üstüne çok durmuş bulunmaktayım. Bunun sebebi; servis konusunu ele alırken konunun bu hususu değerlendirmede çok yatkın olması ve bir yandan da konuyla oldukça alakalı olmasıdır.

Şu ana kadar biz üzerinde çalıştığımız componentlerin providers özelliğini kullanarak servis nesnemizi tanımladık. Yani, hangi componenti kullanıyorsak providers özelliğindeki nesne o componente özel olarak sistem tarafından single üretilmekte, diğerleri için üretilmemektedir. Eğer ki, uygulamanın geneli için bir nesneyi providers ile singleton hale getirmek istiyorsak componentlerden daha geniş kapsamlı bir noktada bu nesneyi tanımlamamız gerekmektedir. Haliyle componentler modül içerisinde barındırıldığından dolayı bu işlemi “app.module.ts” sayfasındaki providers özelliğinde uygularsak, o modüle bağlı tüm componentler için o nesne tek seferliğine yani singleton bir şekilde üretilmiş olacaktır.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PersonelComponent } from './personel/personel.component';
import { PersonelService } from './services/personel.service';
@NgModule({
  declarations: [
    AppComponent,
    PersonelComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [PersonelService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dikkat ederseniz providers parametresine verilen “PersonelService” nesnesi artık tüm uygulamadan erişilebilir bir single instance özelliği taşımaktadır. Dolayısıyla bu işlemden sonra componentlerin providers özelliğinde bir nesneye gerek olmaksızın “PersonelService” nesnesine bağlı çalışmalarımızı rahatlıkla icra edebilmekteyiz.

Bir sonraki makalemizde http servisleriyle haşır neşir olacağız. Haliyle siz bu makaleyi okurken bende yeni makalemiz üzerine çalışmaya başlayayım.

O halde sonraki makalelerde görüşmek üzere diyelim…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Copy Protected by Chetan's WP-Copyprotect.