Angular Repository Pattern Kullanımı

13 Ağustos 2017
Posted by Çağatay Yıldız
828 Views

Agnular serimizin bu yazısında basit bir generic servis inşa edeceğiz. Typescript in esnekliği sayesinde repository pattern gibi çalışacak bu servisimiz içerisine aldığı nesneye göre metot üzerinden dönüş gerçekleştirecektir.

Angular üzerinden inşa ettiğimiz repository servisimiz şu şekilde

import {Injectable} from '@angular/core';
import {Http,Headers,RequestOptions,Response} from '@angular/http';

import 'rxjs/add/operator/toPromise';
import {Observable} from "rxjs/Rx";

@Injectable()

export class repositoryService<T>{


     headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });

    constructor(private http: Http) {
    }

  getAll(actionUrl:string):Promise<T[]>{
    return this.http.get(actionUrl).toPromise().then(resp=>resp.json() as T[]);

  }
}

Servisimize şimdilik sadece getAll metodunu koyduk. Dilerseniz diğer ana metotlarınızıda mevcut servisin içerisine koyabilirsiniz. (GetbyId,Add vb). Servisimizi herhangi bir yerden çağırmak için T objesini yani bir class verme koşulumuz var. Örneğin bu servisimizi herhangi bir component üzerinden çağıralım.

import { Component,OnInit,Inject } from '@angular/core';
import {Category} from '../models/category';
import 'rxjs/add/operator/toPromise';
import {repositoryService} from '../services/repositoryService';


@Component({
  selector: 'repoexample',
  template: `
  <button (click)="GetAll()">Kategorileri Getir</button>
  <ul>
<li *ngFor='let item of this.category'>
{{item.Name}}
</li>
  </ul>
  `
})

 export class RepoexampleComponent{

category:Category[];

constructor(private _service:repositoryService<Category>) {
    
}

GetAll(){
    this._service.getAll("http://localhost:33390/api/category").then(cat => this.category = cat);
}

 }

Yukarıda gördüğümüz component constructor metodunda repository servisimizi çağırırken Category objemizi veriyoruz ve getAll metodundan dönen datayı yukarıda tanımadığımız Category dizisine eşitliyoruz. Getall metodunda sadece api urlimizi belirtmemiz gerek.
Tanımladığımız Repository Servisimizi app.module içerisine yazmayı unutmayalım. Servis kullanımıyla alakalı başka bir örneği Angular service kullanımı makalemizde bulabilirsiniz