Angular HTTP Module Kullanımı

11 Ağustos 2017
Posted by Çağatay Yıldız
1338 Views

Bu yazımızda Angular framework undeki http modulunu kullanarak kimi işlemler yapıyor olacağız. Öncelikle bu modülün resmi dökümanı için Angular sitesindeki şu linki inceleyebilirsiniz. Yazımızda basit bir API den kategorileri çekip ekrana yansıtacağız. Burada http modulünü servis üzerinden çağıracağız. Daha önceki makalemizde servis kullanımına değinmiştik. API olarak ASP.Net Web API den yararlandık.


Öcelikle ASP.Net tarafındaki web api mize bakıyor olursak;

 public class CategoryController : ApiController
    {
        public List<Category> GetAllCategories()
        {
            List<Category> categories = new List<Category>() {
                new Category(){
                    Name = "kategori1",
                    Description = "kategori1 açıklama"
                },

                new Category(){
                    Name = "kategori2",
                    Description = "kategori2 açıklama"
                }

            };
            return categories;
        }
    }

API miz görüldüğü üzere iki adet Category dönmekte. Category class ında Name ve Description adında iki property miz mevcut. Şimdi gelelim Angular kodlarına.
Angular tarafında gelen objeyle eşleşecek Category.ts adında bir dosya oluşturuyoruz.

export class Category{
    Name:string;
    Description:string;
}

Http modülümüzü kullanacak ve bize API den gelen veriyi almamızı sağlayacak CategoryService.ts adında bir dosya oluşturuyoruz.

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {Category} from '../models/category';

import 'rxjs/add/operator/toPromise';

@Injectable()


export class CategoryService{

    constructor(private http: Http) {
    }

    GetAllCategories(){
        return this.http.get("http://localhost:33390/api/category")
        .toPromise()
        .then(response => response.json() as Category[]);
    }
}

Anguların http modülü üzerinden veri çekerken rxjs adında bir kütüphaneden faydalandık. Resmi dökümanda da promise işlemleri için tavsiye edilen kütüphanedir. Başka kütüphaneler de kullanılabilir. Servisimin constructor metodunda kullanacağım http modülümü tanımladım ve GetAllCategories metodunda mevcut adres üzerinden veriyi Category dizisine çevirip return ettim.
Son olarak yapmam gereken bu servisi bir component ten çağırıp ekrana Category leri basmak. Categorylist adında bir component oluşturuyorum.

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

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

export class CategorylistComponent{

    category:Category[]; 

    constructor(private _categoryservice: CategoryService) {

    }
    public GetAll(){
        this._categoryservice
        .GetAllCategories()
        .then(cat => this.category = cat);
    }
}

Buradaki işlemim de görüldüğü üzere oldukça basit. Daha önceki makalemizde belirttiğimiz gibi servisimizi (_categoryservice) tanımladık ve GetAll metodunda çağırdık. Servisten data geldikten sonra then anahtar kelimesiyle component içerisinde oluşturduğum diziye atama yaptım. Böylelikle diziyi yukarıdaki html bloğunda rahatlıkla kullandım. Basit bir şekilde listeleme işlemini gerçekleştirmiş oldum.
Bu işlem sırasında kullandığımız HttpModule ü app.module.ts e tanımlamayı unutmayalım.