🅰️ Angular: Kaynağı Okumak

Angular: Kaynağı Okumak: Angular, React'ten farklı olarak component'i İKİYE böler: mantık `.ts` dosyasında, arayüz `.html` template'inde.

Angular, React'ten farklı olarak component'i İKİYE böler: mantık `.ts` dosyasında, arayüz `.html` template'inde. Bu, bir tiyatro oyunundaki SENARYO (`.ts` — kim ne yapar) ile SAHNE DÜZENİ (`.html` — ne nerede durur) ayrımı gibidir. Neden testerı ilgilendirir? Çünkü Angular DOM'a `_ngcontent-xxx` gibi otomatik, anlamsız attribute'lar ekler — bunlar stil izolasyonu içindir ve locate için ASLA kullanılmaz, tıpkı React'in hash class'ı gibi kırılgandır. `*ngIf` bir elementi tamamen DOM'dan çıkarır (React'in conditional render'ının karşılığı), `*ngFor` ise liste üretir. Java analojisi: `.ts` sınıf gövdesi, `.html` ise o sınıfın dışa açtığı görünüm sözleşmesi gibidir. QA bağlamında: `_ngcontent`/hash gibi otomatik üretilen attribute'ları tanıyan tester, developer'dan `[attr.data-testid]` binding'i ister. Bu grup boyunca GRUP F'teki React kalıplarıyla SÜREKLİ karşılaştırma yapacağız.

📂 G1. Component + Template Ayrımı: `.ts` + `.html`

Angular'ın `.ts`/`.html` ayrımı, bir binanın MÜHENDİSLİK PLANI (yük hesapları, davranış — `.ts`) ile İÇ DEKORASYON PLANI (görsel yerleşim — `.html`) arasındaki ayrım gibidir: aynı binayı tarif eden İKİ AYRI belge, HER ZAMAN birlikte kullanılır. Peki neden bu ayrımı bilmek işine yarar? Çünkü bir bug'ın kaynağını ararken (React'te tek bir JSX dosyasına bakman yeterliyken) Angular'da HEM `.ts`'e (mantık doğru mu?) HEM `.html`'e (template doğru mu bağlanmış?) bakman gerekir — sadece birini okumak eksik bir tanı koyar. Java analojisi: eski Java web geliştirmede Servlet (mantık, `.ts`'e benzer) ile JSP (görünüm, `.html`'e benzer) ayrımı gibi, ya da MVC'deki Controller/View ayrımı gibi. QA bağlamında: "bu bug frontend'de" dediğinde, Angular'da bunu "component sınıfında mı (`.ts`) yoksa template'te mi (`.html`)" diye İKİYE ayırarak daha spesifik konuşabilirsin.

Adım Adım: `.ts` ve `.html` Nasıl Tek Bir DOM'a Birleşir

`bug-card.component.ts`

`@Input() bug` (React'in prop'una karşılık gelir) ve mantık (metotlar, değişkenler) burada tanımlanır — SAF davranış kodu.

`bug-card.component.html`

GÖRSEL yapı ayrı bir dosyadadır: `{{bug.title}}`, `*ngIf` gibi template ifadeleri burada yazılır — React'teki JSX'in AYRI dosyaya bölünmüş hali.

Angular ikisini BAĞLAR

Component sınıfı (`.ts`) ile template (`.html`) `@Component({templateUrl:...})` dekoratörüyle birbirine bağlanır — ikisi BİRLİKTE tek bir component tanımlar.

Angular, `.ts`'teki veriyi `.html`'teki template ifadeleriyle birleştirip GERÇEK DOM node'larını oluşturur.

Tester'ın refleksi: İKİ dosyaya da bak

React'te tek bir JSX dosyası yeterliyken, Angular'da bir bug'ın kaynağını ararken hem `.ts`'i (mantık) hem `.html`'i (görünüm) İNCELEMEN gerekir.

Bir "New Bug" formunda submit butonu tıklandığında hiçbir şey olmuyor. `bug-form.component.ts`'i inceliyorsun ve `onSubmit()` metodunun doğru yazıldığını görüyorsun. Sıradaki adımın ne olmalı?