Bileşenler

Bileşenler, kodunuzun sürdürülebilir ve ölçeklenebilir olması için projenizi net sorumluluklara sahip anlaşılması kolay parçalar halinde düzenlemek için yapı sağlar.

İşte bir Todo uygulamasının nasıl bir bileşen ağacına ayrılabileceğine dair bir örnek.

Bu kılavuzda, Angular’da bileşenlerin nasıl oluşturulacağına ve kullanılacağına bir göz atacağız.

Bileşen Tanımlama

Her bileşen aşağıdaki temel özelliklere sahiptir:

1. Bazı yapılandırmaları içeren bir @Componentdecorator
2. DOM’da neyin işleneceğini kontrol eden bir HTML şablonu
3. Bileşenin HTML’de nasıl kullanılacağını tanımlayan bir CSS seçici
4. Durumu yönetme, kullanıcı girdisini işleme veya sunucudan veri alma gibi davranışlara sahip bir TypeScript sınıfı.

İşte bir TodoListItem bileşeninin basitleştirilmiş bir örneği.

// todo-list-item.component.ts
@Component({
  selector: 'todo-list-item',
  template: `
    <li>(TODO) Read Angular Essentials Guide</li>
  `,
})
export class TodoListItem {
  /* Component behavior is defined in here */
}

Bileşenlerde de göreceğiniz diğer yaygın meta veriler şunlardır:

• standalone: true – Bileşenlerin yazma deneyimini kolaylaştırmak için önerilen yaklaşım
• styles – Bileşene uygulanmasını istediğiniz CSS stillerini içeren bir dize veya dizeler dizisi

Bunu bilerek, işte TodoListItem bileşenimizin güncellenmiş bir sürümü.

// todo-list-item.component.ts
@Component({
  standalone: true,
  selector: 'todo-list-item',
  template: `
    <li>(TODO) Read Angular Essentials Guide</li>
  `,
  styles: `
    li {
      color: red;
      font-weight: 300;
    }
  `,
})
export class TodoListItem {
  /* Component behavior is defined in here */
}

HTML ve CSS’yi ayrı dosyalara ayırma #

HTML ve/veya CSS’lerini ayrı dosyalarda yönetmeyi tercih eden ekipler için Angular iki ek özellik sunar: templateUrl ve styleUrl.

Önceki TodoListItem bileşenini kullanarak, alternatif yaklaşım şöyle görünür:

// todo-list-item.component.ts
@Component({
  standalone: true,
  selector: 'todo-list-item',
  templateUrl: './todo-list-item.component.html',
  styleUrl: './todo-list-item.component.css',
})
export class TodoListItem {
  /* Component behavior is defined in here */
}

<!-- todo-list-item.component.html -->
<li>(TODO) Read Angular Essentials Guide</li>

// todo-list-item.component.css
li {
  color: red;
  font-weight: 300;
}

Bileşen Kullanma #

Bileşen mimarisinin bir avantajı da uygulamanızın modüler olmasıdır. Başka bir deyişle, bileşenler diğer bileşenlerde kullanılabilir.

Bir bileşeni kullanmak için şunları yapmanız gerekir:

1. Bileşeni dosyaya aktarın
2. Bileşenin içe aktar ılanlar dizisine ekleyin
3. Şablonda bileşenin seçicisini kullanın

İşte daha önce TodoListItem bileşenini içe aktaran bir TodoList bileşeni örneği:

// todo-list.component.ts
import {TodoListItem} from './todo-list-item.component.ts';
@Component({
  standalone: true,
  imports: [TodoListItem],
  template: `
    <ul>
      <todo-list-item></todo-list-item>
    </ul>
  `,
})
export class TodoList {}