Angularda Json-Server Kullanımı

Angularda Json-Server Kullanımı

Bugün projelerimizde Fake Rest Api olarak kullanabileceğimiz Json-Server ile küçük bir uygulama yapacağız. Detaylı kullanımı ve bilgi almak için Json-Server dokümantasyonunu inceleyebilirsiniz. Json-Server kullanarak projemizin henüz hazır olmayan apilerinin de UI tarafından implementasyonuna başlayabilir veya kurduğumuz tablo gibi yapıları büyük datalara nasıl tepkiler vereceğini kolaylıkla görebiliriz.

db.json

Bu noktadan sonra Angular tarafında template’imizi oluşturmaya başlıyoruz. Çoğunlukla screenshotlarla devam edeceğiz kaynak kodlara github üzerinden ulaşabilirsiniz. Oluşturduğumuz “db.json” dosyasını rest servis olarak çalıştıralım. Burada “db.json” dosyamız ile aynı path de değilsek, dosyanın olduğu pathi göstermeyi unutmayalım.

json-server — watch db.json

Bu komuttan sonra localhostumuzun 3000 numaralı portu üzerinde Fake servisimiz çalışmaya başladı. Eğer farklı bir porttan kullanmak istiyorsak port parametresini kullanabiliriz. Postman yardımıyla datalarımıza ulaşmaya çalışalım. Doğrudan endpointe get isteği attığımızda tüm datalarımızı listeliyoruz.


Tüm Kahramanları Alın

Eğer id ye göre ulaşmak istersek localhost:3000/heroes/1 ile id’si 1 olan kayda ulaşabiliriz. Json-server bize bir çok açıdan esneklik sağlıyor. Sorting,
filtering ve Kayıtları pageable şekilde almamıza olanak sağlıyor. Gelin Angular ile hazırladığımız bu dataları tablo haline getirelim. Tip güvenli çalışmak önemlidir, bu yüzden önce hero modelimizi oluşturuyoruz.


heroes.ts

Dataları getireceğimiz servisi yazalım. Temel CRUD işlemlerini yapacağımız fonksiyonlarımızı yazıyoruz.


heroes.service.ts

Componentimiz içerisinde modelimizi tanımlıyoruz. Dataları alacağımız, manipüle edeceğimiz fonksiyonlarımızı yazıyoruz.


heroes.component.ts

Gelelim Componentimiz içinde Tablomuzu, yeni hero oluşturmaya olanak sağlayacak dialog penceremizi ve delete işlemini
yapabileceğimiz butonu ekliyoruz.

Mete AYDIN

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir