Angular 19 – linkedSignal’a Giriş

Angular 19 – linkedSignal’a Giriş

Angular 19, geliştiriciler için heyecan verici yeni özellikler getirdi. Bunlardan biri de **linkedSignal**’dır. linkedSignal, Angular’ın tepkisel programlama yeteneklerini daha da güçlendirmek için tasarlanmıştır. Bu makalede, linkedSignal’ın ne olduğuna, nasıl kullanıldığına ve neden Angular uygulamaları için harika bir ekleme olduğuna dair ayrıntılı bir açıklama sunacağım.

linkedSignal Nedir?

linkedSignal, bir sinyalin değerini başka bir sinyalin değerine bağlamanıza olanak sağlayan yeni bir Angular özelliğidir. Bu, iki veya daha fazla sinyal arasında bağlantı oluşturarak birinin değişimi diğerini otomatik olarak etkilemesini sağlar. Diğer bir deyişle, linkedSignal, bir sinyalin değerinin başka bir sinyale bağlı olduğu durumları ele almamıza olanak tanıyan **sinyal bağımlılıkları** oluşturmamızı sağlar.

Bir sinyalin değerinin başka bir sinyale nasıl bağlı olduğunu açıklayalım. Bir **shoppingCart** sinyalimiz olsun ve bu sinyalin değeri alışveriş sepetimizdeki ürünlerin toplam sayısını temsil etsin. Ayrıca **totalCost** adında bir sinyalimiz olsun ve bu sinyalin değeri alışveriş sepetimizdeki ürünlerin toplam maliyetini temsil etsin. linkedSignal kullanarak, **shoppingCart** sinyalinin değerini **totalCost** sinyaline bağlayabiliriz. Bu sayede alışveriş sepetimize bir ürün eklediğimizde, **shoppingCart** sinyalinin değeri değişecek ve bu da bağlı olan **totalCost** sinyalinin değerinin de otomatik olarak güncellenmesini sağlayacaktır.

linkedSignal Neden Kullanışlıdır?

linkedSignal, bir dizi nedenden dolayı Angular uygulamaları için faydalı olabilir:

• Kod Basitleştirme: linkedSignal, bir sinyalin değerini başka bir sinyale bağlı tutmak için gerekli kod miktarını azaltarak kodun daha temiz ve okunabilir olmasını sağlar. Karmaşık bağımlılıkları yönetebildiğimiz için daha az kod yazmamız gerekir.
• Uygulamanın Tepkiselliğini Artırma: linkedSignal, uygulamalarımızın kullanıcı eylemlerine daha hızlı ve daha etkili bir şekilde tepki vermesini sağlar. Bir sinyalin değerini değiştirdiğinizde, bağlı olan diğer sinyaller anında güncellenir. Bu da uygulamanın daha akıcı bir deneyim sunmasını sağlar.
• Veri Bağımlılığını Yönetme: linkedSignal, veri bağımlılıklarını daha kolay ve düzenli bir şekilde yönetmemizi sağlar. Bağımlılıkların açık bir şekilde tanımlandığı ve yönetildiği bir sistem yaratarak daha az hata olasılığı ve daha iyi sürdürülebilirlik sağlar.

linkedSignal’ı Nasıl Kullanacağız?

linkedSignal’ı kullanmak oldukça basittir. linkedSignal’i kullanarak bir sinyalin değerini başka bir sinyale bağlamak için **signal.link** metodunu kullanırız. Örneğin, **shoppingCart** sinyalini **totalCost** sinyaline bağlamak için aşağıdaki kodu kullanabiliriz:

“`typescript
import { signal, linkedSignal } from ‘@angular/core’;

const shoppingCart = signal(0);
const totalCost = linkedSignal(shoppingCart, cart => cart * 10);
“`

Bu örnekte, **totalCost** sinyalini **shoppingCart** sinyaline bağladık. **totalCost** sinyalinin değeri, **shoppingCart** sinyalinin değerinin 10 katı olarak hesaplanacaktır. Yani, **shoppingCart** sinyalinin değeri 2 ise, **totalCost** sinyalinin değeri 20 olacaktır.

linkedSignal’ın Avantajları

linkedSignal, aşağıdaki avantajları sunar:

• Sinyal Bağımlılıklarını Kolaylaştırır: linkedSignal, sinyal bağımlılıklarını tanımlama ve yönetme sürecini basitleştirir.
• Sinyal Bağımlılıklarını Açıkça Tanımlar: linkedSignal, sinyal bağımlılıklarını açık bir şekilde tanımlar ve bu da kodun okunabilirliğini artırır.
• Performansı Artırır: linkedSignal, sinyallerin otomatik olarak güncellenmesini sağlar ve bu da uygulamanın performansını artırır.
• Daha İyi Kod Yönetimi: linkedSignal, daha temiz ve daha düzenli kod yazmamıza yardımcı olur ve bu da kodun sürdürülebilirliğini artırır.

Örnek Kullanım

linkedSignal’ı kullanarak bir alışveriş sepeti uygulaması örneği oluşturalım. Bu uygulamada, kullanıcıların ürün ekleyebilecekleri bir alışveriş sepeti ve toplam maliyeti gösteren bir alan olacak:

“`html

“`

“`typescript
import { Component, signal, linkedSignal } from ‘@angular/core’;

@Component({
selector: ‘app-shopping-cart’,
templateUrl: ‘./shopping-cart.component.html’,
styleUrls: [‘./shopping-cart.component.css’]
})
export class ShoppingCartComponent {
shoppingCart = signal(0);
totalCost = linkedSignal(this.shoppingCart, cart => cart * 10);

addItem() {
this.shoppingCart.update(cart => cart + 1);
}
}
“`

Bu örnekte, **shoppingCart** sinyalini **totalCost** sinyaline bağladık. **addItem** fonksiyonu, **shoppingCart** sinyalini 1 artırır ve bu da **totalCost** sinyalinin değerinin de otomatik olarak güncellenmesini sağlar.

Sonuç

linkedSignal, Angular’ın tepkisel programlama yeteneklerini daha da güçlendirmek için tasarlanmış önemli bir yeni özelliktir. linkedSignal, Angular uygulamaları için kod basitleştirme, tepkiselliği artırma ve veri bağımlılığını yönetme gibi bir dizi fayda sağlar. Angular uygulamalarınızda daha akıcı ve performanslı bir deneyim yaratmak için linkedSignal’ı kullanmanızı tavsiye ederim.

Eğer Angular veya linkedSignal hakkında daha fazla bilgi edinmek isterseniz, resmi Angular dokümantasyonuna ve fatihsoysal.com web sitesine göz atabilirsiniz.

#Etiketler
Angular, Angular 19, linkedSignal, tepkisel programlama, sinyal, sinyal bağımlılığı, kod basitleştirme, performans artırma, veri bağımlılığı yönetimi, Angular uygulamaları, örnek kullanım