<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular ile Web API tetiklemeyi inceliyor olaca\u011f\u0131z. \u0130lk olarak Asp.NET MVC \u2013 Web Api Nedir? Nas\u0131l Olu\u015fturulur?<\/a> ba\u015fl\u0131kl\u0131 makalemde ele ald\u0131\u011f\u0131m\u0131z gibi bir Web API olu\u015fturacak ve ard\u0131ndan bu Web API’ye Angular ile ba\u011flan\u0131p akabinde GET, POST ve PUT i\u015flemlerini ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n
Hi\u00e7 vakit kaybetmeden birer adet Angular uygulamas\u0131 ile yukar\u0131da adresi verilen makalede bahsedildi\u011fi gibi Web API projesi olu\u015fturunuz. Bizler i\u00e7eri\u011fimizde a\u015fa\u011f\u0131daki metotlar\u0131 bar\u0131nd\u0131ran bir Web API \u00fczerinden \u00f6rneklendirmede bulunaca\u011f\u0131z.<\/p>\n
\r\n    public class PersonelController : ApiController\r\n    {\r\n        NorthwindEntities db = new NorthwindEntities();\r\n        public IEnumerable<Personel> GetAll() => db.Personeller.Select(p => new Personel\r\n        {\r\n            PersonelID = p.PersonelID,\r\n            Adi = p.Adi,\r\n            SoyAdi = p.SoyAdi,\r\n            Unvan = p.Unvan\r\n        }).ToList();\r\n        public Personel GetSingle(int id) => db.Personeller.FirstOrDefault(p => p.PersonelID == id);\r\n        public IHttpActionResult PostAdd(Personel p)\r\n        {\r\n            if (p != null)\r\n            {\r\n                db.Personeller.Add(p);\r\n                db.SaveChanges();\r\n                return Ok(p);\r\n            }\r\n            return Ok("Personel ekleme ba\u015far\u0131s\u0131z.");\r\n        }\r\n        public IHttpActionResult PutUpdate(Personel p)\r\n        {\r\n            if (p != null)\r\n            {\r\n                Personeller updatePersonel = db.Personeller.FirstOrDefault(u => u.PersonelID == p.PersonelID);\r\n                updatePersonel.Adi = p.Adi;\r\n                updatePersonel.SoyAdi = p.SoyAdi;\r\n                updatePersonel.Unvan = p.Unvan;\r\n                db.SaveChanges();\r\n                return Ok(updatePersonel);\r\n            }\r\n            return Ok("Personel g\u00fcncelle\u015ftirme ba\u015far\u0131s\u0131z.");\r\n        }\r\n        [HttpDelete]\r\n        public IHttpActionResult Remove(int id)\r\n        {\r\n            Personeller deletePersonel = db.Personeller.FirstOrDefault(p => p.PersonelID == id);\r\n            db.Personeller.Remove(deletePersonel);\r\n            db.SaveChanges();\r\n            return Ok($"\\"{deletePersonel.Adi} {deletePersonel.SoyAdi}\\" isimli personel ba\u015far\u0131yla silinmi\u015ftir.");\r\n        }\r\n    }\r\n<\/pre>\n\u015eimdi her\u015feyden \u00f6nce ilgili Web API projemizi \u00e7al\u0131\u015ft\u0131r\u0131yoruz. Dolay\u0131s\u0131yla IIS’de localhost \u00fczerinden bir yay\u0131n yaparak Angular uygulamas\u0131nda ba\u011flanaca\u011f\u0131m\u0131z Web API’yi canl\u0131 tutuyoruz.<\/p>\nAngular uygulamam\u0131zda ise ilk olarak “app.module.ts” dosyas\u0131na gelerek Http servislerini kullanabilmek i\u00e7in “@angular\/common\/http” dizininde bulunan “HttpClientModule” mod\u00fcl\u00fcn\u00fc import etmemiz gerekmektedir. Bunun yan\u0131nda kullanaca\u011f\u0131m\u0131z web apinin de\u011fi\u015fkenlik g\u00f6stermeyen url’ini de buradaki<\/a> adreste anlat\u0131ld\u0131\u011f\u0131 gibi providers \u00f6zelli\u011fine eklememiz, birazdan kullan\u0131m a\u00e7\u0131s\u0131ndan bizlere olduk\u00e7a kolayl\u0131k sa\u011flayacakt\u0131r.<\/p>\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { HttpClientModule } from "@angular\/common\/http";\r\nimport { AppComponent } from '.\/app.component';\r\nimport { PersonelComponent } from '.\/components\/personel\/personel.component';\r\nimport { PersonelService } from '.\/services\/personel.service';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent,\r\n    PersonelComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    HttpClientModule\r\n  ],\r\n  providers: [{ provide: "url", useValue: "http:\/\/localhost:50875\/" }, PersonelService],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nAyriyetten web apiye g\u00f6z atarsan\u0131z e\u011fer yapm\u0131\u015f oldu\u011fumuz i\u015flemlerde kulland\u0131\u011f\u0131m\u0131z “Personel” s\u0131n\u0131f\u0131n\u0131n Angular’da kar\u015f\u0131l\u0131\u011f\u0131 olan s\u0131n\u0131f\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Bunun nedeni; GET, POST ve PUT i\u015flemlerinde gelen yahut g\u00f6nderilen data yap\u0131lar\u0131n\u0131n web api’dekiyle uyum i\u00e7erisinde olabilmesini sa\u011flamakt\u0131r.<\/p>\n\r\nexport class Personel {\r\n    PersonelID?: number;\r\n    Adi: string;\r\n    SoyAdi: string;\r\n    Unvan: string;\r\n}\r\n<\/pre>\n\u015eimdi ise s\u0131ra web api ile t\u00fcm ili\u015fkileri kuracak olan servisimizi yazmaya geldi.<\/p>\n\r\nimport { Injectable, Inject } from '@angular\/core';\r\nimport { HttpClient } from "@angular\/common\/http";\r\nimport { inject } from '@angular\/core\/src\/render3';\r\nimport { Personel } from '..\/classes\/personel';\r\n\r\n@Injectable()\r\nexport class PersonelService {\r\n\r\n  constructor(private httpClient: HttpClient, @Inject("url") private url: string) { }\r\n\r\n  GetAll() {\r\n    return this.httpClient.get(this.url + "api\/personel\/getall");\r\n  }\r\n  GetSingle(id: number) {\r\n    return this.httpClient.get(this.url + "api\/personel\/getsingle\/" + id);\r\n  }\r\n  PostAdd(personel: Personel) {\r\n    return this.httpClient.post(this.url + "api\/personel\/postadd", personel);\r\n  }\r\n  PutUpdate(personel: Personel) {\r\n    return this.httpClient.put(this.url + "api\/personel\/putupdate", personel);\r\n  }\r\n  Remove(id: number) {\r\n    return this.httpClient.delete(this.url + "api\/personel\/remove\/" + id);\r\n  }\r\n}\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere yazm\u0131\u015f oldu\u011fumuz servis “HttpClient” nesnesi \u00fczerinden verilen url’ye GET, POST, PUT veya DELETE taleplerinde bulunmakta ve parametrelerden gelen de\u011ferleri gerekti\u011fi taktirde ilgili i\u015flemlerde kullanmaktad\u0131r.<\/p>\n
Bu servisi kullanacak olan componentimizi olu\u015fturup a\u015fa\u011f\u0131daki gibi in\u015fa edelim.<\/p>\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { Personel } from '..\/..\/classes\/personel';\r\nimport { PersonelService } from '..\/..\/services\/personel.service';\r\nimport { post } from 'selenium-webdriver\/http';\r\n\r\n@Component({\r\n  selector: 'app-personel',\r\n  templateUrl: '.\/personel.component.html',\r\n  styleUrls: ['.\/personel.component.css']\r\n})\r\nexport class PersonelComponent implements OnInit {\r\n  personelList: Personel[];\r\n  personel: Personel;\r\n  constructor(private personelService: PersonelService) { }\r\n\r\n  ngOnInit() {\r\n  }\r\n  GetAll() {\r\n    this.personelService.GetAll().subscribe((response: Personel[]) => this.personelList = response);\r\n  }\r\n  GetSingle(id: number) {\r\n    this.personelService.GetSingle(id).subscribe((response: Personel) => this.personel = response);\r\n  }\r\n  PostAdd(adi: HTMLInputElement, soyAdi: HTMLInputElement, unvan: HTMLInputElement) {\r\n    alert(adi.value + " " + soyAdi.value + " " + unvan.value);\r\n\r\n    let postPersonel: Personel = {\r\n      Adi: adi.value,\r\n      SoyAdi: soyAdi.value,\r\n      Unvan: unvan.value\r\n    };\r\n\r\n    this.personelService.PostAdd(postPersonel).subscribe((response: Personel) => {\r\n      if (response) {\r\n        this.personelList.unshift(response);\r\n        this.personel = response;\r\n      }\r\n    });\r\n  }\r\n  PutUpdate(id: HTMLInputElement, adi: HTMLInputElement, soyAdi: HTMLInputElement, unvan: HTMLInputElement) {\r\n    let updatePersonel: Personel = {\r\n      PersonelID: Number(id.value),\r\n      Adi: adi.value,\r\n      SoyAdi: soyAdi.value,\r\n      Unvan: unvan.value\r\n    };\r\n    this.personelService.PutUpdate(updatePersonel).subscribe((response: Personel) => {\r\n      if (response) {\r\n        this.GetAll();\r\n        this.personel = response;\r\n      }\r\n    });\r\n  }\r\n  Remove(id: number) {\r\n    this.personelService.Remove(id).subscribe(response => {\r\n      alert(response);\r\n      this.GetAll();\r\n    });\r\n  }\r\n}\r\n<\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere t\u00fcm i\u015flemlerimiz bitmi\u015ftir. “PersonelComponent”indeki fonksiyonlar\u0131, serviste kullanacaklar\u0131 metotlarla birebir ayn\u0131 isimde yazm\u0131\u015f bulunmaktay\u0131m. Bu benim tercihim. Siz istedi\u011finiz fonksiyon isimlerini verebilirsiniz. \u0130\u00e7eriklerine bakarsan\u0131z e\u011fer servisteki fonksiyonun istedi\u011fi parametreyi kar\u015f\u0131layacak de\u011ferler olu\u015fturulmakta ve bunlar ilgili fonksiyona g\u00f6nderilmektedir.<\/p>\n
\u0130lgili componentin g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc de olu\u015ftural\u0131m.<\/p>\n\r\n<div>\r\n  <h2>GetAll - Remove<\/h2>\r\n  <button (click)="GetAll()">T\u00fcm Personelleri Getir<\/button>\r\n  <div>\r\n    <ul>\r\n      <li *ngFor="let Personel of personelList">{{Personel.PersonelID}} - {{Personel.Adi}} {{Personel.SoyAdi}} ({{Personel.Unvan}}) <button (click)="Remove(Personel.PersonelID)">Sil<\/button><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/div>\r\n<hr>\r\n<div>\r\n  <h2>GetSingle<\/h2>\r\n  <input type="text" #txtId>\r\n  <br>\r\n  <button (click)="GetSingle(txtId.value)">ID'ye sahip olan\u0131 getir<\/button>\r\n  <span *ngIf="personel">{{personel.Adi + " " + personel.SoyAdi + " " + personel.Unvan}}<\/span>\r\n<\/div>\r\n<hr>\r\n<div>\r\n  <h2>PostAdd<\/h2>\r\n  Ad\u0131 :\r\n  <br>\r\n  <input type="text" #txtAdi \/>\r\n  <br> Soyad\u0131 &nbsp; :\r\n  <br>\r\n  <input type="text" #txtSoyadi \/>\r\n  <br> Unvan :\r\n  <br>\r\n  <input type="text" #txtUnvan \/>\r\n  <br>\r\n  <button (click)="PostAdd(txtAdi, txtSoyadi, txtUnvan)">Personel Ekle<\/button>\r\n<\/div>\r\n<hr>\r\n<div>\r\n  <h2>PutUpdate<\/h2>\r\n  ID :\r\n  <br>\r\n  <input type="text" #txtID \/>\r\n  <br> Ad\u0131 :\r\n  <br>\r\n  <input type="text" #txtAdi2 \/>\r\n  <br> Soyad\u0131 :\r\n  <br>\r\n  <input type="text" #txtSoyadi2 \/>\r\n  <br> Unvan :\r\n  <br>\r\n  <input type="text" #txtUnvan2 \/>\r\n  <br>\r\n  <button (click)="PutUpdate(txtID, txtAdi2, txtSoyadi2, txtUnvan2)">Personel G\u00fcncelle<\/button>\r\n<\/div>\r\n<\/pre>\nArt\u0131k s\u0131ra tek tek fonksiyonlar\u0131m\u0131z\u0131 denemeye gelmi\u015f bulunmaktad\u0131r.<\/p>\n\nGetAll<\/strong>
\n<\/a>GetAll<\/li>\n
GetSingle<\/strong>
\n<\/a><\/li>\n
PostAdd<\/strong>
\n<\/a><\/li>\n
PutUpdate<\/strong>
\n<\/a><\/li>\n
Remove<\/strong>
\n<\/a><\/li>\n<\/ul>\nEvet… Angular ile Web Apilerin nas\u0131l tetiklendi\u011fini g\u00f6rm\u00fc\u015f olduk.<\/p>\n
Bir sonraki i\u00e7eri\u011fimizde Token Authentication uygulanan web apilere nas\u0131l eri\u015fim sa\u011flayaca\u011f\u0131m\u0131z\u0131 inceleyece\u011fiz.<\/p>\n
Siz bu i\u00e7eri\u011fi okurken bende bir yandan di\u011fer makaleyi haz\u0131rlayay\u0131m…<\/p>\n
O halde g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular ile Web API tetiklemeyi inceliyor olaca\u011f\u0131z. \u0130lk olarak Asp.NET MVC \u2013 Web Api Nedir? Nas\u0131l Olu\u015fturulur? ba\u015fl\u0131kl\u0131 makalemde ele ald\u0131\u011f\u0131m\u0131z gibi bir Web API olu\u015fturacak ve ard\u0131ndan bu Web API’ye...<\/p>\n","protected":false},"author":1,"featured_media":7246,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144,11,2402],"tags":[2156,2412,2413,2399],"class_list":["post-8371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","category-asp-net-mvc","category-web-api","tag-angular","tag-angular-ile-web-api-tetikleme","tag-angular-web-api","tag-web-api"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=8371"}],"version-history":[{"count":29,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8371\/revisions"}],"predecessor-version":[{"id":8406,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/8371\/revisions\/8406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7246"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=8371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=8371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=8371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}