Angular’da Se\u00e7ici Yok Komponentler: Kal\u0131ps\u0131z UI’ler<\/p>\n
Angular geli\u015ftirme s\u00fcrecinizde s\u00fcrekli tekrar eden kod bloklar\u0131yla bo\u011fu\u015fmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Ayn\u0131 i\u015flevselli\u011fe sahip bile\u015fenler i\u00e7in s\u00fcrekli benzer kodlar yazmak verimlili\u011finizi d\u00fc\u015f\u00fcr\u00fcyor mu? \u0130\u015fte bu sorunun cevab\u0131: Se\u00e7ici Yok (Selectorless) Komponentler. Bu makalede, Angular’\u0131n sundu\u011fu bu g\u00fc\u00e7l\u00fc yakla\u015f\u0131m\u0131 detayl\u0131 olarak ele alacak, kal\u0131ps\u0131z ve tekrarlardan ar\u0131nd\u0131r\u0131lm\u0131\u015f kullan\u0131c\u0131 aray\u00fczleri olu\u015fturman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z. \u00d6\u011frenme yol haritan\u0131zda yeni ba\u015flayanlardan ileri d\u00fczeylere kadar her seviyeye uygun i\u00e7erik bulacaks\u0131n\u0131z.<\/p>\n
\u00d6ncelikle, geleneksel Angular bile\u015fenlerini d\u00fc\u015f\u00fcnelim. Bunlar, HTML \u015fablonlar\u0131 ve ilgili TypeScript kodlar\u0131yla tan\u0131mlan\u0131r ve genellikle bir se\u00e7ici (selector) kullanarak HTML’de kullan\u0131l\u0131r. \u00d6rne\u011fin, Basit\u00e7e s\u00f6ylemek gerekirse, se\u00e7ici yok komponentler, HTML’de do\u011frudan \u00e7a\u011fr\u0131lmak yerine, ba\u015fka komponentler taraf\u0131ndan ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu yoluyla kullan\u0131l\u0131r. Bu, bile\u015fenlerin daha temiz ve daha kolay y\u00f6netilebilir olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, se\u00e7ici yok komponentler, bir\u00e7ok komponent taraf\u0131ndan yeniden kullan\u0131labilir, bu da kod tekrar\u0131n\u0131 azalt\u0131r ve bak\u0131m maliyetini d\u00fc\u015f\u00fcr\u00fcr. Daha fazla bilgi i\u00e7in (https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n Bir se\u00e7ici yok komponent olu\u015fturmak i\u00e7in, Bu bir se\u00e7ici yok komponent!<\/p><\/code>,\n styles: []\n})\nexport class MyComponent { }<\/pre>\n <\/code><\/p>\n Bu komponent, HTML'de do\u011frudan kullan\u0131lamaz. Ancak, di\u011fer bir komponentin \u015eimdi, olu\u015fturdu\u011fumuz <\/code><\/p>\n <\/code>import { Component } from '@angular\/core'; @Component({ Ben ba\u015fka bir komponent!<\/p>\n {{ item }}<\/p>\n<\/p><\/div>\n <\/ng-container><\/code> <\/code>import { Component } from '@angular\/core';<\/p>\n @Component({ Bu \u00f6rnekte, Se\u00e7ici Yok komponentler, form i\u015flemede olduk\u00e7a faydal\u0131d\u0131r. \u00d6rne\u011fin, bir\u00e7ok formda tekrarlayan bir tarih se\u00e7ici bile\u015feniniz oldu\u011funu varsayal\u0131m. Bu bile\u015feni her form i\u00e7in ayr\u0131 ayr\u0131 olu\u015fturmak yerine, bir se\u00e7ici yok komponent olarak olu\u015fturabilir ve her formda ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu ile kullanabilirsiniz. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve bile\u015fenin daha kolay y\u00f6netilmesini sa\u011flar. Ayr\u0131ca, tarih se\u00e7icinin \u00f6zelle\u015ftirilmesi gerekti\u011finde, tek bir yerde de\u011fi\u015fiklik yapman\u0131z yeterli olacakt\u0131r.<\/p>\n Benzer \u015fekilde, API isteklerini y\u00f6neten bir servis bile\u015feniniz varsa, bu bile\u015feni de se\u00e7ici yok bir komponent olarak olu\u015fturabilir ve \u00e7e\u015fitli komponentlerinizde ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu ile kullanabilirsiniz. Bu yakla\u015f\u0131m, kodun daha d\u00fczenli ve okunabilir olmas\u0131n\u0131 sa\u011flar. Ayr\u0131ca, hata y\u00f6netimi ve API isteklerinin izlenmesi gibi g\u00f6revleri daha kolay hale getirir.<\/p>\n Se\u00e7ici Yok komponentleri kullan\u0131rken performans optimizasyonuna dikkat etmek \u00f6nemlidir. \u00c7ok say\u0131da komponent kullan\u0131rken, ba\u011f\u0131ml\u0131l\u0131k enjeksiyonunun performans\u0131na dikkat etmeli ve gereksiz ba\u011f\u0131ml\u0131l\u0131klar\u0131 en aza indirmelisiniz. Angular'\u0131n a\u011fa\u00e7sal yap\u0131s\u0131 sebebiyle, gereksiz komponentler olu\u015fturarak uygulaman\u0131z\u0131n performans\u0131n\u0131 olumsuz etkileyebilirsiniz. Bu nedenle, se\u00e7ici yok komponentleri stratejik olarak kullanmak ve performans \u00f6l\u00e7\u00fcmlerini d\u00fczenli olarak takip etmek \u00f6nemlidir.<\/p>\n B\u00fcy\u00fck uygulamalarda, se\u00e7ici yok komponentleri lazy loading ile entegre etmek performans\u0131 art\u0131rabilir. Lazy loading, komponentlerin yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fcklenmesini sa\u011flar. Bu, uygulaman\u0131n ba\u015flang\u0131\u00e7 y\u00fcklenme s\u00fcresini k\u0131salt\u0131r ve genel performans\u0131 iyile\u015ftirir. Angular'\u0131n lazy loading mekanizmas\u0131yla se\u00e7ici yok komponentlerinizi entegre ederek, uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve performans\u0131n\u0131 art\u0131rabilirsiniz.<\/p>\n Se\u00e7ici Yok komponentler, Angular geli\u015ftirme s\u00fcrecinde kod tekrar\u0131n\u0131 azaltmak ve bile\u015fenlerin daha mod\u00fcler ve test edilebilir olmas\u0131n\u0131 sa\u011flamak i\u00e7in g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131md\u0131r. Bu makalede, se\u00e7ici yok komponentlerin temellerini, olu\u015fturulmas\u0131n\u0131 ve kullan\u0131m\u0131n\u0131 a\u00e7\u0131klad\u0131k. Ger\u00e7ek d\u00fcnya senaryolar\u0131yla desteklenen \u00f6rnekler ve ileri d\u00fczey tekniklerle, Angular projelerinizde bu yakla\u015f\u0131m\u0131 etkili bir \u015fekilde kullanabilirsiniz. Daha fazla bilgi ve detayl\u0131 \u00f6rnekler i\u00e7in (https:\/\/fatihsoysal.com) ziyaret edebilirsiniz.<\/p>\n Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"Angular’da Se\u00e7ici Yok Komponentler: Kal\u0131ps\u0131z UI’ler Angular geli\u015ftirme s\u00fcrecinizde s\u00fcrekli tekrar eden kod bloklar\u0131yla bo\u011fu\u015fmaktan s\u0131k\u0131ld\u0131n\u0131z m\u0131? Ayn\u0131…","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":[1],"tags":[],"class_list":{"0":"post-29075","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n@Component<\/code> meta verisinin providers<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla, veya Angular’\u0131n ba\u011f\u0131ml\u0131l\u0131k enjeksiyon sistemiyle sunulan servislere benzer \u015fekilde kullan\u0131l\u0131r. Bu sayede, kod tekrar\u0131n\u0131 azalt\u0131r, bile\u015fenlerin daha mod\u00fcler ve test edilebilir olmas\u0131n\u0131 sa\u011flar ve uygulama mimarisini iyile\u015ftirir.<\/p>\nSe\u00e7ici Yok Komponent Olu\u015fturma: Ad\u0131m Ad\u0131m<\/h2>\n
Nas\u0131l Bir Se\u00e7ici Yok Komponent Yarat\u0131l\u0131r?<\/h3>\n
@Component<\/code> decorator’\u0131n\u0131n selector<\/code> \u00f6zelli\u011fini bo\u015f b\u0131rakman\u0131z yeterlidir. A\u015fa\u011f\u0131daki \u00f6rnekte, MyComponent<\/code> adl\u0131 bir se\u00e7ici yok komponent nas\u0131l olu\u015fturulur g\u00f6sterilmi\u015ftir:<\/p>\nimport { Component } from '@angular\/core';\n\n@Component({\n selector: '', \/\/ Se\u00e7ici yok\n template: providers<\/code> \u00f6zelli\u011fi veya ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu yoluyla kullan\u0131labilir. Bu, komponentin daha mod\u00fcler ve test edilebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\nNas\u0131l Ba\u015fka Bir Komponentte Kullan\u0131l\u0131r?<\/h3>\n
MyComponent<\/code>'\u0131 ba\u015fka bir komponentte nas\u0131l kullanabilece\u011fimize bakal\u0131m. Bunun i\u00e7in, ana komponentinizin providers<\/code> \u00f6zelli\u011finde MyComponent<\/code>'\u0131 belirtmeniz gerekir:<\/p>\nimport { Component } from '@angular\/core';\nimport { MyComponent } from '.\/my-component';\n\n@Component({\n selector: 'app-root',\n template: <\/pre>\n
\nimport { MyComponent } from '.\/my-component';<\/p>\n
\n selector: 'app-my-other-component',
\n template: <\/p>\n
\n})
\nexport class MyOtherComponent {
\n constructor(public myComponent: MyComponent) {}
\n}<\/code><\/p>\n<\/pre>\n
\n selector: '',
\n template: ``
\n})
\nexport class MyComponent {
\n data = ['Elma', 'Armut', 'Muz'];
\n}<\/code><\/p>\nMyOtherComponent<\/code>, MyComponent<\/code>'\u0131 ba\u011f\u0131ml\u0131l\u0131k enjeksiyonu ile al\u0131r ve kullan\u0131r. MyComponent<\/code>'\u0131n data<\/code> dizisini kullanarak bir liste olu\u015fturur. Bu \u015fekilde, MyComponent<\/code>'\u0131n selector<\/code>'una ihtiya\u00e7 duymadan, MyOtherComponent<\/code>'\u0131n i\u00e7inde kullanabiliyoruz.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131<\/h2>\n
\u00d6rnek Vaka Analizi: Form \u0130\u015fleme<\/h3>\n
\u00d6rnek Vaka Analizi: API \u0130stekleri<\/h3>\n
\u0130leri D\u00fczey Teknikler<\/h2>\n
Performans Optimizasyonu<\/h3>\n
Lazy Loading ile Entegrasyon<\/h3>\n
Sonu\u00e7<\/h2>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
\n