{"id":34102,"date":"2025-11-11T07:00:59","date_gmt":"2025-11-11T04:00:59","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/"},"modified":"2025-11-11T07:00:59","modified_gmt":"2025-11-11T04:00:59","slug":"angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/","title":{"rendered":"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme"},"content":{"rendered":"

<\/p>\n

Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.<\/p>\n

Modern web uygulamalar\u0131nda, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) tasar\u0131m\u0131 ve kullan\u0131c\u0131 deneyimi (UX) en \u00f6nemli \u00f6nceliklerdendir. Bu ba\u011flamda, i\u00e7erik sunumu kritik bir rol oynar. Genellikle, web sayfalar\u0131nda veya mobil uygulamalarda kartlar, listeler, \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131, blog yaz\u0131s\u0131 \u00f6zetleri gibi alanlarda uzun metinlerin g\u00f6sterilmesi gerekebilir. Ancak bu uzun metinler, s\u0131n\u0131rl\u0131 ekran alan\u0131nda karma\u015faya yol a\u00e7abilir, aray\u00fcz\u00fcn d\u00fczenini bozabilir ve hatta kullan\u0131c\u0131lar\u0131n ilgisini kaybetmesine neden olabilir. \u00d6zellikle mobil cihazlarda, dar ekranlar bu problemi daha da belirgin hale getirir.<\/p>\n

Metin k\u0131saltma (truncation) bu soruna yayg\u0131n bir \u00e7\u00f6z\u00fcm sunar. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131n\u0131n sadece ilk birka\u00e7 c\u00fcmlesini g\u00f6sterip sonuna \u00fc\u00e7 nokta (…) ekleyerek kullan\u0131c\u0131lara genel bir fikir verebilirsiniz. Ancak bu tek ba\u015f\u0131na yeterli de\u011fildir. Kullan\u0131c\u0131lar, ilgilerini \u00e7eken metnin tamam\u0131n\u0131 g\u00f6rmek isteyeceklerdir. \u0130\u015fte bu noktada “Devam\u0131n\u0131 Oku” veya “Daha Fazla G\u00f6ster” gibi etkile\u015fimli elemanlara ihtiya\u00e7 duyar\u0131z. Statik bir CSS \u00e7\u00f6z\u00fcm\u00fc olan text-overflow: ellipsis;<\/code> metni keser, ancak kullan\u0131c\u0131n\u0131n metnin tamam\u0131na eri\u015fmesini sa\u011flamaz. Bu durum, UX a\u00e7\u0131s\u0131ndan eksik kal\u0131r.<\/p>\n

Angular Direktifleri, bu t\u00fcr tekrarlayan ve etkile\u015fimli UI sorunlar\u0131na \u015f\u0131k ve yeniden kullan\u0131labilir \u00e7\u00f6z\u00fcmler sunar. Kendi \u00f6zel direktifimizi olu\u015fturarak, bir metnin belirli bir uzunluktan sonra k\u0131salt\u0131lmas\u0131n\u0131 sa\u011flayabilir, sonuna bir “Devam\u0131n\u0131 Oku” d\u00fc\u011fmesi ekleyebilir ve bu d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda metnin tamam\u0131n\u0131 g\u00f6sterip gizleyebiliriz. Bu yakla\u015f\u0131m, sadece metin k\u0131saltma i\u015flemini otomatikle\u015ftirmekle kalmaz, ayn\u0131 zamanda kod tekrar\u0131n\u0131 \u00f6nler, uygulaman\u0131z\u0131n daha mod\u00fcler olmas\u0131n\u0131 sa\u011flar ve geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r. \u00dcstelik, bu direktifi projenizin farkl\u0131 yerlerinde kolayca uygulayabilirsiniz. Bu makale boyunca, ad\u0131m ad\u0131m kendi “k\u0131salt\u0131lm\u0131\u015f metin” direktifimizi nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131, onu nas\u0131l geli\u015ftirece\u011fimizi ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l etkili bir \u015fekilde kullanabilece\u011fimizi derinlemesine inceleyece\u011fiz. Amac\u0131m\u0131z, kullan\u0131c\u0131lar\u0131n\u0131za daha temiz, daha d\u00fczenli ve daha etkile\u015fimli bir i\u00e7erik sunumu sa\u011flamakt\u0131r.<\/p>\n

Angular Direktifleri Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h2>\n

Angular, web uygulamas\u0131 geli\u015ftirmeyi kolayla\u015ft\u0131rmak i\u00e7in g\u00fc\u00e7l\u00fc ara\u00e7lar ve mimari desenler sunar. Bu ara\u00e7lar\u0131n ba\u015f\u0131nda Direktifler gelir. Peki, Angular Direktifleri tam olarak nedir ve geli\u015ftirme s\u00fcre\u00e7lerimize nas\u0131l bir de\u011fer katarlar? Temel olarak, direktifler DOM’daki elemanlara yeni davran\u0131\u015flar eklememizi veya var olan DOM elemanlar\u0131n\u0131 de\u011fi\u015ftirmemizi sa\u011flayan \u00f6zel s\u0131n\u0131flard\u0131r.<\/p>\n

