Data binding, bir Angular uygulamasında verilerin bileşenler arasında paylaşılması ve senkronize edilmesi için kullanılan bir tekniktir. Bu teknik, bileşenlerin verileri alıp kullanıcı arayüzünde göstermesi, kullanıcının girdiği verileri alması, verilerin işlenmesi ve depolanması gibi işlemleri otomatik olarak yönetir.
Angular, veri bağlama konusunda iki yaklaşım sunar: tek yönlü ve çift yönlü veri bağlama.
- Tek Yönlü Veri Bağlama:
Tek yönlü veri bağlama, verilerin bileşenlerden kullanıcı arayüzüne veya kullanıcı arayüzünden bileşenlere tek yönlü olarak akmasını sağlar. Bileşen, verileri kullanıcı arayüzüne aktarır ve kullanıcı arayüzü değiştiğinde, bileşen değişiklikleri algılayarak işlemlerini yeniden gerçekleştirir. Bu yaklaşım, verilerin kolayca yönetilmesini ve kullanıcı arayüzünün güncellenmesini sağlar.
Tek yönlü veri bağlama, {{}} (parantez içinde iki nokta üst üste) kullanılarak gerçekleştirilir. Bu işaretler, bileşenlerdeki verilerin kullanıcı arayüzüne aktarılmasını sağlar.
Örneğin, aşağıdaki örnekte, bir bileşende bir değişken tanımlanır ve bu değişken, kullanıcı arayüzünde {{}} işaretleriyle gösterilir.
|
1 2 3 4 5 6 7 8 9 |
@Component({ selector: 'app-example', template: ` <h1>{{pageTitle}}</h1> ` }) export class ExampleComponent { pageTitle = 'Example Page'; } |
Bu kod, pageTitle değişkeninin bileşende tanımlanmasını ve kullanıcı arayüzünde {{}} işaretleriyle kullanılmasını sağlar. pageTitle değişkeni bileşenin h1 başlığına aktarılır ve kullanıcı arayüzünde görüntülenir.
- Çift Yönlü Veri Bağlama:
Çift yönlü veri bağlama, verilerin hem bileşenlerden kullanıcı arayüzüne hem de kullanıcı arayüzünden bileşenlere akmasını sağlar. Bu yaklaşım, kullanıcının verileri girdiği veya değiştirdiği durumlarda, bileşenlerin verileri anında güncellemesine ve işlemesine olanak tanır.
Çift yönlü veri bağlama, [( )] (parantez içinde iki nokta üst üste ve ardından parantez içinde iki nokta alt üst) kullanılarak gerçekleştirilir.
Örneğin, aşağıdaki örnekte, bir bileşende bir değişken tanımlanır ve bu değişken, kullanıcı arayüzünde [(ngModel)] kullanılarak gösterilir. Bu, kullanıcının verileri girer veya değiştirdiğinde bileşendeki değişkenin güncellenmesini sağlar.
|
1 2 3 4 5 6 7 8 9 10 |
@Component({ selector: 'app-example', template: ` <input [(ngModel)]="username" placeholder="Enter your username"> <p>Your username is: {{username}}</p> ` }) export class ExampleComponent { username = ''; } |
Bu kod, kullanıcıdan alınan verinin bileşendeki username değişkenine çift yönlü olarak aktarılmasını sağlar. Kullanıcı adı girildiğinde username değişkeni güncellenir ve aynı zamanda kullanıcı arayüzünde de görüntülenir.
Data binding, Angular uygulamalarında verilerin kullanıcı arayüzünde gösterilmesi, kullanıcı girişlerinin alınması, verilerin güncellenmesi ve işlenmesi gibi işlemleri kolay ve etkili bir şekilde yönetmeyi sağlar. Bu sayede Angular uygulamaları daha dinamik ve kullanıcı dostu bir deneyim sunar.
