Bu makaleyi okumadan önce Angular etiketindeki diğer makalelerimi okumanızı tavsiye ederim.

Geçtiğimiz hafta Yazılım Mimarı olarak, çeşitli projelerine yardımcı olduğum bir müşteride yeni başladığımız Angular projesinde global bir event mekanizması kurgulamamız gerekti.

Bu yapacağımız event mekanizması sayesinde, uygulamanın herhangi bir nesnesinden fırlatacağımız bir bilgiyi, tamamen başka bir nesne (hatta nesneler) alıp, kendi istediği gibi işleyebilecek.

Örneğin, ürünler dizisi içerisinde bir üründe yeralan Sepete Ekle butonuna basıldığında, eğer ekranda sepetin tamamı gözüküyorsa yeni bir satır oluşsun, sepetin tamamı gözükmüyorsa oluşmasın, login olduysak ödeme sayfasına gidelim, olmadıysak Giriş Yap uyarısı çıksın, gibi..

Hemen yeni bir Angular projesi oluşturalım;

Projeye yeni bir Service eklemek için aşağıdaki komutu çalıştıralım;

Bu sayede, projenin çeşitli dosyalarında kullanabileceğimiz, Injectable() bir servisimiz oluştu.

Yeni oluşturduğumuz servisi açalım ve aşağıdaki kodları içerecek şekilde güncelleyelim;

Bu servisin Injectable() olmasını sağladık, fakat hala instance‘i alınıp kullanılabilir. constructor() method içerisinde kurguladığımız mantık sayesinde bu servisin yeni instance‘inin alınmasının önüne geçmiş olduk.

GetInstance() methodu ile de, bir çeşit Singleton Pattern implemente etmiş olduk.

broadcast() methodu, parametre ile aldığı bilgiyi, Global Messaging servisine kendini bağlamış (attached) olan her nesneye iletir.

messaging$ değişkenini ise, başka nesnelerin Global Messaging servisine kendilerini bağlayabilmeleri için ekledik.

Örnek kullanımı, app.component.html dosyasını açalım ve aşağıdaki 2 satırı ekleyelim;

Özellikle ikinci satırdaki kullanıma dikkat edelim. message değişkeni olduğu hali ile değil, json karşılığı ile ekrana gelecek. Bir değişkeni olduğu hali ile değil, bir takım değişikliklerin uygulandığı hali ile kullanmak için Angular PipeTransform sınıfını kullanıyoruz.

Son olarak, app.component.ts dosyasını açalım ve aşağıdaki şekilde güncelleyelim;

AppComponent class‘ı OnInit interface‘ini implemente ediyor ve ngOnInit() methodu içerisinde GlobalMessagingService class‘ının GetInstance() methodu aracılığı ile instance‘ına ulaşıyor ve messaging$ değişkeni aracılığı ile global event‘e subscribe oluyor. Tek yaptığımız ise, event aracılığı ile gelen değeri message değişkenine atamak.

sendMessage() methodunda ise GlobalMessagingService class‘ının GetInstance() methodu aracılığı ile instance‘ına ulaşıyor ve broadcast() methodunu istediğimiz bir parametre ile çağırıyoruz.

Yukarıdaki örnekte { title: 'Laptop', price: 1200, command: 'SepeteEkle', date: new Date() } parametresi ile çağırdığımız için ekrandaki butona her bastığımızda messaging$ değişkeni üzerinden kendini bağlamış her nesne, sepete 1200 değerinde bir Laptop eklendiğini öğrenecek.