Gereksinimler: HTTP talepleri çok zaman alıcı bir süreçtir; bir kullanıcı ön uçta form gönderdiğinde, arka uç çeşitli kontrollere ve ardından kalıcı bir veritabanına ihtiyaç duyar ve veriler ağ üzerinden iletilir. Bir kullanıcı form gönderdiğinde, bizKullanıcının arayüzdeki herhangi bir eyleme tıklayamasını (veya tekrar tekrar Gönder'e tıklamasını istemezsiniz)。 Küresel yükleme için bir animasyona ihtiyacımız var.
ng-http-loader Bu paket, bir HTTP engelleyici ve bazı spinner bileşenleri sağlar (şimdilik hepsi SpinKit'ten). HTTP engelleyici, tüm HTTP isteklerini dinler ve bekleyen HTTP istekleri sırasında bir rotator/loader göstergesi gösterir.
NPM adresi:Bağlantı girişi görünür.
GitHub adresi:Bağlantı girişi görünür.
Angular sürümünüze göre uygun ng-http-loader sürümünü kurun, örneğin Angular 17 sürümünü alarak, kurulum komutu şu şekildedir:
Bağımsız bir bileşen olduğum için app.config.ts aşağıdaki şekilde değiştirdim:
Bu arada, app.component.ts bileşeni aşağıdaki şekilde değiştirilir:
Son olarak, app.component.html kodunu aşağıdaki şekilde değiştirin:
Çizimler aşağıdaki gibidir:
Animasyon tarzı efektlerin yüklenmesiyle ilgili bilgi için lütfen aşağıdaki adrese bakınız:
export const Spinkit = {
skChasingDots: 'sk-chasing-dots',
skCubeGrid: 'sk-cube-grid',
skDoubleBounce: 'sk-double-bounce',
skRotatingPlane: 'sk-rotationg-düzlem',
skSpinnerPulse: 'sk-spinner-pulse',
skThreeBounce: 'sk-üç-zıplama',
skWanderingCubes: 'sk-dolaşan-küpler',
skWave: 'sk-wave'
};
|
Yayınlandı 10.06.2024 15:09:56
|
|
|
|
