Angular İle Web API Tetikleme

Merhaba,

Bu içeriğimizde Angular ile Web API tetiklemeyi inceliyor olacağız. İlk olarak Asp.NET MVC – Web Api Nedir? Nasıl Oluşturulur? başlıklı makalemde ele aldığımız gibi bir Web API oluşturacak ve ardından bu Web API’ye Angular ile bağlanıp akabinde GET, POST ve PUT işlemlerini gerçekleştireceğiz.

Hiç vakit kaybetmeden birer adet Angular uygulaması ile yukarıda adresi verilen makalede bahsedildiği gibi Web API projesi oluşturunuz. Bizler içeriğimizde aşağıdaki metotları barındıran bir Web API üzerinden örneklendirmede bulunacağız.

    public class PersonelController : ApiController
    {
        NorthwindEntities db = new NorthwindEntities();
        public IEnumerable<Personel> GetAll() => db.Personeller.Select(p => new Personel
        {
            PersonelID = p.PersonelID,
            Adi = p.Adi,
            SoyAdi = p.SoyAdi,
            Unvan = p.Unvan
        }).ToList();
        public Personel GetSingle(int id) => db.Personeller.FirstOrDefault(p => p.PersonelID == id);
        public IHttpActionResult PostAdd(Personel p)
        {
            if (p != null)
            {
                db.Personeller.Add(p);
                db.SaveChanges();
                return Ok(p);
            }
            return Ok("Personel ekleme başarısız.");
        }
        public IHttpActionResult PutUpdate(Personel p)
        {
            if (p != null)
            {
                Personeller updatePersonel = db.Personeller.FirstOrDefault(u => u.PersonelID == p.PersonelID);
                updatePersonel.Adi = p.Adi;
                updatePersonel.SoyAdi = p.SoyAdi;
                updatePersonel.Unvan = p.Unvan;
                db.SaveChanges();
                return Ok(updatePersonel);
            }
            return Ok("Personel güncelleştirme başarısız.");
        }
        [HttpDelete]
        public IHttpActionResult Remove(int id)
        {
            Personeller deletePersonel = db.Personeller.FirstOrDefault(p => p.PersonelID == id);
            db.Personeller.Remove(deletePersonel);
            db.SaveChanges();
            return Ok($"\"{deletePersonel.Adi} {deletePersonel.SoyAdi}\" isimli personel başarıyla silinmiştir.");
        }
    }

Şimdi herşeyden önce ilgili Web API projemizi çalıştırıyoruz. Dolayısıyla IIS’de localhost üzerinden bir yayın yaparak Angular uygulamasında bağlanacağımız Web API’yi canlı tutuyoruz.

Angular uygulamamızda ise ilk olarak “app.module.ts” dosyasına gelerek Http servislerini kullanabilmek için “@angular/common/http” dizininde bulunan “HttpClientModule” modülünü import etmemiz gerekmektedir. Bunun yanında kullanacağımız web apinin değişkenlik göstermeyen url’ini de buradaki adreste anlatıldığı gibi providers özelliğine eklememiz, birazdan kullanım açısından bizlere oldukça kolaylık sağlayacaktır.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { PersonelComponent } from './components/personel/personel.component';
import { PersonelService } from './services/personel.service';

