Angular, modern ve \u00f6l\u00e7eklenebilir web uygulamalar\u0131 geli\u015ftirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir \u00f6n y\u00fcz \u00e7er\u00e7evesidir. Bu \u00e7er\u00e7eve, geli\u015ftiricilere karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini ve etkile\u015fimli deneyimleri kolayca olu\u015fturma imkan\u0131 sunar. Angular’\u0131n sundu\u011fu bir\u00e7ok \u00f6zellikten biri de “Pipes” (Borular) mekanizmas\u0131d\u0131r. Pipes, bir de\u011feri \u015fablonda (template) g\u00f6r\u00fcnt\u00fclemeden \u00f6nce d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131lan basit fonksiyonlard\u0131r. Temel olarak, bir veriyi al\u0131r, \u00fczerinde belirli bir i\u015flem yapar ve d\u00f6n\u00fc\u015ft\u00fcr\u00fclm\u00fc\u015f \u00e7\u0131kt\u0131y\u0131 d\u00f6nd\u00fcr\u00fcr. Bu, \u00f6zellikle veri formatlama, filtreleme veya s\u0131ralama gibi yayg\u0131n g\u00f6revler i\u00e7in \u015fablonlar\u0131n\u0131z\u0131n temiz ve okunabilir kalmas\u0131n\u0131 sa\u011flar.<\/p>\n
Pipes’\u0131n \u00f6nemi birka\u00e7 ana noktada yatmaktad\u0131r:<\/p>\n
{{ veri | pipeAd\u0131 }}<\/code> gibi basit bir s\u00f6zdizimi sayesinde, \u015fablonunuzda verinin nas\u0131l d\u00f6n\u00fc\u015ft\u00fcr\u00fcld\u00fc\u011f\u00fcn\u00fc anlamak \u00e7ok daha kolay hale gelir. Bu da uygulaman\u0131n bak\u0131m\u0131n\u0131 ve anla\u015f\u0131l\u0131rl\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/li>\n- Mod\u00fclerlik:<\/strong> Her Pipe, belirli bir g\u00f6revi yerine getiren ba\u011f\u0131ms\u0131z bir birimdir. Bu mod\u00fcler yap\u0131, kodun daha d\u00fczenli olmas\u0131n\u0131 sa\u011flar.<\/li>\n
- Performans \u0130yile\u015ftirmeleri:<\/strong> Angular, Pure (Saf) Pipes’\u0131 varsay\u0131lan olarak optimize eder. Bu, bir Pure Pipe’\u0131n yaln\u0131zca giri\u015f de\u011feri de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131 anlam\u0131na gelir, bu da gereksiz hesaplamalar\u0131 \u00f6nleyerek performans\u0131 art\u0131r\u0131r.<\/li>\n<\/ol>\n
Angular, bir\u00e7ok yayg\u0131n d\u00f6n\u00fc\u015f\u00fcm ihtiyac\u0131n\u0131 kar\u015f\u0131lamak \u00fczere \u00f6nceden tan\u0131mlanm\u0131\u015f, kullan\u0131ma haz\u0131r “Dahili Borular” (Built-in Pipes) ile birlikte gelir. Bu makalede, Angular’\u0131n sundu\u011fu bu dahili borular\u0131 detayl\u0131 bir \u015fekilde inceleyecek, nas\u0131l kullan\u0131ld\u0131klar\u0131n\u0131 \u00f6rneklerle a\u00e7\u0131klayacak ve bu g\u00fc\u00e7l\u00fc arac\u0131n uygulaman\u0131zda nas\u0131l daha verimli kullan\u0131labilece\u011fine dair en iyi uygulamalar\u0131 ele alaca\u011f\u0131z.<\/p>\n
Angular Pipes’\u0131n Temel Kavramlar\u0131<\/h3>\n
Angular Pipes’\u0131 etkin bir \u015fekilde kullanabilmek i\u00e7in, onlar\u0131n temel \u00e7al\u0131\u015fma prensiplerini ve s\u00f6zdizimini anlamak kritik \u00f6neme sahiptir.<\/p>\n
Pipe S\u00f6zdizimi ve Kullan\u0131m\u0131<\/h4>\n
Bir Pipe kullanmak son derece basittir. \u015eablonunuzda, d\u00f6n\u00fc\u015ft\u00fcrmek istedi\u011finiz de\u011ferin ard\u0131ndan dikey \u00e7izgi (|<\/code>) operat\u00f6r\u00fcn\u00fc ve ard\u0131ndan Pipe ad\u0131n\u0131 eklersiniz.<\/p>\n{{ de\u011fer | pipeAd\u0131 }}<\/code><\/pre>\n \u00d6rne\u011fin, bir metni b\u00fcy\u00fck harfe d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in UpperCasePipe<\/code> kullanabiliriz:<\/p>\nOrijinal Metin: {{ 'merhaba d\u00fcnya' }}<\/p>\n
B\u00fcy\u00fck Harfli Metin: {{ 'merhaba d\u00fcnya' | uppercase }}<\/p>\n<\/code><\/pre>\n
Baz\u0131 Pipes, davran\u0131\u015flar\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in parametreler alabilir. Parametreler, Pipe ad\u0131n\u0131n ard\u0131ndan iki nokta \u00fcst \u00fcste (:<\/code>) ile ayr\u0131l\u0131r. Birden fazla parametre varsa, bunlar da iki nokta \u00fcst \u00fcste ile ayr\u0131l\u0131r:<\/p>\n{{ de\u011fer | pipeAd\u0131:parametre1:parametre2 }}<\/code><\/pre>\n \u00d6rne\u011fin, bir say\u0131y\u0131 belirli bir ondal\u0131k basamak say\u0131s\u0131yla formatlamak i\u00e7in DecimalPipe<\/code> kullanabiliriz:<\/p>\nSay\u0131: {{ 12345.6789 | number:'1.2-2' }}<\/p>\n<\/code><\/pre>\n
Burada number<\/code> Pipe’\u0131, 1.2-2<\/code> format parametresini almaktad\u0131r. Bu parametre, say\u0131n\u0131n en az 1 tam say\u0131 basama\u011f\u0131, en az 2 ondal\u0131k basamak ve en fazla 2 ondal\u0131k basamak i\u00e7ermesi gerekti\u011fini belirtir.<\/p>\nPure (Saf) ve Impure (Saf Olmayan) Pipes<\/h4>\n
Angular Pipes, performans a\u00e7\u0131s\u0131ndan iki ana kategoriye ayr\u0131l\u0131r: Pure (Saf) ve Impure (Saf Olmayan). Bu ayr\u0131m, Pipe’\u0131n ne zaman yeniden \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 belirler ve uygulaman\u0131z\u0131n performans\u0131n\u0131 do\u011frudan etkiler.<\/p>\n
Pure Pipes<\/h5>\n
Varsay\u0131lan olarak, t\u00fcm Angular Pipes Pure’dur. Bir Pure Pipe, yaln\u0131zca giri\u015f de\u011feri de\u011fi\u015fti\u011finde yeniden \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r. Angular, giri\u015f de\u011ferlerinin referanslar\u0131n\u0131 kontrol ederek bir de\u011fi\u015fikli\u011fin olup olmad\u0131\u011f\u0131n\u0131 belirler.<\/p>\n
\n- Giri\u015f de\u011feri bir ilkel t\u00fcr (string, number, boolean, symbol) ise, de\u011feri do\u011frudan kar\u015f\u0131la\u015ft\u0131r\u0131l\u0131r.<\/li>\n
- Giri\u015f de\u011feri bir nesne (object, array, function) ise, Angular yaln\u0131zca referans\u0131n de\u011fi\u015fip de\u011fi\u015fmedi\u011fini kontrol eder, nesnenin i\u00e7indeki \u00f6zelliklerin de\u011fi\u015fip de\u011fi\u015fmedi\u011fini kontrol etmez (s\u0131\u011f kar\u015f\u0131la\u015ft\u0131rma).<\/li>\n<\/ul>\n
Bu davran\u0131\u015f, Pure Pipes’\u0131n \u00e7ok verimli olmas\u0131n\u0131 sa\u011flar \u00e7\u00fcnk\u00fc gereksiz hesaplamalar\u0131 \u00f6nler. \u00c7o\u011fu dahili Pipe (\u00f6rne\u011fin DatePipe<\/code>, CurrencyPipe<\/code>, UpperCasePipe<\/code>) Pure’dur.
\n \u00d6rne\u011fin:<\/p>\n@Component({\n selector: 'app-pure-example',\n template: \n Tarih: {{ myDate | date:'medium' }}<\/p>\n