Angular Servis Kullanımı

Merhaba arkadaşlar, bu yazımda sizlere Angular ile Servis kullanımını anlatmaya çalışacağım. Angular ile proje geliştirilirken web servis(web api) ile veri çekme ya da işleme gibi işlemlerimizi gerçekleştirebiliriz. Bu yazımda angular ile servis nasıl oluşturulur ve servisten veri nasıl çekilir konularını işleyeceğiz. IDE olarak visual studio code kullanacağım.

Öncelikle örnek bir servis olan https://jsonplaceholder.typicode.com/ üzerinden servis isteklerini gerçekleştireceğim. Bu örnek servis içerisinde örnek olarak User, Post, Comment vs. gibi veriler bulunmaktadır. Biz de Post verilerini çekme işlemi gerçekleştireceğiz.

Servisten dönen veriler aşağıdaki gibidir. Burada 2 tane örnek gösterimi sağlanmıştır. Posts url’ine gittiğimizde 100 adet post listelemesi sağlanmaktadır.

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }
]

Öncelikle angular projemizde bir service dosyası oluşturmamız gerekmektedir. Bu service dosyamızı oluşturulan bir klasör üzerinde sağ tuşla tıklayarak New File ile ekleyebiliriz ve içini doldurabiliriz ya da Terminal üzerinden ng generate service servis-adi şeklinde komutumuzu kullanarak bu işlemi gerçekleştirebiliriz. Aşağıdaki örnekteki gibi bir servis oluşturuyoruz. Oluşturduktan sonra içerisinde yeni bir metod tanımlaması yaparak içerisinde örnek servisimizin url’inde bulunan ‘posts’ ile tüm post verilerini json olarak çekebiliyoruz. Bu verileri bir obje ile eşleştirmek için ise Post.ts isimli bir dosya oluşturup servisimizin içerisinde bu dosyamızı da kullanıyoruz. Bu dosya içerisinde de servisimizden dönen verilerin Post objesi ile eşleştirip kod içerisinde kullanımını gerçekleştirmekteyiz.

export class Post
{
    id:number;
    userId:number;
    title:string;
    body:string;
}

import { Injectable } from '@angular/core';
import { Post } from '../models/post';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class PostService{
    constructor(private http: HttpClient) { }

    getAllPosts(): Observable<Post[]>{
        return this.http.get<Post[]>("https://jsonplaceholder.typicode.com/posts");
    }
}

Servisimizi oluşturduktan sonra sıra bu servisimizi Component içerisinde kullanmaya geldi. Projemin içerisinde homepage.component.ts isimli dosyamda constructor kısmında kullanacağımız servisimizin tanımını sağlıyoruz. Aslında bu servisi injekte ediyoruz. Kullanacağımız servis PostService’i burada tanımladıktan sonra istersek ngOnInit içerisinde direkt olarak postService’i kullanabiliriz ya da bir metod içerisinde bunu yazıp metodun çağrılmasını sağlayabiliriz.

NOT: Kullanacağımız servislerimizi app.module.ts dosyası içerisinde de providers kısmına eklememiz gerekmektedir. Eklemezsek eğer F12 ile console üzerinden çıkan hataya baktığımızda No Provider for PostService! şeklinde bir hata ile karşılaşırız.

import { Component, OnInit } from '@angular/core';
import { Post } from '../models/post';
import { PostService } from '../services/post-service';

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
  posts: Post[] = [];

  constructor(private postService: PostService) { }

  ngOnInit(): void {
    this.getAllPosts();
  }

  getAllPosts(){
    this.postService.getAllPosts().subscribe((data: Post[])=>{
      this.posts = data;
    });
  }

}

Yukarıdaki örnekte ben getAllPosts metodu tanımlayarak bunun içerisinde servis kullanımını gerçekleştirdim. Bu serviste bulunan getAllPosts metodu çağırılır fakat subscribe metodunu kullanmamız gerekmektedir. Bunu kullanarak gerekli servis isteğinin başarılı olup olmadığını kontrol edebilir ve ona göre bir kod yazımı gerçekleştirebiliriz. Subscribe metodu yazıldıktan sonra ise bu dönen data’nın tipini Post[] olarak belirledik ve yukarıda tanımladığımız posts dizisine atamasını gerçekleştirdik. Bu işlemlerden sonra homepage.component.html dosyası içerisinde verileri listeleme işlemini gerçekleştireceğiz.

<div class="card" *ngFor="let post of posts">
  <div class="card-header">
    {{post.name}} 
  </div>
  <div class="card-body">
    <p class="card-text"> {{post.body}} </p>
  </div>
</div>

Html içerisinde de *ngFor ile component içerisinde atamasını yaptığımız posts değişkenini burada kullanarak bir liste görüntülemesi gerçekleştirmiş olduk.

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere 🙂