Angular’da Component Geliştirme: Temeller ve İpuçları

Angular, component tabanlı bir JavaScript framework’üdür ve Angular uygulamaları component’lerden oluşur. Component’ler, kullanıcı arayüzünün yapı taşlarıdır ve uygulamanın farklı parçalarını temsil eder. Bu blog yazısında, Angular’da component geliştirmenin temellerini ve bazı ipuçlarını ele alacağız.

• Component Oluşturma:

Angular’da bir component oluşturmak için @Component dekoratörünü kullanırız. Dekoratör, component’in özelliklerini tanımlar ve component’i Angular uygulamasına ekler. Component sınıfı, component’in iş mantığını ve verilerini içerir. İşte bir örnek:

import { Component } from '@angular/core';
@Component({
selector: 'app-example',

templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
title = 'Örnek Component';
message = 'Merhaba, Dünya!';
} 

Yukarıdaki örnekte, ExampleComponent adında bir component oluşturduk. Component’in title ve message adında iki özelliği bulunuyor.

• Veri Bağlama (Data Binding):

Angular’da veri bağlama, component’ler arasında veri akışını kolaylaştıran önemli bir özelliktir. Veri bağlama, component’in HTML şablonu ile component sınıfı arasında veri alışverişini sağlar. İki yönlü veri bağlama (two-way data binding), bir model değiştiğinde hem component’in verilerini günceller hem de kullanıcı arayüzünü güncel tutar. İşte bir örnek:

{{ title }}
{{ message }}

Yukarıdaki örnekte, title ve message değişkenleri HTML şablonunda {{ }} ifadesiyle kullanılarak veri bağlaması gerçekleştiriliyor. Bu sayede, component’in verileri dinamik olarak görüntüleniyor.

• Olay Yönetimi (Event Handling):

Angular’da kullanıcı etkileşimlerini yönetmek için olay yönetimi kullanılır. Kullanıcı bir düğmeye tıkladığında veya bir formu gönderdiğinde, ilgili olayı ele almak ve işlemek için olay yöneticileri kullanılır. İşte bir örnek:

<button (click)="onButtonClick()">Tıkla</button>

Yukarıdaki örnekte, click olayı <button> elementine bağlanıyor ve onButtonClick() fonksiyonu tetikleniyor.

• Component’ler Arası İletişim:

Bir Angular uygulaması genellikle birden çok component’ten oluşur ve bu component’ler arasında veri ve olayların iletilmesi gerekebilir. İşte bir örnek:

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  @Input() message: string;
  @Output() notify = new EventEmitter();
  
  onClick() {
    this.notify.emit('Bildirim gönderildi!');
  }
}

Yukarıdaki örnekte, ParentComponent adında bir component oluşturduk. message adında bir input property ve notify adında bir output event’i tanımladık. onClick() fonksiyonu, notify event’ini tetikleyerek bir bildirim gönderiyor.

• Yaşam Döngüsü Yönetimi:

Angular component’leri, yaşam döngüsü olaylarına sahiptir. Component’in oluşturulması, görüntülenmesi, güncellenmesi ve yok edilmesi gibi olaylar, component’in belirli aşamalarında gerçekleşir. İşte bir örnek:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  templateUrl: './lifecycle.component.html',
  styleUrls: ['./lifecycle.component.css']
})
export class LifecycleComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component oluşturuldu.');
  }
  
  ngOnDestroy() {
    console.log('Component yok edildi.');
  }
}

Yukarıdaki örnekte, LifecycleComponent adında bir component oluşturduk. ngOnInit() ve ngOnDestroy() fonksiyonları, component’in oluşturulduğu ve yok edildiği zamanlarda çağrılıyor.

Sonuç: Angular’da component geliştirme, uygulamaların temel yapı taşlarını oluşturmanın önemli bir parçasıdır. Bu blog yazısında, component geliştirmenin temellerini ve bazı ipuçlarını ele aldık. Umarım bu yazı, Angular’da component’lerle çalışırken size rehberlik eder ve daha iyi bir component geliştiricisi olmanıza yardımcı olur.

Bu örnek blog yazısında, Angular’da component geliştirme konusunu genel hatlarıyla ele aldık.  Umarım faydalı olmuştur.