Angular’da şablon bir HTML yığınıdır. Angular’ın birçok özelliğini geliştirmek için bir şablon içinde özel sözdizimi kullanın.
Uygulamanızdaki her bir Angular şablonu, tarayıcının görüntülediği sayfanın bir parçası olarak eklenecek bir HTML bölümüdür. Bir Angular HTML şablonu, tıpkı normal HTML gibi, ancak çok daha fazla işlevsellik ile tarayıcıda bir görünüm veya kullanıcı arayüzü oluşturur.
Angular CLI ile bir Angular uygulaması oluşturduğunuzda, app.component.html dosyası yer tutucu HTML içeren varsayılan şablondur.
Şablon sözdizimi kılavuzları, sınıf ve şablon arasındaki verileri koordine ederek UX/UI’yi nasıl kontrol edeceğinizi gösterir.
HTML’inizi güçlendirin #
Şablonlarınızdaki özel Angular sözdizimi ile uygulamalarınızın HTML kelime dağarcığını genişletin. Örneğin, Angular built-in template functions, variables, event listening ve data binding gibi özelliklerle DOM (Document Object Model) değerlerini dinamik olarak almanıza ve ayarlamanıza yardımcı olur.
Neredeyse tüm HTML sözdizimi geçerli şablon sözdizimidir. Bununla birlikte, bir Angular şablonu sayfanın tamamı değil, genel bir web sayfasının parçası olduğundan, <html>, <body> veya <base> gibi öğeleri eklemenize gerek yoktur ve yalnızca geliştirmekte olduğunuz sayfanın bir kısmına odaklanabilirsiniz.
ÖNEMLİ: Kod ekleme saldırıları riskini ortadan kaldırmak için Angular, şablonlarda <script> öğesini desteklemez. Angular, <script> etiketini yok sayar ve tarayıcı konsoluna bir uyarı çıktısı verir. Daha fazla bilgi için Security sayfasına bakın.
Şablon sözdizimi hakkında daha fazla bilgi #
Aşağıdakiler de ilginizi çekebilir:
| Konular | Detaylar |
| Interpolation | HTML’de interpolation ve ifadelerin nasıl kullanılacağını öğrenin. |
| Template statements | Şablonlarınızdaki olaylara yanıt verin. |
| Binding syntax | Uygulamanızdaki değerleri koordine etmek için bağlama özelliğini kullanın. |
| Property binding | Set properties of target elements or directive @Input() decorators. |
| Attribute, class, and style bindings | Niteliklerin, sınıfların ve stillerin değerini ayarlayın. |
| Event binding | Olayları ve HTML’nizi dinleyin. |
| Two-way binding | Bir sınıf ve şablonu arasında veri paylaşımı. |
| Built-in directives | HTML’nin davranışını ve düzenini dinleyin ve değiştirin. |
| Template reference variables | Bir şablon içindeki bir DOM öğesine başvurmak için özel değişkenler kullanın. |
| Inputs | Giriş özelliklerine sahip verileri kabul etme |
| Outputs | Çıkışları olan özel etkinlikler |
| SVG in templates | Dinamik olarak etkileşimli grafikler oluşturun. |