Angular’da \u00fc\u00e7 ana direktif t\u00fcr\u00fc bulunur:<\/p>\n

    \n
  1. Bile\u015fen Direktifleri (Component Directives):<\/strong> Asl\u0131nda, Angular uygulamalar\u0131ndaki her bile\u015fen bir direktiftir! Kendi \u015fablonu (template), stili (styles) ve mant\u0131\u011f\u0131 olan \u00f6zel bir direktif t\u00fcr\u00fcd\u00fcr.<\/li>\n
  2. Yap\u0131sal Direktifler (Structural Directives):<\/strong> DOM yap\u0131s\u0131n\u0131 de\u011fi\u015ftiren direktiflerdir. Yani, elemanlar\u0131 ekleyip \u00e7\u0131karabilirler. \u00d6rne\u011fin, *ngIf<\/code> ve *ngFor<\/code> Angular’\u0131n en s\u0131k kullan\u0131lan yap\u0131sal direktiflerindendir. *ngIf<\/code> bir eleman\u0131 ko\u015fula ba\u011fl\u0131 olarak DOM’a ekler veya \u00e7\u0131kar\u0131r, *ngFor<\/code> ise bir koleksiyondaki her \u00f6\u011fe i\u00e7in bir eleman\u0131 tekrarlar.<\/li>\n
  3. \u00d6znitelik Direktifleri (Attribute Directives):<\/strong> Var olan elemanlar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc veya davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftiren direktiflerdir. CSS s\u0131n\u0131flar\u0131 eklemek, stil de\u011fi\u015ftirmek veya olay dinleyicileri eklemek gibi g\u00f6revler i\u00e7in kullan\u0131l\u0131rlar. Bizim “k\u0131salt\u0131lm\u0131\u015f metin” direktifimiz de bu kategoriye girer \u00e7\u00fcnk\u00fc mevcut bir HTML eleman\u0131n\u0131n metin i\u00e7eri\u011fini ve belki de baz\u0131 stil \u00f6zelliklerini manip\u00fcle edecektir.<\/li>\n<\/ol>\n

    Direktifleri kullanman\u0131n temel faydalar\u0131 aras\u0131nda \u015funlar yer al\u0131r:<\/p>\n

      \n
    • Yeniden Kullan\u0131labilirlik:<\/strong> Ayn\u0131 mant\u0131\u011f\u0131 birden fazla yerde uygulamak istedi\u011finizde, kodu tekrarlamak yerine tek bir direktif yaz\u0131p her yere uygulayabilirsiniz. Bu, kod taban\u0131n\u0131 daha temiz ve y\u00f6netilebilir hale getirir.<\/li>\n
    • Mod\u00fclerlik:<\/strong> Belirli bir i\u015flevselli\u011fi tek bir direktifte kaps\u00fclleyerek kodunuzu daha mod\u00fcler hale getirirsiniz. Bu, hata ay\u0131klamay\u0131 ve bak\u0131m\u0131 kolayla\u015ft\u0131r\u0131r.<\/li>\n
    • DOM Manip\u00fclasyonunun Soyutlanmas\u0131:<\/strong> Direktifler, DOM manip\u00fclasyonunu g\u00fcvenli ve Angular ekosistemiyle uyumlu bir \u015fekilde yapmam\u0131z\u0131 sa\u011flar. Genellikle ElementRef<\/code> (elemana do\u011frudan eri\u015fim) ve Renderer2<\/code> (taray\u0131c\u0131dan ba\u011f\u0131ms\u0131z, g\u00fcvenli DOM manip\u00fclasyonu) gibi servisleri kullanarak \u00e7al\u0131\u015f\u0131r\u0131z. Renderer2<\/code>, \u00f6zellikle sunucu taraf\u0131 render (SSR) veya web worker’lar gibi farkl\u0131 render ortamlar\u0131nda tutarl\u0131l\u0131k sa\u011flamak i\u00e7in tercih edilir.<\/li>\n
    • Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/strong> Direktifler sayesinde kullan\u0131c\u0131 aray\u00fcz\u00fcne dinamik ve etkile\u015fimli \u00f6\u011feler eklemek \u00e7ok daha kolay hale gelir, b\u00f6ylece kullan\u0131c\u0131 deneyimi \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015fir.<\/li>\n<\/ul>\n

      \u00d6rne\u011fin, bizim senaryomuzda, uzun bir metni otomatik olarak k\u0131saltma ve bir d\u00fc\u011fme ile tamam\u0131n\u0131 g\u00f6sterme\/gizleme i\u015flevselli\u011fini her metin blo\u011fu i\u00e7in ayr\u0131 ayr\u0131 yazmak yerine, tek bir truncateText<\/code> direktifi olu\u015fturaca\u011f\u0131z. Bu direktifi, ihtiyac\u0131m\u0131z olan herhangi bir <\/p>\n

      <\/code>, <\/p>\n

      <\/code> veya <\/code> etiketine basit\u00e7e uygulayabilece\u011fiz. Bu sayede kodumuz hem daha d\u00fczenli olacak hem de geli\u015ftirdi\u011fimiz \u00f6zellikler daha esnek bir yap\u0131ya kavu\u015facakt\u0131r.<\/p>\n

      K\u0131salt\u0131lm\u0131\u015f Metin Direktifi Ad\u0131m Ad\u0131m Nas\u0131l Olu\u015fturulur?<\/h2>\n

      \u015eimdi pratik k\u0131sma ge\u00e7elim ve Angular direktifimizle k\u0131salt\u0131lm\u0131\u015f metinleri nas\u0131l y\u00f6netece\u011fimizi ad\u0131m ad\u0131m g\u00f6relim. Bu b\u00f6l\u00fcm, direktifi s\u0131f\u0131rdan olu\u015fturup bir Angular projesine entegre etmenizi sa\u011flayacak.<\/p>\n

      Proje Kurulumu ve Direktif Olu\u015fturma<\/h3>\n

      E\u011fer hen\u00fcz bir Angular projeniz yoksa, komut sat\u0131r\u0131nda a\u015fa\u011f\u0131daki komutla yeni bir proje olu\u015fturabilirsiniz:<\/p>\n

      \nng new my-angular-app\ncd my-angular-app\n    <\/pre>\n
      <\/code><\/p>\n
      Projenin i\u00e7ine girdikten sonra, direktifimizi olu\u015fturmak i\u00e7in Angular CLI'yi kullanaca\u011f\u0131z. Bu, gerekli dosyalar\u0131 otomatik olarak olu\u015fturacak ve app.module.ts<\/code> dosyas\u0131na ekleyecektir:<\/p>\n
      \nng generate directive truncateText\n    <\/pre>\n
      <\/code><\/p>\n
      Bu komut, src\/app\/truncate-text.directive.ts<\/code> dosyas\u0131n\u0131 olu\u015fturacakt\u0131r. \u015eimdi bu dosyay\u0131 a\u00e7al\u0131m ve i\u00e7eri\u011fini direktifimizin mant\u0131\u011f\u0131yla doldural\u0131m.<\/p>\n
      Direktif Yap\u0131s\u0131 ve Mant\u0131\u011f\u0131<\/h3>\n
      Direktifimizin temel amac\u0131, bir HTML eleman\u0131n\u0131n metin i\u00e7eri\u011fini belirli bir limite g\u00f6re k\u0131saltmak ve bir \"Devam\u0131n\u0131 Oku\" d\u00fc\u011fmesi ekleyerek kullan\u0131c\u0131n\u0131n metnin tamam\u0131n\u0131 g\u00f6rmesini sa\u011flamakt\u0131r. Bunun i\u00e7in ElementRef<\/code> ve Renderer2<\/code> servislerini kullanaca\u011f\u0131z. Ayr\u0131ca, direktifimize d\u0131\u015far\u0131dan parametreler (metin limiti gibi) ge\u00e7irmek i\u00e7in @Input()<\/code> kullanaca\u011f\u0131z.<\/p>\n
      \nimport { Directive, ElementRef, Input, OnInit, Renderer2, OnChanges, SimpleChanges } from '@angular\/core';\n\n@Directive({\n  selector: '[appTruncateText]'\n})\nexport class TruncateTextDirective implements OnInit, OnChanges {\n  @Input('appTruncateText') limit: number = 100; \/\/ Varsay\u0131lan k\u0131saltma limiti\n  @Input() ellipsisText: string = '... Devam\u0131n\u0131 Oku'; \/\/ K\u0131saltma metni\n  @Input() collapseText: string = ' Kapat'; \/\/ Metin geni\u015fletildikten sonra g\u00f6sterilecek metin\n\n  originalText: string;\n  isTruncated: boolean = true;\n  readMoreSpan: any;\n\n  constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n  ngOnInit(): void {\n    \/\/ Metnin orijinal halini saklayal\u0131m\n    this.originalText = this.el.nativeElement.innerText;\n    this.applyTruncation();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['limit'] || changes['ellipsisText'] || changes['collapseText']) {\n      \/\/ Input de\u011ferleri de\u011fi\u015fti\u011finde tekrar k\u0131saltma uygula\n      this.applyTruncation();\n    }\n  }\n\n  private applyTruncation(): void {\n    if (!this.originalText) {\n      return;\n    }\n\n    \/\/ \u00d6nceki \"Devam\u0131n\u0131 Oku\" d\u00fc\u011fmesini kald\u0131r\n    if (this.readMoreSpan) {\n      this.renderer.removeChild(this.el.nativeElement, this.readMoreSpan);\n      this.readMoreSpan = null;\n    }\n\n    if (this.originalText.length > this.limit) {\n      const truncated = this.originalText.substring(0, this.limit);\n      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', ${truncated}<\/span>\n        ${this.ellipsisText}<\/span><\/code>);\n      this.isTruncated = true;\n      this.addReadMoreButton();\n    } else {\n      \/\/ Metin limitten k\u0131sa ise, k\u0131saltma yapma ve orijinal metni g\u00f6ster\n      this.renderer.setProperty(this.el.nativeElement, 'innerText', this.originalText);\n      this.isTruncated = false;\n    }\n  }\n\n  private addReadMoreButton(): void {\n    this.readMoreSpan = this.renderer.createElement('span');\n    this.renderer.addClass(this.readMoreSpan, 'truncate-toggle-button');\n    this.renderer.setStyle(this.readMoreSpan, 'cursor', 'pointer');\n    this.renderer.setStyle(this.readMoreSpan, 'color', '#007bff');\n    this.renderer.setStyle(this.readMoreSpan, 'margin-left', '5px');\n\n    \/\/ Ba\u015flang\u0131\u00e7ta \"Devam\u0131n\u0131 Oku\" metnini g\u00f6ster\n    this.renderer.setProperty(this.readMoreSpan, 'innerText', this.ellipsisText.replace('...', '')); \/\/ ellipsisText'in sadece metin k\u0131sm\u0131n\u0131 al\n\n    this.renderer.listen(this.readMoreSpan, 'click', () => {\n      this.toggleTruncation();\n    });\n\n    this.renderer.appendChild(this.el.nativeElement, this.readMoreSpan);\n  }\n\n  private toggleTruncation(): void {\n    if (this.isTruncated) {\n      \/\/ Metni geni\u015flet\n      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', ${this.originalText}<\/span>\n        ${this.collapseText}<\/span><\/code>);\n      this.isTruncated = false;\n    } else {\n      \/\/ Metni daralt\n      this.applyTruncation();\n    }\n\n    \/\/ D\u00fc\u011fmeye tekrar t\u0131klama olay\u0131n\u0131 ata\n    const newButton = this.el.nativeElement.querySelector('.truncate-toggle-button');\n    if (newButton) {\n      this.renderer.listen(newButton, 'click', () => {\n        this.toggleTruncation();\n      });\n    }\n  }\n}\n    <\/pre>\n
      <\/code><\/p>\n
      \n
      Uzman \u0130pucu: Renderer2<\/code> kullanmak, DOM manip\u00fclasyonlar\u0131n\u0131 do\u011frudan ElementRef.nativeElement<\/code> \u00fczerinden yapmaktan daha g\u00fcvenli ve platformdan ba\u011f\u0131ms\u0131zd\u0131r. \u00d6zellikle Universal (SSR) projelerinde kritik bir \u00f6neme sahiptir.<\/p>\n<\/p><\/div>\n
      Direktifi Bir Bile\u015fende Kullanma<\/h3>\n
      \u015eimdi app.component.html<\/code> dosyas\u0131n\u0131 a\u00e7al\u0131m ve direktifimizi kullanal\u0131m:<\/p>\n
      \n\n
      \n  
      Uzun Bir Ba\u015fl\u0131k Metni \u00d6rne\u011fi<\/h2>\n  \n    Bu, web sayfalar\u0131nda s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan uzun bir metin blo\u011fu \u00f6rne\u011fidir. Kullan\u0131c\u0131 deneyimini geli\u015ftirmek ad\u0131na bu t\u00fcr metinleri belirli bir karakter limitine g\u00f6re k\u0131saltmak, aray\u00fczde estetik bir g\u00f6r\u00fcn\u00fcm sa\u011flamak ve okunabilirli\u011fi art\u0131rmak olduk\u00e7a \u00f6nemlidir. \u00d6zellikle mobil cihazlarda ekran alan\u0131 k\u0131s\u0131tl\u0131 oldu\u011fundan, bu tarz direktifler vazge\u00e7ilmez bir hale gelir. Direktifimiz sayesinde, metnin ilk 200 karakteri g\u00f6sterilecek ve ard\u0131ndan \"Daha fazlas\u0131\" gibi bir ibareyle kullan\u0131c\u0131n\u0131n metnin tamam\u0131n\u0131 okumas\u0131 i\u00e7in bir ba\u011flant\u0131 sunulacakt\u0131r. Kullan\u0131c\u0131 bu ba\u011flant\u0131ya t\u0131klad\u0131\u011f\u0131nda, metnin tamam\u0131 a\u00e7\u0131lacak ve tekrar t\u0131klad\u0131\u011f\u0131nda eski haline d\u00f6necektir. Bu sayede, hem temiz bir aray\u00fcz sunulur hem de bilgiye kolay eri\u015fim sa\u011flan\u0131r.\n  <\/p>\n\n  
      Farkl\u0131 Limitler ve Metinlerle Bir Ba\u015fka \u00d6rnek<\/h3>\n  \n    Bu metin, daha k\u0131sa bir limit ile k\u0131salt\u0131lacak ve farkl\u0131 bir k\u0131saltma metni kullanacakt\u0131r.\n    B\u00f6ylece direktifimizin esnekli\u011fini g\u00f6rebilirsiniz.\n  <\/p>\n\n  
      Limitten K\u0131sa Metin \u00d6rne\u011fi<\/h3>\n  \n    Bu metin olduk\u00e7a k\u0131sa oldu\u011fu i\u00e7in, belirledi\u011fimiz 300 karakterlik k\u0131saltma limitinin alt\u0131nda kalacakt\u0131r.\n    Dolay\u0131s\u0131yla, direktifimiz bu metni k\u0131saltmayacak ve oldu\u011fu gibi g\u00f6sterecektir.\n    Bu da direktifimizin ak\u0131ll\u0131ca davrand\u0131\u011f\u0131n\u0131 ve gereksiz k\u0131saltma i\u015flemleri yapmad\u0131\u011f\u0131n\u0131 g\u00f6sterir.\n  <\/p>\n<\/div>\n    <\/pre>\n
      <\/code><\/p>\n
      Bu kod blo\u011funda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, appTruncateText<\/code> direktifini do\u011frudan <\/p>\n
      <\/code> etiketine uygulad\u0131k. [limit]<\/code>, ellipsisText<\/code> ve collapseText<\/code> ile direktifin davran\u0131\u015f\u0131n\u0131 \u00f6zelle\u015ftirebiliyoruz. B\u00f6ylece, projenizin farkl\u0131 yerlerinde benzer ihtiya\u00e7lar i\u00e7in kod tekrar\u0131 yapmadan, temiz ve y\u00f6netilebilir bir \u00e7\u00f6z\u00fcm sunmu\u015f olursunuz. Direktif, ngOnInit<\/code>'te orijinal metni kaydeder ve k\u0131saltmay\u0131 uygular. addReadMoreButton<\/code> fonksiyonu, t\u0131klanabilir \"Devam\u0131n\u0131 Oku\" d\u00fc\u011fmesini olu\u015fturur ve toggleTruncation<\/code> fonksiyonu, bu d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda metnin k\u0131salt\u0131lm\u0131\u015f ve tam hali aras\u0131nda ge\u00e7i\u015f yapar. ngOnChanges<\/code> ise input de\u011ferleri de\u011fi\u015fti\u011finde direktifin g\u00fcncellenmesini sa\u011flar.<\/p>\n
      Kullan\u0131c\u0131 Deneyimini \u0130yile\u015ftiren Ek \u00d6zellikler ve Geli\u015ftirmeler<\/h2>\n
      Direktifimiz \u015fu anda temel k\u0131saltma i\u015flevini yerine getiriyor, ancak kullan\u0131c\u0131 deneyimini daha da zenginle\u015ftirmek ve farkl\u0131 senaryolara uyum sa\u011flamak i\u00e7in baz\u0131 ek \u00f6zellikler ekleyebiliriz. Bu geli\u015ftirmeler, direktifimizin daha ak\u0131ll\u0131, duyarl\u0131 ve estetik olmas\u0131n\u0131 sa\u011flayacakt\u0131r.<\/p>\n
      Direktifimizi Daha Ak\u0131ll\u0131 ve Duyarl\u0131 Hale Nas\u0131l Getirebiliriz?<\/h3>\n
      Duyarl\u0131l\u0131k (Responsive Design)<\/h4>\n
      Web siteleri art\u0131k sadece masa\u00fcst\u00fc bilgisayarlarda de\u011fil, tabletler ve ak\u0131ll\u0131 telefonlar gibi \u00e7ok \u00e7e\u015fitli cihazlarda g\u00f6r\u00fcnt\u00fcleniyor. Bu nedenle, direktifimizin farkl\u0131 ekran boyutlar\u0131na duyarl\u0131 olmas\u0131 \u00f6nemlidir. \u00d6rne\u011fin, mobil cihazlarda daha k\u0131sa bir limit uygularken, masa\u00fcst\u00fcnde daha uzun veya tam metni g\u00f6sterebiliriz. Bunu @HostListener('window:resize')<\/code> ile pencere boyutundaki de\u011fi\u015fiklikleri dinleyerek ve dinamik olarak limit<\/code> de\u011ferini g\u00fcncelleyerek yapabiliriz. Angular\u2019da BreakpointObserver<\/code> servisi de bu konuda olduk\u00e7a g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n
      \nimport { BreakpointObserver, Breakpoints } from '@angular\/cdk\/layout';\n\/\/ ... di\u011fer import'lar\n\nexport class TruncateTextDirective implements OnInit, OnChanges, OnDestroy {\n  \/\/ ... mevcut kod\n  private destroy$ = new Subject();\n\n  constructor(private el: ElementRef, private renderer: Renderer2, private breakpointObserver: BreakpointObserver) {}\n\n  ngOnInit(): void {\n    this.originalText = this.el.nativeElement.innerText;\n    this.breakpointObserver.observe([\n      Breakpoints.HandsetPortrait,\n      Breakpoints.TabletPortrait\n    ]).pipe(takeUntil(this.destroy$)).subscribe(result => {\n      if (result.matches) {\n        \/\/ Mobil veya tablet boyutunda daha k\u0131sa limit\n        this.limit = 50;\n      } else {\n        \/\/ Masa\u00fcst\u00fc veya daha b\u00fcy\u00fck ekranlarda orijinal limit\n        this.limit = 200; \/\/ Varsay\u0131lan ya da d\u0131\u015far\u0131dan gelen limit\n      }\n      this.applyTruncation();\n    });\n    \/\/ \u0130lk \u00e7al\u0131\u015ft\u0131rmada da k\u0131saltmay\u0131 uygula\n    this.applyTruncation();\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n  \/\/ ... di\u011fer metotlar\n}\n    <\/pre>\n
      <\/code><\/p>\n
      Yukar\u0131daki \u00f6rnekte, @angular\/cdk\/layout<\/code> mod\u00fcl\u00fcnden BreakpointObserver<\/code> kullanarak ekran boyutlar\u0131n\u0131 dinamik olarak alg\u0131l\u0131yor ve buna g\u00f6re limit<\/code> de\u011ferini g\u00fcncelliyoruz. Bu sayede, mobil cihazlarda daha okunabilir bir k\u0131saltma sa\u011flan\u0131r.<\/p>\n
      Ge\u00e7i\u015f Animasyonlar\u0131 (Transitions)<\/h4>\n
      Metin geni\u015flerken veya daral\u0131rken ani bir ge\u00e7i\u015f yerine yumu\u015fak bir animasyon eklemek, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir. Bunu CSS ge\u00e7i\u015fleri (transitions) ile kolayca yapabiliriz. \u00d6rne\u011fin, metnin tam halini i\u00e7eren <\/code> etiketine bir s\u0131n\u0131f ekleyerek, y\u00fcksekli\u011fi veya maksimum y\u00fcksekli\u011fi \u00fczerinde bir ge\u00e7i\u015f uygulayabiliriz.<\/p>\n
      \n\/* styles.css veya bile\u015fenin stil dosyas\u0131 *\/\n.truncated-content-wrapper {\n  transition: max-height 0.3s ease-in-out;\n  overflow: hidden;\n}\n.truncated-content-wrapper.expanded {\n  max-height: 1000px; \/* Metnin maksimum y\u00fcksekli\u011finden daha b\u00fcy\u00fck bir de\u011fer *\/\n}\n.truncated-content-wrapper.collapsed {\n  max-height: 100px; \/* K\u0131salt\u0131lm\u0131\u015f haldeki y\u00fckseklik *\/\n}\n    <\/pre>\n
      <\/code><\/p>\n
      Ard\u0131ndan direktif i\u00e7inde bu s\u0131n\u0131flar\u0131 dinamik olarak ekleyip \u00e7\u0131kararak animasyonlar\u0131 tetikleyebiliriz. Bunun i\u00e7in metni do\u011frudan innerText<\/code> veya innerHTML<\/code> ile de\u011fil, bir kapsay\u0131c\u0131 <\/p>\n
      <\/code> veya <\/code> i\u00e7ine alarak manip\u00fcle etmek daha uygun olacakt\u0131r.<\/p>\n
      SEO Dostu Yakla\u015f\u0131m<\/h4>\n
      K\u0131salt\u0131lan metinlerin arama motorlar\u0131 taraf\u0131ndan tam olarak indekslenebilir olmas\u0131 \u00f6nemlidir. Direktifimiz, metni sadece g\u00f6rsel olarak gizledi\u011fi (veya k\u0131salt\u0131p sonra g\u00f6sterdi\u011fi) i\u00e7in, orijinal metin hala DOM'da bulunur. Bu genellikle SEO i\u00e7in iyi bir yakla\u015f\u0131md\u0131r. Ancak, arama motorlar\u0131n\u0131n gizli i\u00e7eri\u011fi nas\u0131l yorumlad\u0131\u011f\u0131 zaman zaman de\u011fi\u015febilir. En g\u00fcvenli yol, metnin tamam\u0131n\u0131n DOM'da bulunmas\u0131 ve sadece g\u00f6rsel olarak k\u0131salt\u0131lmas\u0131d\u0131r, ki bizim direktifimiz tam da bunu yapmaktad\u0131r.<\/p>\n
      Metin K\u0131saltma Y\u00f6ntemleri<\/h4>\n
      Mevcut direktifimiz karakter baz\u0131nda k\u0131saltma yap\u0131yor. Ancak bazen kelime baz\u0131nda k\u0131saltma yapmak isteyebiliriz ki metin anlamsal olarak daha b\u00fct\u00fcn kals\u0131n. Direktife yeni bir @Input() wordBased: boolean = false;<\/code> ekleyerek bu \u00f6zelli\u011fi kontrol edebiliriz. Kelime baz\u0131nda k\u0131saltma i\u00e7in, metni bo\u015fluklara g\u00f6re ay\u0131r\u0131p belirli say\u0131da kelimeyi al\u0131p tekrar birle\u015ftirme mant\u0131\u011f\u0131 uygulanabilir.<\/p>\n
      Vaka Analizi: E-ticaret \u00dcr\u00fcn A\u00e7\u0131klamalar\u0131<\/h3>\n
      Bir e-ticaret sitesinde \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131, kullan\u0131c\u0131lar\u0131n sat\u0131n alma karar\u0131n\u0131 etkileyen en \u00f6nemli fakt\u00f6rlerden biridir. Bu a\u00e7\u0131klamalar genellikle uzun olabilir ve mobil cihazlarda veya \u00fcr\u00fcn listeleme sayfalar\u0131nda aray\u00fcz\u00fc bozabilir. Direktifimizle bu sorunu zarif\u00e7e \u00e7\u00f6zebiliriz:<\/p>\n\n\n\n\n\n\n\n
      Senaryo<\/th>\nSorun<\/th>\nAngular Direktifi \u00c7\u00f6z\u00fcm\u00fc<\/th>\nUX Faydas\u0131<\/th>\n<\/tr>\n<\/thead>\n
      \u00dcr\u00fcn Detay Sayfas\u0131 (Mobil)<\/td>\nUzun \u00fcr\u00fcn a\u00e7\u0131klamas\u0131 ekran\u0131 kaplar, di\u011fer \u00f6nemli bilgileri (fiyat, sepete ekle) a\u015fa\u011f\u0131 iter.<\/td>\nappTruncateText [limit]=\"150\"<\/code> ile mobil cihazlarda a\u00e7\u0131klamay\u0131 k\u0131salt.<\/td>\nKullan\u0131c\u0131 ana bilgilere h\u0131zla ula\u015f\u0131r. Daha temiz ve gezinmesi kolay aray\u00fcz.<\/td>\n<\/tr>\n
      \u00dcr\u00fcn Listeleme Sayfas\u0131<\/td>\nHer \u00fcr\u00fcn kart\u0131nda uzun a\u00e7\u0131klamalar, sayfan\u0131n \u015fi\u015fkin g\u00f6r\u00fcnmesine ve okunurlu\u011fun azalmas\u0131na neden olur.<\/td>\nappTruncateText [limit]=\"80\" ellipsisText=\"Detaylar\"<\/code> ile her karttaki a\u00e7\u0131klamay\u0131 \u00f6zetle.<\/td>\nDaha d\u00fczenli kart g\u00f6r\u00fcn\u00fcmleri, kullan\u0131c\u0131lar\u0131n \u00fcr\u00fcnleri daha h\u0131zl\u0131 taramas\u0131n\u0131 sa\u011flar.<\/td>\n<\/tr>\n
      Blog G\u00f6nderi \u00d6nizlemesi<\/td>\nAna sayfadaki blog \u00f6nizlemeleri \u00e7ok uzunsa, sayfa karma\u015f\u0131k g\u00f6r\u00fcn\u00fcr.<\/td>\nappTruncateText [limit]=\"250\" ellipsisText=\"Devam\u0131n\u0131 oku\"<\/code> ile g\u00f6nderi \u00f6zetlerini g\u00f6ster.<\/td>\nZarif blog listesi, kullan\u0131c\u0131lar\u0131 daha fazla okumaya te\u015fvik eder.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Bu senaryolarda direktifimiz, hem estetik hem de i\u015flevsel bir \u00e7\u00f6z\u00fcm sunarak, kullan\u0131c\u0131lar\u0131n bilgiyi daha etkili bir \u015fekilde t\u00fcketmesine olanak tan\u0131r. K\u0131sacas\u0131, direktifimiz ile farkl\u0131 ekran boyutlar\u0131na ve i\u00e7erik t\u00fcrlerine g\u00f6re esnek ve optimize edilmi\u015f bir metin sunumu elde edebiliriz.<\/p>\n
      Performans ve Bak\u0131m: \u0130leri D\u00fczey \u0130pu\u00e7lar\u0131<\/h2>\n
      Angular direktifleri geli\u015ftirirken sadece i\u015flevsellik de\u011fil, ayn\u0131 zamanda performans ve s\u00fcrd\u00fcr\u00fclebilirlik de b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Direktiflerinizin uygulaman\u0131z\u0131n genel sa\u011fl\u0131\u011f\u0131n\u0131 olumsuz etkilememesi ve gelecekte kolayca bak\u0131m\u0131 yap\u0131labilmesi i\u00e7in baz\u0131 ileri d\u00fczey ipu\u00e7lar\u0131n\u0131 g\u00f6z \u00f6n\u00fcnde bulundurmak faydal\u0131 olacakt\u0131r.<\/p>\n
      Angular Direktiflerini Daha Verimli Kullanmak \u0130\u00e7in Neler Yapabiliriz?<\/h3>\n
      De\u011fi\u015fim Alg\u0131lama (Change Detection) Optimizasyonu<\/h4>\n
      Angular'\u0131n de\u011fi\u015fim alg\u0131lama mekanizmas\u0131 varsay\u0131lan olarak her olayda (HTTP iste\u011fi, DOM olay\u0131, zamanlay\u0131c\u0131 vb.) \u00e7al\u0131\u015f\u0131r ve performans darbo\u011fazlar\u0131na yol a\u00e7abilir, \u00f6zellikle \u00e7ok say\u0131da bile\u015fen veya direktifin oldu\u011fu b\u00fcy\u00fck uygulamalarda. Direktifler genellikle DOM'u do\u011frudan manip\u00fcle etti\u011fi i\u00e7in, bu manip\u00fclasyonlar\u0131n Angular'\u0131n de\u011fi\u015fim alg\u0131lama d\u00f6ng\u00fcs\u00fcyle nas\u0131l etkile\u015fime girdi\u011fini anlamak \u00f6nemlidir.<\/p>\n
      \n
      Uzman \u0130pucu: Direktif i\u00e7inde ChangeDetectionStrategy.OnPush<\/code> kullanamazs\u0131n\u0131z \u00e7\u00fcnk\u00fc direktifler bir bile\u015fen gibi kendi de\u011fi\u015fim alg\u0131lama stratejisine sahip de\u011fildir. Ancak, direktifin tetikledi\u011fi parent bile\u015fenlerde OnPush<\/code> stratejisi kullanmak, genel uygulama performans\u0131n\u0131 iyile\u015ftirecektir. Direktif, Renderer2<\/code> kullanarak DOM'u manip\u00fcle etti\u011finde, Angular bu de\u011fi\u015fiklikleri do\u011fal olarak alg\u0131lar.<\/p>\n<\/p><\/div>\n
      E\u011fer bir direktif, bir Input de\u011feri de\u011fi\u015fti\u011finde veya bir @HostListener<\/code> olay\u0131 tetiklendi\u011finde DOM'u manip\u00fcle ediyorsa ve bu manip\u00fclasyonun bir bile\u015fenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc g\u00fcncellemesi gerekiyorsa, bazen manuel olarak ChangeDetectorRef.detectChanges()<\/code> veya markForCheck()<\/code> kullanmak gerekebilir. Ancak bizim appTruncateText<\/code> direktifimiz do\u011frudan ElementRef<\/code> ve Renderer2<\/code> ile DOM'u g\u00fcncelledi\u011fi i\u00e7in genellikle buna ihtiya\u00e7 duymaz. Angular bu t\u00fcr de\u011fi\u015fiklikleri otomatik olarak alg\u0131lar.<\/p>\n
      DOM Manip\u00fclasyonu Optimizasyonu ve G\u00fcvenli\u011fi<\/h4>\n
      Daha \u00f6nce de belirtti\u011fimiz gibi, DOM'u do\u011frudan ElementRef.nativeElement<\/code> \u00fczerinden manip\u00fcle etmekten ka\u00e7\u0131nmal\u0131s\u0131n\u0131z. Bu, uygulaman\u0131z\u0131 platformdan ba\u011f\u0131ms\u0131z olmaktan \u00e7\u0131kar\u0131r ve g\u00fcvenlik zafiyetlerine yol a\u00e7abilir (\u00f6rne\u011fin XSS sald\u0131r\u0131lar\u0131). Bunun yerine Renderer2<\/code> kullan\u0131n. Renderer2<\/code>, DOM'a g\u00fcvenli ve soyutlanm\u0131\u015f bir \u015fekilde eri\u015fim sa\u011flar. \u00d6rne\u011fin, renderer.setProperty()<\/code> veya renderer.appendChild()<\/code> gibi y\u00f6ntemler, DOM de\u011fi\u015fikliklerini g\u00fcvenli bir \u015fekilde yapar ve Angular'\u0131n kendi mekanizmalar\u0131yla uyumlu \u00e7al\u0131\u015f\u0131r.<\/p>\n
      Ayr\u0131ca, \u00e7ok s\u0131k DOM manip\u00fclasyonu yapmak yerine, m\u00fcmk\u00fcnse CSS s\u0131n\u0131flar\u0131n\u0131 veya stillerini ekleyip \u00e7\u0131kararak DOM \u00fczerinde daha az de\u011fi\u015fiklik yapmaya \u00e7al\u0131\u015f\u0131n. Bu, taray\u0131c\u0131n\u0131n daha az yeniden \u00e7izim (reflow\/repaint) yapmas\u0131n\u0131 sa\u011flayarak performans\u0131 art\u0131r\u0131r.<\/p>\n
      Bellek S\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00d6nleme (Memory Leaks)<\/h4>\n
      E\u011fer direktifiniz i\u00e7inde @HostListener<\/code> veya rxjs<\/code>'in fromEvent<\/code> gibi Observable'lar ile olay dinleyicileri ekliyorsan\u0131z, direktif yok edildi\u011finde (ngOnDestroy<\/code>) bu dinleyicileri kald\u0131rmay\u0131 unutmay\u0131n. Aksi takdirde, bellek s\u0131z\u0131nt\u0131lar\u0131na yol a\u00e7abilir ve uygulaman\u0131z zamanla yava\u015flayabilir.<\/p>\n
      \nimport { OnDestroy } from '@angular\/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs\/operators';\n\/\/ ... di\u011fer importlar\n\nexport class TruncateTextDirective implements OnInit, OnChanges, OnDestroy {\n  \/\/ ... mevcut kod\n  private destroy$ = new Subject();\n\n  \/\/ ... constructor ve di\u011fer metotlar\n\n  ngOnDestroy(): void {\n    \/\/ T\u00fcm Observable aboneliklerini iptal et\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n}\n    <\/pre>\n
      <\/code><\/p>\n
      Yukar\u0131daki \u00f6rnekte, destroy$<\/code> Subject'ini kullanarak takeUntil()<\/code> operat\u00f6r\u00fc ile t\u00fcm abonelikleri ngOnDestroy<\/code> metodunda tek seferde iptal ediyoruz. Bu, hem temiz bir kod sa\u011flar hem de bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nler.<\/p>\n
      Test Edilebilirlik<\/h4>\n
      \u0130yi yaz\u0131lm\u0131\u015f bir direktif, kolayca test edilebilir olmal\u0131d\u0131r. Angular CLI, direktif olu\u015fturdu\u011funuzda otomatik olarak bir test dosyas\u0131 (.spec.ts<\/code>) olu\u015fturur. Direktiflerinizi, belirli senaryolarda do\u011fru DOM manip\u00fclasyonlar\u0131n\u0131 yap\u0131p yapmad\u0131\u011f\u0131n\u0131, olaylara do\u011fru tepki verip vermedi\u011fini kontrol eden birim testleri (unit tests) ile test etmek, uygulaman\u0131z\u0131n kalitesini art\u0131r\u0131r ve gelecekteki de\u011fi\u015fikliklerde hatalar\u0131 yakalaman\u0131za yard\u0131mc\u0131 olur. TestBed<\/code> ve ComponentFixture<\/code> gibi Angular test ara\u00e7lar\u0131, direktiflerinizi izole bir \u015fekilde test etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n
      Mod\u00fclerlik ve Payla\u015f\u0131lan Mod\u00fcller<\/h4>\n
      E\u011fer direktifiniz uygulaman\u0131z\u0131n farkl\u0131 mod\u00fcllerinde kullan\u0131lacaksa, onu ayr\u0131 bir payla\u015f\u0131lan (SharedModule) mod\u00fclde tan\u0131mlamak ve bu mod\u00fcl\u00fc ilgili di\u011fer mod\u00fcllere import etmek en iyi uygulamad\u0131r. Bu, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r ve kod taban\u0131n\u0131z\u0131n daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin:<\/p>\n
      \n\/\/ shared.module.ts\nimport { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\nimport { TruncateTextDirective } from '.\/truncate-text.directive';\n\n@NgModule({\n  declarations: [\n    TruncateTextDirective\n  ],\n  imports: [\n    CommonModule\n  ],\n  exports: [\n    TruncateTextDirective\n  ]\n})\nexport class SharedModule { }\n\n\/\/ app.module.ts veya ba\u015fka bir \u00f6zellik mod\u00fcl\u00fc\nimport { SharedModule } from '.\/shared\/shared.module';\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    SharedModule \/\/ TruncateTextDirective'i kullanmak i\u00e7in import et\n  ],\n  \/\/ ...\n})\nexport class AppModule { }\n    <\/pre>\n
      <\/code><\/p>\n
      Bu yakla\u015f\u0131mlar, direktiflerinizin sadece i\u015flevsel de\u011fil, ayn\u0131 zamanda sa\u011flam, performansl\u0131 ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 sa\u011flar. Unutmay\u0131n, iyi bir yaz\u0131l\u0131m projesi sadece kodun \u00e7al\u0131\u015fmas\u0131yla de\u011fil, ayn\u0131 zamanda s\u00fcrd\u00fcr\u00fclebilirli\u011fi ve \u00f6l\u00e7eklenebilirli\u011fi ile de \u00f6l\u00e7\u00fcl\u00fcr.<\/p>\n
      K\u0131salt\u0131lm\u0131\u015f Metin Y\u00f6netiminde Angular Direktiflerinin G\u00fcc\u00fc<\/h2>\n
      Bu makale boyunca, Angular direktiflerinin metin k\u0131saltma gibi yayg\u0131n bir UI sorununu ne kadar zarif ve etkili bir \u015fekilde \u00e7\u00f6zebilece\u011fini detayl\u0131ca inceledik. Ba\u015flang\u0131\u00e7ta metin k\u0131saltman\u0131n neden bir problem oldu\u011funu anlamaktan, ad\u0131m ad\u0131m kendi appTruncateText<\/code> direktifimizi olu\u015fturmaya, ard\u0131ndan onu geli\u015fmi\u015f \u00f6zelliklerle zenginle\u015ftirmeye ve son olarak performans ile bak\u0131m ipu\u00e7lar\u0131na kadar geni\u015f bir yelpazeyi ele ald\u0131k.<\/p>\n
      G\u00f6rd\u00fc\u011f\u00fcm\u00fcz gibi, Angular direktifleri sadece DOM manip\u00fclasyonu i\u00e7in bir ara\u00e7 olman\u0131n \u00f6tesinde, kod tekrar\u0131n\u0131 \u00f6nleyen, uygulamalar\u0131 daha mod\u00fcler hale getiren ve geli\u015ftirme s\u00fcre\u00e7lerini h\u0131zland\u0131ran g\u00fc\u00e7l\u00fc bir mekanizma sunuyor. Kendi \u00f6zel direktifimiz sayesinde, uzun metinleri estetik bir \u015fekilde k\u0131saltabilir, kullan\u0131c\u0131lara \"Devam\u0131n\u0131 Oku\" d\u00fc\u011fmeleriyle tam i\u00e7eri\u011fe eri\u015fim imkan\u0131 tan\u0131yabilir ve bu s\u00fcreci tamamen otomatik hale getirebiliriz. Bu yakla\u015f\u0131m, \u00f6zellikle e-ticaret sitelerindeki \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131, blog sayfalar\u0131ndaki \u00f6zetler veya haber portallar\u0131ndaki makale \u00f6nizlemeleri gibi senaryolarda kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n
      Direktifimizi daha ak\u0131ll\u0131 hale getirmek i\u00e7in duyarl\u0131 tasar\u0131m (responsive design) ilkelerini uygulad\u0131k, ekran boyutlar\u0131na g\u00f6re metin limitini dinamik olarak ayarlama potansiyelini g\u00f6rd\u00fck. Ayr\u0131ca, ge\u00e7i\u015f animasyonlar\u0131 ile kullan\u0131c\u0131 etkile\u015fimlerini daha ak\u0131c\u0131 hale getirme ve SEO dostu bir yakla\u015f\u0131m benimseyerek arama motorlar\u0131 i\u00e7in i\u00e7eri\u011fin eri\u015filebilirli\u011fini sa\u011flama konular\u0131na da de\u011findik. Performans ve bak\u0131m ba\u015fl\u0131\u011f\u0131 alt\u0131nda ise, Renderer2<\/code> kullanarak g\u00fcvenli DOM manip\u00fclasyonu yapman\u0131n, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in olay dinleyicilerini y\u00f6netmenin ve test edilebilir kod yazman\u0131n \u00f6nemini vurgulad\u0131k.<\/p>\n
      Sonu\u00e7 olarak, Angular direktifleri geli\u015ftiricilere, UI bile\u015fenlerini daha esnek, yeniden kullan\u0131labilir ve s\u00fcrd\u00fcr\u00fclebilir bir \u015fekilde tasarlama yetene\u011fi verir. K\u0131salt\u0131lm\u0131\u015f metin y\u00f6netimi sadece bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r; bu direktif yakla\u015f\u0131m\u0131n\u0131 kullanarak, uygulaman\u0131zda \u00e7ok daha karma\u015f\u0131k ve etkile\u015fimli \u00f6zellikler geli\u015ftirebilirsiniz. Bu makaledeki bilgilerle, siz de kendi Angular projelerinizde benzer sorunlara zarif ve etkili \u00e7\u00f6z\u00fcmler \u00fcretebilir, kullan\u0131c\u0131lar\u0131n\u0131za daha iyi bir deneyim sunabilirsiniz. \u0130yi kodlamalar!<\/p>\n
      S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
      1. Bu direktif sadece HTML metinlerinde mi \u00e7al\u0131\u015f\u0131r?<\/h4>\n
      Direktifimiz, ElementRef.nativeElement.innerText<\/code> \u00fczerinden elementin metin i\u00e7eri\u011fini al\u0131p manip\u00fcle eder. Bu, genellikle d\u00fcz metinler i\u00e7in sorunsuz \u00e7al\u0131\u015f\u0131r. Ancak, e\u011fer hedef HTML etiketi i\u00e7inde karma\u015f\u0131k HTML yap\u0131s\u0131 (\u00f6rne\u011fin ba\u015fka etiketler, resimler) varsa ve direktifimiz innerHTML<\/code>'i yeniden ayarlarsa, bu i\u00e7 HTML yap\u0131s\u0131 kaybolabilir. E\u011fer i\u00e7 i\u00e7e ge\u00e7mi\u015f HTML'i korumak istiyorsan\u0131z, direktif mant\u0131\u011f\u0131n\u0131 innerHTML<\/code>'i ayr\u0131\u015ft\u0131racak ve sadece metin d\u00fc\u011f\u00fcmlerini manip\u00fcle edecek \u015fekilde daha karma\u015f\u0131k hale getirmeniz veya farkl\u0131 bir DOM manip\u00fclasyon y\u00f6ntemi kullanman\u0131z gerekebilir.<\/p>\n
      2. SEO a\u00e7\u0131s\u0131ndan bir dezavantaj\u0131 var m\u0131?<\/h4>\n
      Genel olarak hay\u0131r. Direktifimiz, metnin tamam\u0131n\u0131 DOM'da tutar ve sadece g\u00f6rsel olarak k\u0131saltma yapar. \"Devam\u0131n\u0131 Oku\" d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda tam metin g\u00f6r\u00fcn\u00fcr hale gelir. Arama motorlar\u0131 genellikle DOM'da bulunan ancak g\u00f6rsel olarak gizlenmi\u015f i\u00e7eri\u011fi indeksleyebilir. Ancak, i\u00e7eri\u011fin tamamen gizli (\u00f6rne\u011fin display: none;<\/code> veya visibility: hidden;<\/code> ile) olmas\u0131 durumunda, arama motorlar\u0131 bunu daha d\u00fc\u015f\u00fck bir \u00f6ncelikte de\u011ferlendirebilir. Bizim direktifimiz, i\u00e7eri\u011fi kullan\u0131c\u0131 etkile\u015fimiyle g\u00f6sterdi\u011fi i\u00e7in bu konuda genellikle sorun yaratmaz.<\/p>\n
      3. Birden fazla k\u0131saltma stili kullanabilir miyim?<\/h4>\n
      Evet, kesinlikle! Direktifimize @Input()<\/code> ile farkl\u0131 stil s\u0131n\u0131flar\u0131, \u00f6zel semboller veya farkl\u0131 \"Devam\u0131n\u0131 Oku\" metinleri ge\u00e7irebilirsiniz. Hatta, direktifi daha da esnek hale getirerek, farkl\u0131 k\u0131saltma stratejilerini (\u00f6rne\u011fin kelime baz\u0131nda veya c\u00fcmle baz\u0131nda k\u0131saltma) de @Input()<\/code> parametreleri arac\u0131l\u0131\u011f\u0131yla kontrol edebilirsiniz.<\/p>\n
      4. Direktifi kullanmak yerine CSS ile text-overflow: ellipsis<\/code> kullanmak neden yeterli de\u011fil?<\/h4>\n
      text-overflow: ellipsis;<\/code> CSS \u00f6zelli\u011fi, uzun metinleri g\u00f6rsel olarak keser ve sonuna \u00fc\u00e7 nokta ekler. Ancak, bu \u00e7\u00f6z\u00fcm\u00fcn iki \u00f6nemli dezavantaj\u0131 vard\u0131r: Birincisi, metnin sadece g\u00f6rsel olarak k\u0131salt\u0131lmas\u0131na ra\u011fmen, kullan\u0131c\u0131lar kesilen metnin tamam\u0131na eri\u015femezler. \u0130kincisi, etkile\u015fimli bir \"Devam\u0131n\u0131 Oku\" d\u00fc\u011fmesi veya benzer bir mekanizma sa\u011flamaz. Bizim Angular direktifimiz, bu eksiklikleri gidererek kullan\u0131c\u0131n\u0131n metnin tamam\u0131n\u0131 diledi\u011fi zaman g\u00f6r\u00fcnt\u00fclemesine olanak tan\u0131r ve daha zengin bir kullan\u0131c\u0131 deneyimi sunar.<\/p>\n
      5. Direktifimi \u00e7ok say\u0131da elementte kullan\u0131rsam performans sorunlar\u0131 ya\u015far m\u0131y\u0131m?<\/h4>\n
      E\u011fer uygulaman\u0131zda y\u00fczlerce veya binlerce metin blo\u011funda bu direktifi ayn\u0131 anda kullan\u0131rsan\u0131z, ba\u015flang\u0131\u00e7ta ve her DOM manip\u00fclasyonunda k\u00fc\u00e7\u00fck performans etkileri olabilir. Ancak modern taray\u0131c\u0131lar ve Angular'\u0131n optimizasyonlar\u0131 sayesinde, \u00e7o\u011fu durumda bu etki ihmal edilebilir d\u00fczeydedir. Yine de, performans kritik senaryolarda \u015funlar\u0131 g\u00f6z \u00f6n\u00fcnde bulundurabilirsiniz:<\/p>\n
        \n
      • Direktifi sadece ger\u00e7ekten ihtiya\u00e7 duyulan yerlerde kullan\u0131n.<\/li>\n
      • DOM manip\u00fclasyonlar\u0131n\u0131 Renderer2<\/code> ile en verimli \u015fekilde yap\u0131n.<\/li>\n
      • Gereksiz de\u011fi\u015fim alg\u0131lama d\u00f6ng\u00fclerini tetiklemekten ka\u00e7\u0131n\u0131n.<\/li>\n
      • B\u00fcy\u00fck listelerde Virtual Scroll<\/code> gibi performans optimizasyonlar\u0131n\u0131 de\u011ferlendirin.<\/li>\n<\/ul>\n
                Do\u011fru uyguland\u0131\u011f\u0131nda, direktiflerin performans \u00fczerindeki etkisi genellikle minimaldir.<\/p>\n
        <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1488],"tags":[],"class_list":{"0":"post-34102","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-angular","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nAngular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme<\/title>\n<meta name=\"description\" content=\"Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme\" \/>\n<meta property=\"og:description\" content=\"Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-11T04:00:59+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"22 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme\",\"datePublished\":\"2025-11-11T04:00:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/\"},\"wordCount\":3515,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Angular\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/\",\"name\":\"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-11T04:00:59+00:00\",\"description\":\"Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme","description":"Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/","og_locale":"tr_TR","og_type":"article","og_title":"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme","og_description":"Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.","og_url":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-11T04:00:59+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"22 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme","datePublished":"2025-11-11T04:00:59+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/"},"wordCount":3515,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Angular"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/","url":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/","name":"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-11T04:00:59+00:00","description":"Angular Direktifleri ile k\u0131salt\u0131lm\u0131\u015f metinleri zarif\u00e7e devam ettirmenin yollar\u0131n\u0131 ke\u015ffedin. Kullan\u0131c\u0131 deneyimini art\u0131ran, okunabilirli\u011fi iyile\u015ftiren pratik \u00e7\u00f6z\u00fcmler burada.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/angular-direktifi-ile-kisaltilmis-metinleri-zarifce-devam-ettirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular Direktifi ile K\u0131salt\u0131lm\u0131\u015f Metinleri Zarif\u00e7e Devam Ettirme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=34102"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/34102\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=34102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=34102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=34102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}