<\/div>\n
Merhaba,<\/p>\n
Angular mimarisinde, stratejik temellendirmeleri mod\u00fcller e\u015fli\u011finde kuruyor ve uygulaman\u0131n genel in\u015faat\u0131n\u0131 bu mod\u00fcller \u00e7er\u00e7evesinde s\u0131n\u0131rland\u0131r\u0131yoruz. \u00d6zellikle component, directive ya da pipe yap\u0131lanmalar\u0131n\u0131 hususi mod\u00fcller ile geli\u015ftiriyor ve ihtiya\u00e7 noktas\u0131nda kullan\u0131lacak yap\u0131y\u0131, o noktadaki sorumlu mod\u00fcl taraf\u0131ndan import ederek eri\u015filebilir k\u0131l\u0131yoruz. Bu duruma en g\u00fczel \u00f6rnek olarak youtube kanal\u0131mda yay\u0131nlad\u0131\u011f\u0131m mini e-ticaret<\/a> projesini inceleyebilirsiniz. \u0130lgili projenin kaynak kodlar\u0131n\u0131 inceleyebilmek i\u00e7in github<\/a> reposuna da g\u00f6z atabilirsiniz.<\/span> Halbuki bu durum her bir component, directive ve pipe yap\u0131lanmas\u0131 i\u00e7in ayr\u0131 bir mod\u00fcl olu\u015fturman\u0131n getirisi olan kod maliyetiyle birlikte, istemsiz bir karma\u015f\u0131kl\u0131\u011fa da sebebiyet verebilmektedir. \u015eimdi gelin bu i\u00e7eri\u011fimizde bu karma\u015f\u0131kl\u0131\u011f\u0131n neler olabilece\u011fini masaya yat\u0131r\u0131p tart\u0131\u015fal\u0131m ve alternatif \u00e7\u00f6z\u00fcm olarak Angular 14 ile birlikte gelen Standalone Components\/Directives \/Pipes \u00f6zelli\u011fi \u00fczerine isti\u015fare eyleyelim. Hadi ba\u015flayal\u0131m…<\/p>\n
Misal olarak bir component olu\u015fturmak istedi\u011fimizde en basitinden bu component’in i\u015flevsel hale gelebilmesi i\u00e7in ne gibi in\u015falarda bulunmam\u0131z gerekti\u011fini g\u00f6zlemleyerek girizgah yapal\u0131m isterim.<\/p>\n
\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-hello',\r\n  template: `<h3>Hello<\/h3>`,\r\n  styleUrls: ['.\/hello.component.scss']\r\n})\r\nexport class HelloComponent implements OnInit {\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n\u015eimdi bu component’i uygulama s\u00fcrecinde kullanabilmek ve bu component’te kullan\u0131lacak di\u011fer yap\u0131lar\u0131 da entegre edebilmek i\u00e7in bu component’i temsil edecek bir mod\u00fcl olu\u015fturmam\u0131z gerekecektir.<\/p>\n\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { CommonModule } from '@angular\/common';\r\nimport { HelloComponent } from '.\/hello.component';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    HelloComponent\r\n  ],\r\n  imports: [\r\n    CommonModule\r\n  ],\r\n  exports: [\r\n    HelloComponent\r\n  ]\r\n})\r\nexport class HelloModule { }\r\n<\/pre>\n<\/div>\nTabi olu\u015fturulan bu mod\u00fcle bakarsak e\u011fer ‘HelloComponent’ hem declare edilmeli hem de ba\u015fka bir component’te selector \u00fczerinden kullan\u0131labilmesi i\u00e7in export edilmelidir. \u015eimdi bu component’i ‘app.component.html’ dosyas\u0131nda kullanabilmek i\u00e7in a\u015fa\u011f\u0131daki gibi selector’\u0131n\u0131 \u00e7a\u011f\u0131rmam\u0131z gerekecektir.<\/p>\n\n\r\n<app-hello><\/app-hello>\r\n<\/pre>\n<\/div>\nT\u00fcm bu s\u00fcrecin sa\u011fl\u0131kl\u0131 bir \u015fekilde i\u015fleyebilmesi i\u00e7in olu\u015fturulan ‘HelloModule’\u00fc uygulaman\u0131n ana mod\u00fcl\u00fc olan ‘AppModule’e import etmemiz gerekmektedir.<\/p>\n\n\r\nimport { NgModule } from '@angular\/core';\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\n\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HelloModule } from '.\/hello\/hello.module';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    HelloModule\r\n  ],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n<\/div>\n<\/a>Yok art\u0131k, m**n* y\u0131m.\ud83e\udd78<\/p><\/div>G\u00f6r\u00fcyorsunuz ki, bir Angular uygulamas\u0131nda basit bir component’i mimarisel olarak oyuna sokabilmek i\u00e7in neler yap\u0131lmas\u0131 gerekmektedir. \u0130\u015fte kastedilen kod maliyetine bir \u00f6rnek. Karma\u015f\u0131kl\u0131\u011fa gelirsek e\u011fer Angular’\u0131 yeni \u00f6\u011frenen birisi i\u00e7in bu mod\u00fcler yap\u0131lanmay\u0131 anlamak ve \u00f6zellikle i\u015flevsel olarak export ve declare davran\u0131\u015flar\u0131n\u0131 kafada oturtmak \u00f6\u011frenmeyi zorla\u015ft\u0131ran etkenlerin ba\u015f\u0131nda geliyor diye d\u00fc\u015f\u00fcn\u00fcyorum. Ayr\u0131ca bu tarz bir \u00e7al\u0131\u015fmada ince hatalar\u0131n yap\u0131lmas\u0131 ve mimarisel gereksinim olan kurall\u0131 tan\u0131mlamalar\u0131n unutulmas\u0131 gayet muhtemel…(ki 5 y\u0131la yak\u0131nd\u0131r Angular ile geli\u015ftirme yapmaktay\u0131m, hala ve hala export’lar\u0131 import’lar\u0131 unutmaktan vazge\u00e7emedim : )<\/p>\n
Peki bu kod maliyetinden ve karma\u015f\u0131kl\u0131ktan nas\u0131l kurtulabiliriz la hoca?<\/em><\/strong> \u015feklinde sorunuzu duyar gibiyim… \u0130\u015fte bu makalenin muhtevas\u0131 bu sorunun cevab\u0131 i\u00e7indir… El-cevap; Standalone Components\/Directives\/Pipes<\/strong><\/em>…<\/p>\nStandalone Components\/Directives\/Pipes<\/h3>\nAngular Standalone Components\/Directives\/Pipes, uygulamay\u0131 mod\u00fcler ba\u011f\u0131ml\u0131l\u0131klardan kurtarmay\u0131 hedefleyen ya da bir ba\u015fka deyi\u015fle mod\u00fcl ihtiyac\u0131n\u0131 azaltarak uygulaman\u0131n in\u015fa s\u00fcrecini kolayla\u015ft\u0131rmay\u0131 ama\u00e7layan yeni bir niteliktir.<\/p>\nStandalone Components\/Directives\/Pipes \u00f6zelli\u011fi, v14’te developer preview seviyesindedirler. Kararl\u0131 bir yenilik olmad\u0131klar\u0131 i\u00e7in bu i\u00e7erikte sunulacak olanlar\u0131n d\u0131\u015f\u0131nda potansiyel olarak de\u011fi\u015fikliklere u\u011frayabilirler.<\/em><\/p><\/blockquote>\n
\u015eimdi yine yukar\u0131da olu\u015fturdu\u011fumuz component’i standalone olarak tasarlamak istersek bu sefer de a\u015fa\u011f\u0131daki gibi basit bir konfig\u00fcrasyonel ayar yapmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\r\nimport { Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-hello',\r\n  template: `<h3>Hello<\/h3>`,\r\n  styleUrls: ['.\/hello.component.scss'],\r\n  standalone: true\r\n})\r\nexport class HelloComponent implements OnInit {\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\n7.<\/strong> sat\u0131rda g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere ‘Component’ dekorat\u00f6r\u00fcn\u00fcn i\u00e7erisinde ‘standalone’ parametresine ‘true’ de\u011ferini vererek ilgili component’in bir standalone component oldu\u011funu bildiriyoruz. B\u00f6ylece art\u0131k bu component’in declare edilebilir bir component’ten ziyade ba\u011f\u0131ms\u0131z bir component oldu\u011funu ifade etmi\u015f oluyoruz. Tabi bu durumda da ‘selector’ \u00fczerinden bir kullan\u0131m sergilemek istiyorsak e\u011fer bunun i\u00e7in art\u0131k hedef component’in bulundu\u011fu mod\u00fclde ya da component’in ta kendisinde bu standalone component’in import edilmesi gerekmektedir! Evet, yanl\u0131\u015f okumad\u0131n\u0131z, standalone component’ler kullan\u0131lacaklar\u0131 noktalarda import edilmek zorundad\u0131rlar!<\/p>\n\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    HelloComponent\r\n  ],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n<\/div>\nYukar\u0131daki kod blo\u011funa bakarsan\u0131z e\u011fer, standalone component olan ‘HelloComponent’i ‘AppComponent’te kullanabilmek i\u00e7in ‘AppComponent’in declare edildi\u011fi ‘AppModule’de import ediyoruz. B\u00f6ylece selector \u00f6zelli\u011fini ‘AppComponent’te kullanmaya devam edebiliyoruz.<\/p>\n\n\r\n<app-hello><\/app-hello>\r\n<\/pre>\n<\/div>\nAyn\u0131 durum directive ve pipe yap\u0131lanmalar\u0131 i\u00e7in de ge\u00e7erlidir. Misal olarak a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fmalar\u0131 inceleyebilirsiniz;<\/p>\n
\n\r\n@Directive({\r\n  selector: '[appHello]',\r\n  standalone: true\r\n})\r\nexport class HelloDirective {\r\n\r\n  constructor(private element: ElementRef) {\r\n    element.nativeElement.innerHTML = "Hello";\r\n  }\r\n\r\n}\r\n<\/pre>\n<\/div>\n\n\r\n@Pipe({\r\n  name: 'hello',\r\n  standalone: true\r\n})\r\nexport class HelloPipe implements PipeTransform {\r\n\r\n  transform(value: string) {\r\n    return "Hello";\r\n  }\r\n\r\n}\r\n<\/pre>\n<\/div>\n\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    HelloComponent, HelloDirective, HelloPipe\r\n  ],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n<\/div>\n\n\r\n<h3 appHello><\/h3>\r\n\r\n{{ "" | hello }}\r\n<\/pre>\n<\/div>\nBir Standalone Yap\u0131da Ba\u015fka Bir Standalone Yap\u0131y\u0131 Kullanmak<\/h3>\nStandalone yap\u0131lar, herhangi bir mod\u00fcle ba\u011f\u0131ml\u0131l\u0131klar\u0131 olmad\u0131\u011f\u0131 i\u00e7in kendi aralar\u0131nda kullan\u0131l\u0131rken import tan\u0131mlamas\u0131n\u0131 direkt ‘Component’ dekorat\u00f6r\u00fcn\u00fcn ‘imports’ parametresi \u00fczerinden ger\u00e7ekle\u015ftirmektedirler.<\/p>\n
\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { HelloPipe } from '..\/pipes\/hello.pipe';\r\n\r\n@Component({\r\n  selector: 'app-hello',\r\n  template: `\r\n    <h3>Hello<\/h3>\r\n    {{ "" | hello }}\r\n            `,\r\n  styleUrls: ['.\/hello.component.scss'],\r\n  standalone: true,\r\n  imports: [HelloPipe]\r\n})\r\nexport class HelloComponent implements OnInit {\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nMisal olarak yukar\u0131daki kod blo\u011funu incelerseniz; standalone component olan ‘HelloComponent’, standalone pipe olan ‘HelloPipe’\u0131 kullanmak istedi\u011finde bunu 12.<\/strong> sat\u0131rda oldu\u011fu gibi ‘imports’ parametresi e\u015fli\u011finde bildirmektedir.<\/p>\n
Standalone Yap\u0131larda Mod\u00fcler Yap\u0131lar\u0131 Kullanmak<\/h3>\nAyn\u0131 \u015fekilde standalone bir yap\u0131da mod\u00fcler bir yap\u0131lanmay\u0131 kullanabilmek i\u00e7in de ‘imports’ parametresinde gerekli tan\u0131mlaman\u0131n yap\u0131lmas\u0131 gerekmektedir.<\/p>\n
\n\r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { HelloPipe } from '..\/pipes\/hello.pipe';\r\nimport { MatButtonModule } from '@angular\/material\/button';\r\n\r\n@Component({\r\n  selector: 'app-hello',\r\n  template: `\r\n    <h3>Hello<\/h3>\r\n    {{ "" | hello }}\r\n    <button mat-raised-button color="primary">Primary<\/button>\r\n            `,\r\n  styleUrls: ['.\/hello.component.scss'],\r\n  standalone: true,\r\n  imports: [HelloPipe, MatButtonModule]\r\n})\r\nexport class HelloComponent implements OnInit {\r\n\r\n  constructor() { }\r\n\r\n  ngOnInit(): void {\r\n  }\r\n}\r\n<\/pre>\n<\/div>\nMisal olarak yukar\u0131daki \u00f6rne\u011fi incelerseniz standalone component olan ‘HelloComponent’ i\u00e7erisinde material button kullanabilmek i\u00e7in ‘MatButtonModule’ mod\u00fcl\u00fcn\u00fcn import edilmesi gerekmektedir.<\/p>\n
AppModule’den Kurtulmak<\/h3>\nStandalone component’ler de amac\u0131n m\u00fcmk\u00fcn mertebe mod\u00fcler yap\u0131lanmadan kurtulmak oldu\u011funu s\u00f6ylemi\u015ftik. Hatta bunu biraz daha ilerleterek uygulamay\u0131 ‘AppModule’den de kurtarmak \u015feklinde d\u00fc\u015f\u00fcnebiliriz. Bu niyeti ger\u00e7ekle\u015ftirmek i\u00e7in uygulamada ‘AppModule’\u00fc silerek ba\u015flayabiliriz. \ud83e\udd78\ud83e\udd78‘AppModule’\u00fc silmek mi? \u0130yide hoca o zaman uygulama takla atmam\u0131z m\u0131 lo?<\/em><\/strong> dedi\u011finizi duyar gibiyim \ud83d\ude42 Tabi ki de uygulama takla atar. Lakin uygulamada ‘AppModule’\u00fcn getirdi\u011fi ba\u011f\u0131ml\u0131l\u0131klar\u0131 ortadan kald\u0131racak ama bir yandan da onun t\u00fcm sorumlulu\u011funu \u00fcstlenecek bir noktaya ihtiyac\u0131m\u0131z olacakt\u0131r. Bu da ‘main.ts’ dosyas\u0131d\u0131r.<\/p>\n
\n\r\nimport { bootstrapApplication, BrowserModule } from '@angular\/platform-browser';\r\n.\r\n.\r\n.\r\n\r\nif (environment.production) {\r\n  enableProdMode();\r\n}\r\n\r\n\/\/platformBrowserDynamic().bootstrapModule(AppModule)\r\n\/\/  .catch(err => console.error(err));\r\n\r\nbootstrapApplication(AppComponent, {\r\n  providers: [\r\n    { provide: "url", useValue: "https:\/\/..." },\r\n    importProvidersFrom(\r\n      BrowserModule,\r\n      AppRoutingModule,\r\n      BrowserAnimationsModule\r\n    )\r\n  ]\r\n})\r\n<\/pre>\n<\/div>\nYukar\u0131da ‘main.ts’ dosyas\u0131n\u0131n son halini g\u00f6rmektesiniz. \u0130\u00e7eri\u011fine bakarsan\u0131z e\u011fer 10<\/strong> ile 11.<\/strong> sat\u0131r aral\u0131\u011f\u0131nda yorum sat\u0131r\u0131 olarak ayarlanan platformBrowserDynamic<\/code> fonksiyonu devam\u0131nda ana mod\u00fcl\u00fc ‘AppModule’ olarak belirlememizi sa\u011flayan bootstrapModule<\/code> fonksiyonu ile uygulamay\u0131 ‘AppModule’e ba\u011f\u0131ml\u0131 bir hale getiriyorduk. Haliyle ilgili kod k\u0131sm\u0131 silinerek bu ba\u011f\u0131ml\u0131l\u0131k ortadan kald\u0131r\u0131lm\u0131\u015ft\u0131r. Bunun yerine, 13<\/strong> ile 22.<\/strong> sat\u0131r aral\u0131\u011f\u0131nda oldu\u011fu gibi ‘@angular\/platform-browser’<\/em> path’in de olan bootstrapApplication<\/code> metodu sayesinde art\u0131k uygulaman\u0131n ana mod\u00fcl\u00fcnden ziyade direkt ana component’i bildirilmekte ve ard\u0131ndan ‘AppModule’de ki importlar ikinci parametre olarak ‘providers’a kar\u015f\u0131l\u0131k verilmektedir. B\u00f6ylece art\u0131k uygulama mod\u00fclerli\u011fe olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131ndan tamamen izole olmu\u015f bir vaziyette temellendirilmektedir. <\/p>\n
Burada \u00f6zellikle dikkat etmenizi istedi\u011fim nokta 16.<\/strong> sat\u0131rdaki importProvidersFrom<\/code> fonksiyonudur. \u015eimdi normal \u015fartlarda bizler ‘providers’a singleton olarak tutulacak olan nesneleri vermeye, mod\u00fclleri ise import etmeye al\u0131\u015fk\u0131n\u0131z. Amma velakin burada import edilecek mod\u00fcller de ‘providers’ \u00fczerinden verilmektedir. Hah i\u015fte buradaki ayr\u0131m\u0131 yaratabilmek i\u00e7in mod\u00fcllerin importProvidersFrom<\/code> metodu arac\u0131l\u0131\u011f\u0131 ile verilmesi gerekmektedir.<\/p>\n
Routing ve Lazy Loading<\/h3>\nUygulama standalone altyap\u0131s\u0131 sayesinde mod\u00fcler yap\u0131lanmadan soyutland\u0131\u011f\u0131na g\u00f6re bu durum routing i\u015flemleri i\u00e7inde ayr\u0131 bir nitelik kazand\u0131rmaktad\u0131r. Nihayetinde lazy loading s\u00fcre\u00e7lerinde mod\u00fcler yap\u0131lanmalar\u0131 loadChildren<\/code> ile bildiriyorken, standalone component’leri ise mod\u00fclleri olmad\u0131\u011f\u0131 i\u00e7in loadComponent<\/code> fonksiyonu ile bildirmemiz gerekmektedir.<\/p>\n
\n\r\n.\r\n.\r\n.\r\nconst routes: Routes = [\r\n  {\r\n    path: "hello", loadComponent: () => import(".\/hello\/hello.component")\r\n      .then(component => component.HelloComponent)\r\n  },\r\n  {\r\n    path: "example", loadChildren: () => import(".\/example\/example.module")\r\n      .then(module => module.ExampleModule)\r\n  }\r\n];\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/div>\nTabi bu tan\u0131mlamadan sonra ilgili routing i\u015flemlerinin yap\u0131laca\u011f\u0131 component hangisi olursa olsun ‘imports’ \u00f6zelli\u011fine ‘RouterModule’\u00fcn eklenmesi gerekmektedir. Misal olarak routing i\u015fleminin ‘AppComponent’te yap\u0131laca\u011f\u0131n\u0131 varsayarsak e\u011fer a\u015fa\u011f\u0131daki gibi ismi ge\u00e7en mod\u00fcl\u00fcn bildirilmesi zaruridir.<\/p>\n
\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.scss'],\r\n  standalone: true,\r\n  imports: [HelloComponent, HelloPipe, HelloDirective, RouterModule]\r\n})\r\nexport class AppComponent {\r\n  title = 'standaloneExample';\r\n}\r\n<\/pre>\n<\/div>\nNihai olarak,
\nAngular mimarlar\u0131n\u0131n, uygulama s\u00fcre\u00e7lerinde ana akt\u00f6rlerden biri olan component yap\u0131lanmas\u0131n\u0131n herhangi bir mod\u00fcle ba\u011f\u0131ml\u0131 olmaks\u0131z\u0131n geli\u015ftirilmesini ve b\u00f6ylece kod maliyetini d\u00fc\u015f\u00fcrmek ile birlikte kullan\u0131m kolayl\u0131\u011f\u0131n\u0131 hedefledi\u011fini g\u00f6rmekteyiz. Nacizane fikir olarak g\u00fczel ve umut verici bir geli\u015fme oldu\u011funun alt\u0131n\u0131 \u00e7izerek yaz\u0131m\u0131z\u0131 noktal\u0131yorum.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n
Not : \u00d6rnek \u00e7al\u0131\u015fmay\u0131 a\u015fa\u011f\u0131daki github adresinden inceleyebilirsiniz.
\nhttps:\/\/github.com\/gncyyldz\/StandaloneComponentsExample<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Angular mimarisinde, stratejik temellendirmeleri mod\u00fcller e\u015fli\u011finde kuruyor ve uygulaman\u0131n genel in\u015faat\u0131n\u0131 bu mod\u00fcller \u00e7er\u00e7evesinde s\u0131n\u0131rland\u0131r\u0131yoruz. \u00d6zellikle component, directive ya da pipe yap\u0131lanmalar\u0131n\u0131 hususi mod\u00fcller ile geli\u015ftiriyor ve ihtiya\u00e7 noktas\u0131nda kullan\u0131lacak yap\u0131y\u0131, o noktadaki...<\/p>\n","protected":false},"author":1,"featured_media":25346,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2420,4610],"tags":[4617,4614,4615,4616,4621,4618,4619,4620],"class_list":["post-25323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-angular-14","tag-angular-standalone","tag-angular-standalone-components","tag-angular-standalone-directives","tag-angular-standalone-pipes","tag-importprovidersfrom","tag-standalone-components","tag-standalone-directives","tag-standalone-pipes"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25323","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=25323"}],"version-history":[{"count":24,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25323\/revisions"}],"predecessor-version":[{"id":25349,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/25323\/revisions\/25349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/25346"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=25323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=25323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=25323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}