Angular, web uygulamalarının oluşturulmasını kolaylaştıran bir JavaScript framework’üdür. Angular’da, bileşenler (components) kullanıcı arayüzünde görünen ve kullanıcının etkileşimde bulunduğu UI (kullanıcı arayüzü) elementleridir. Bileşenler, @Component dekoratörü ile işaretlenmiş sınıflardır ve bir selector (seçici) ile belirlenirler.
Angular Selector, bir bileşenin kullanıcı arayüzünde nasıl görüneceğini tanımlayan bir HTML etiketidir. Seçici (selector), bir bileşenin adını ve bileşenin yerleştirileceği HTML etiketini bir araya getirir. Seçici, bileşenlerin kullanıcı arayüzünde yerlerini belirler ve uygulama içinde nasıl kullanılacaklarını tanımlar.
Angular’da, bir bileşen sınıfının üzerindeki @Component dekoratörü kullanılarak, bileşenin seçicisi belirlenir. Seçici, selector alanında belirtilir. Selector, CSS selektörleri gibi çalışır ve HTML elementlerini seçmek için kullanılır.
Örneğin, bir uygulamanın ana bileşenini temsil eden AppComponent adında bir bileşenimiz olsun. Bu bileşen, index.html sayfasındaki <app-root></app-root> elementi içine yerleştirilecek. Bu durumda, AppComponent’in selector’ü aşağıdaki gibi olacaktır:
|
1 2 3 4 5 6 7 |
@Component({ selector: 'app-root', template: ` <h1>Welcome to my app</h1> ` }) export class AppComponent {} |
Bu örnekte, selector olarak ‘app-root’ kullanılmıştır. Bu seçici, index.html sayfasındaki <app-root></app-root> elementi ile eşleşir ve AppComponent bileşeni bu element içine yerleştirilir. AppComponent bileşeni, kullanıcı arayüzünde “Welcome to my app” mesajını gösteren bir h1 başlığı içerir.
Angular Selector, bileşenlerin uygulama içinde benzersiz bir şekilde tanımlanmasına yardımcı olur. Her bileşen, farklı bir seçici kullanarak uygulamanın farklı bölgelerine yerleştirilebilir. Bu da, uygulamanın karmaşık kullanıcı arayüzlerinin kolayca yönetilmesini sağlar.