@NgModule({
  declarations: [
    AppComponent,
    PersonelComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [{ provide: "url", useValue: "http://localhost:50875/" }, PersonelService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ayriyetten web apiye göz atarsanız eğer yapmış olduğumuz işlemlerde kullandığımız “Personel” sınıfının Angular’da karşılığı olan sınıfımızı oluşturalım. Bunun nedeni; GET, POST ve PUT işlemlerinde gelen yahut gönderilen data yapılarının web api’dekiyle uyum içerisinde olabilmesini sağlamaktır.

export class Personel {
    PersonelID?: number;
    Adi: string;
    SoyAdi: string;
    Unvan: string;
}

Şimdi ise sıra web api ile tüm ilişkileri kuracak olan servisimizi yazmaya geldi.

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { inject } from '@angular/core/src/render3';
import { Personel } from '../classes/personel';

@Injectable()
export class PersonelService {

  constructor(private httpClient: HttpClient, @Inject("url") private url: string) { }

  GetAll() {
    return this.httpClient.get(this.url + "api/personel/getall");
  }
  GetSingle(id: number) {
    return this.httpClient.get(this.url + "api/personel/getsingle/" + id);
  }
  PostAdd(personel: Personel) {
    return this.httpClient.post(this.url + "api/personel/postadd", personel);
  }
  PutUpdate(personel: Personel) {
    return this.httpClient.put(this.url + "api/personel/putupdate", personel);
  }
  Remove(id: number) {
    return this.httpClient.delete(this.url + "api/personel/remove/" + id);
  }
}

Gördüğünüz üzere yazmış olduğumuz servis “HttpClient” nesnesi üzerinden verilen url’ye GET, POST, PUT veya DELETE taleplerinde bulunmakta ve parametrelerden gelen değerleri gerektiği taktirde ilgili işlemlerde kullanmaktadır.

Bu servisi kullanacak olan componentimizi oluşturup aşağıdaki gibi inşa edelim.

import { Component, OnInit } from '@angular/core';
import { Personel } from '../../classes/personel';
import { PersonelService } from '../../services/personel.service';
import { post } from 'selenium-webdriver/http';

@Component({
  selector: 'app-personel',
  templateUrl: './personel.component.html',
  styleUrls: ['./personel.component.css']
})
export class PersonelComponent implements OnInit {
  personelList: Personel[];
  personel: Personel;
  constructor(private personelService: PersonelService) { }

  ngOnInit() {
  }
  GetAll() {
    this.personelService.GetAll().subscribe((response: Personel[]) => this.personelList = response);
  }
  GetSingle(id: number) {
    this.personelService.GetSingle(id).subscribe((response: Personel) => this.personel = response);
  }
  PostAdd(adi: HTMLInputElement, soyAdi: HTMLInputElement, unvan: HTMLInputElement) {
    alert(adi.value + " " + soyAdi.value + " " + unvan.value);

    let postPersonel: Personel = {
      Adi: adi.value,
      SoyAdi: soyAdi.value,
      Unvan: unvan.value
    };

    this.personelService.PostAdd(postPersonel).subscribe((response: Personel) => {
      if (response) {
        this.personelList.unshift(response);
        this.personel = response;
      }
    });
  }
  PutUpdate(id: HTMLInputElement, adi: HTMLInputElement, soyAdi: HTMLInputElement, unvan: HTMLInputElement) {
    let updatePersonel: Personel = {
      PersonelID: Number(id.value),
      Adi: adi.value,
      SoyAdi: soyAdi.value,
      Unvan: unvan.value
    };
    this.personelService.PutUpdate(updatePersonel).subscribe((response: Personel) => {
      if (response) {
        this.GetAll();
        this.personel = response;
      }
    });
  }
  Remove(id: number) {
    this.personelService.Remove(id).subscribe(response => {
      alert(response);
      this.GetAll();
    });
  }
}

Görüldüğü üzere tüm işlemlerimiz bitmiştir. “PersonelComponent”indeki fonksiyonları, serviste kullanacakları metotlarla birebir aynı isimde yazmış bulunmaktayım. Bu benim tercihim. Siz istediğiniz fonksiyon isimlerini verebilirsiniz. İçeriklerine bakarsanız eğer servisteki fonksiyonun istediği parametreyi karşılayacak değerler oluşturulmakta ve bunlar ilgili fonksiyona gönderilmektedir.

İlgili componentin görüntüsünü de oluşturalım.

<div>
  <h2>GetAll - Remove</h2>
  <button (click)="GetAll()">Tüm Personelleri Getir</button>
  <div>
    <ul>
      <li *ngFor="let Personel of personelList">{{Personel.PersonelID}} - {{Personel.Adi}} {{Personel.SoyAdi}} ({{Personel.Unvan}}) <button (click)="Remove(Personel.PersonelID)">Sil</button></li>
    </ul>
  </div>
</div>
<hr>
<div>
  <h2>GetSingle</h2>
  <input type="text" #txtId>
  <br>
  <button (click)="GetSingle(txtId.value)">ID'ye sahip olanı getir</button>
  <span *ngIf="personel">{{personel.Adi + " " + personel.SoyAdi + " " + personel.Unvan}}</span>
</div>
<hr>
<div>
  <h2>PostAdd</h2>
  Adı :
  <br>
  <input type="text" #txtAdi />
  <br> Soyadı &nbsp; :
  <br>
  <input type="text" #txtSoyadi />
  <br> Unvan :
  <br>
  <input type="text" #txtUnvan />
  <br>
  <button (click)="PostAdd(txtAdi, txtSoyadi, txtUnvan)">Personel Ekle</button>
</div>
<hr>
<div>
  <h2>PutUpdate</h2>
  ID :
  <br>
  <input type="text" #txtID />
  <br> Adı :
  <br>
  <input type="text" #txtAdi2 />
  <br> Soyadı :
  <br>
  <input type="text" #txtSoyadi2 />
  <br> Unvan :
  <br>
  <input type="text" #txtUnvan2 />
  <br>
  <button (click)="PutUpdate(txtID, txtAdi2, txtSoyadi2, txtUnvan2)">Personel Güncelle</button>
</div>

Artık sıra tek tek fonksiyonlarımızı denemeye gelmiş bulunmaktadır.

• GetAll
  GetAll
• GetSingle
  
• PostAdd
  
• PutUpdate
  
• Remove
  

Evet… Angular ile Web Apilerin nasıl tetiklendiğini görmüş olduk.

Bir sonraki içeriğimizde Token Authentication uygulanan web apilere nasıl erişim sağlayacağımızı inceleyeceğiz.

Siz bu içeriği okurken bende bir yandan diğer makaleyi hazırlayayım…

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