Angular Service Kullanımı

10 Ağustos 2017
Posted by Çağatay Yıldız
1238 Views

Bu yazımızda son dönemde oldukça popüler olan Angular frameworkunda basit bir servis kullanımının yazımına değineceğiz. Angular yazı dizimizde Visual Studio Code kullanıyoruz olacağız. Çok hızlı bir gelişim gösteren Visual Studio Code Angular vb platformlar için oldukça kullanışlı. Windows dışındaki işletim sistemlerinde de Visual Studio Code u rahatlıkla kullanabilirsiniz. VS Code linki için tıklayınız

Senaryomda basit bir Product ekleme ve listeleme işleminin iki ayrı (bunlardan biri modelim olan Product diğeri ise crud işlemlerimi yapacağım ProductService) ts dosyası oluşturuyorum. Öncelikle modelim olan Product.ts şu şekilde

export class Product{
    ProductName:string;
      UnitPrice:number;
}

Gördüğünüz üzere oldukça basit iki değeri olan bir class. Burada kodlama için typescript i tercih ettik. Type Script in c# a benzer yazım biçimi Angular a yeni geçecek arkadaşlar için oldukça rahat bir kodlama imkanı sunmakta.
Şimdi de mevcut class ımızdaki modeli kullanan ProductService isimli servisimizi oluşturuyoruz

import {Injectable} from '@angular/core';
import {Product} from '../models/product'

@Injectable()

export class ProductService{

  _products:Product[];

constructor() {
//api den productların alınıp doldurulduğunu varsayıyoruz
  this._products = [
    {ProductName:"IPhone",UnitPrice:22},
    {ProductName:"Samsung",UnitPrice:44}
  ]    
}

  public GetAllProducts():Product[]{
    return this._products;
  }

  public AddProduct(_product:Product):void{
    //gelen product api ye yollanıyor
    console.log(_product.ProductName + _product.UnitPrice);
    }
}

Servis class ımızı oluştururken dikkat etmemiz gereken ilk nokta kullancağımız Product modelini import etmek. Tam karşılığı olmasa da c# da using kullanımına benzetebilirsiniz. Daha sonra aşağıdaki @Injectable() isimli keyword bana bu servisin componentlerde injekte edilebilmesini sağlayacak. Öncelikle servis class ımın içerisinde bir adet Product dizisi tanımladım. Daha sonra servis içerisindeki constructor metodunda productları doldurdum. Burada productların api den geldiğini varsayabiliriz. Mevcut dolu olan dizimi GetAllProducts metoduyla dışarıya çıkarıyorum.
Aşağıda bulunan AddProduct metodum ise dışarıdan bir product objesi alan void bir metot tanımladık. Bu metot ise çağırıldığı component ten işlem görecek. Şimdi ise bu servisi kullanacak componentimizi yazıyoruz. Örneğin servisteki GetAllProducts metodunu kullanacak olan bir productlist componenti yazalım.

import { Component,OnInit } from '@angular/core';
import {ProductService} from '../services/productService';
import {Product} from '../models/product';


@Component({
  selector: 'product-list',
  templateUrl: '/productlist.component.html'
})

export class ProductlistComponent{
_products:Product[];

    constructor(private _productservice:ProductService) {
    }

public GetAll(){
this._products = this._productservice.GetAllProducts();
console.log(this._products);
}

}

Öncelikle burada Product modelimizi ve ProductService isimli servisimizi kullanacağımız için yukarıda yine import etmemiz gerekli. Daha sonra mevcut componentin constructor metodunda servisi ayağa kaldırıyoruz. Bu şekilde dosyamız içerisinde dilediğimiz yerde this anahtar kelimesiyle servisi çağırabiliriz. Örneğin GetAll metodunda tanımladığımız Product dizesine servisten gelen Product dizisini atamış olduk.
Son olarak bunu html de göstermek istiyoruz.

<button (click)=GetAll()>Verileri Çek</button>
<ul>
    <li *ngFor='let item of this._products'>
{{item.ProductName}}
    </li>
</ul>

Bunun haricinde injekte ettiğimiz ProductService isimli servisimizi app.module.ts dosyasında tanımlamamız gerektiğini unutmayalım.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'

import { AppComponent } from './app.component';
import {ProductlistComponent} from './pages/productlist.component';

import {ProductService} from './services/productService';

@NgModule({
  declarations: [
    AppComponent,
    ProductlistComponent
  ],
  imports: [
    BrowserModule,
    FormsModule

  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dikkat ederseniz ProductService isimli .ts dosyamı providers içerisine ekledim.
Servisimizi bu şekilde rahatlıkla import ettiğimiz dosyalarda kullanabiliriz. Angular notlarımıza generic servis kullanımı, http işlemleri gibi orta seviye konularla devam ediyor olacağız.