Katkıda Bulun
Detaylı Rehberler
Şablonlar

Şablon sözdizimi

Angular'da şablon, bir HTML parçasıdır. Angular'ın birçok özelliğinden yararlanmak için şablon içinde özel sözdizimi kullanın.

TIP: Bu kapsamlı rehbere dalmadan önce Angular'ın Temel Bilgiler sayfasına göz atın.

Her Angular bileşeninin, bileşenin sayfaya işlediği DOM'u tanımlayan bir şablonu vardır. Angular, şablonları kullanarak veriler değiştikçe sayfanızı otomatik olarak güncel tutabilir.

Şablonlar genellikle bir *.ts dosyasının template özelliğinde veya *.html dosyasında bulunur. Daha fazla bilgi için bileşenlerin derinlemesine rehberine göz atın.

Template'ler nasıl çalışır?

Şablonlar, yerleşik şablon fonksiyonları, veri bağlama, olay dinleme, değişkenler ve daha fazlası gibi ek özelliklerle HTML sözdizimini temel alır.

Angular, uygulamanızın dahili bir anlayışını oluşturmak için şablonları JavaScript'e derler. Bunun faydalarından biri, Angular'ın uygulamanıza otomatik olarak uyguladığı yerleşik işleme optimizasyonlarıdır.

Standart HTML'den farkları

Şablonlar ile standart HTML sözdizimi arasındaki bazı farklar şunlardır:

  • Şablon kaynak kodundaki yorumlar işlenmiş çıktıda yer almaz
  • Bileşen ve direktif elemanları kendini kapatan olabilir (örn. <UserProfile />)
  • Belirli karakterlere sahip nitelikler (yani [], (), vb.) Angular için özel anlam taşır. Daha fazla bilgi için bağlama belgelerine ve olay dinleyicileri ekleme belgelerine bakın.
  • @ karakteri, Angular için şablonlara kontrol akışı gibi dinamik davranış eklemek için özel bir anlam taşır. Literal bir @ karakteri eklemek için bunu bir HTML varlık kodu (&commat; veya &#64;) olarak yazabilirsiniz.
  • Angular gereksiz boşluk karakterlerini yok sayar ve daraltır. Daha fazla bilgi için şablonlarda boşluk konusuna bakın.
  • Angular, dinamik içerik için yer tutucu olarak sayfaya yorum düğümleri ekleyebilir, ancak geliştiriciler bunları yok sayabilir.

Ek olarak, çoğu HTML sözdizimi geçerli şablon sözdizimi olsa da, Angular şablonlarda <script> elemanını desteklemez. Daha fazla bilgi için Güvenlik sayfasına bakın.

Sırada ne var?

Aşağıdaki konular da ilginizi çekebilir:

Konular Ayrıntılar
Binding dynamic text, properties, and attributes Dinamik verileri metne, özelliklere ve niteliklere bağlayın.
Adding event listeners Şablonlarınızdaki olaylara yanıt verin.
Two-way binding Bir değeri eşzamanlı olarak bağlayın ve değişiklikleri iletin.
Control flow Elemanları koşullu olarak gösterin, gizleyin ve tekrarlayın.
Pipes Verileri bildirimsel olarak dönüştürün.
Slotting child content with ng-content Bileşenlerin içeriği nasıl işlediğini kontrol edin.
Create template fragments with ng-template Bir şablon parçası bildirin.
Grouping elements with ng-container Birden fazla elemanı gruplayın veya işleme için bir konum işaretleyin.
Variables in templates Değişken bildirimleri hakkında bilgi edinin.
Deferred loading with @defer @defer ile ertelenebilir görünümler oluşturun.
Expression syntax Angular ifadeleri ile standart JavaScript arasındaki benzerlik ve farklılıkları öğrenin.
Whitespace in templates Angular'ın boşluğu nasıl işlediğini öğrenin.