Angular, modern web uygulamaları geliştirmek için popüler bir JavaScript çatısıdır. Angular projelerinizde daha verimli çalışmak ve geliştirme süreci...
Angular'da 404 Hata Sayfası Oluşturma
Angular routing ve navigation işlemlerimizin yanında 404 sayfasına da ihtiyacımız olacaktır. Url yanlış girildi ise ya da sayfada genel bir problem var ise mevcut sayfayı hatalı bir şekilde göstermek yerine 404 hata sayfalarına yönlendirmek en doğrusu olacaktır. Bu sayede kullanıcılara hatalı sayfalar ve bu hataların neler olduğunu görmelerine izin vermeden sizin istediğiniz hata sayfasını görecektir. Böylece kullanıcı açısında da hem de sizin açınızdan kullanışlı ve uygun olacaktır.
Peki 404 hata sayfalarını Angular'da nasıl yapabiliriz? Gelelim Angular 404 hata sayfasının hazırlanışına.
İlk olarak hata sayfası için bir component oluşturmamız gerekiyor. Bu componente "notfound" ya da "404" gibi isimler verebilirsiniz.
ng g c notfound
Componentimiz oluştuktan sonra içerisinde istediğimiz şekilde HTML ve CSS ile güzel bir tasarım hazırlayabiliriz. Bu tamamen size kalmıştır. Basit bir şekilde yaparsak:
notfound.component.html
Sayfa Bulunamadı
Üzgünüz, aradığınız sayfayı bulamadık. Bu sayfanın adresini yanlış girimiş olabilir ya da sayfa bozulmuş olabilir.
Bu HTML sayfamız için biraz CSS ile yazılarımızı biçimlendirebiliriz.
notfound.component.css
h1{ color:red; font-weight:bold; }p{ font-size:22px; font-weight:bold; }
404 hata sayfamızın tasarımı şuan için tamamlandı. Son adım olarak bu sayfamızı app-routing.module.ts içerinde çağırarak gerekli tanımlamaları yapmamız gerek. Bu sayfada aşağıdaki tanımlamaları yaptığınızda 404 hata sayfanız artık çalışmaya hazırdır. Burada dikkat edilmesi gereken yer NotfoundComponent'i path tanımlamasını 404 olarak yaptık. Buraya siz isterseniz "Error", "Hata" , "PageNotFound" gibi tanımlamalar yapabilirsiniz. Yani component adı ile aynı olmak zorunda değildir. İkinci satırdaki tanımlamamız ise hatalı sayfa gelirse nereye yönlendireceğimizi belirtmek içindir. Burada da dikkat edilmesi gereken yer NotfoundComponent'e tanımlanan path adresi ile redirectTo alanının tanımlaması aynı olması gerekir. Çünkü hatalı sayfalar olduğunda ya da url yanlış girilmiş sayfalarda belirtmiş olduğunuz sayfaya yönlenecek. Bu durumda da sizin oraya 404 hata sayfasını tanımlamanız gerekiyor.
app-routing.module.ts
{ path: '404', component: NotfoundComponent },{ path: '**', redirectTo: '/404' }
Angular projenizi çalıştırdığınızda url alanına olmayan bir url girerseniz sizi otomatik olarak 404 sayfasına yönlendirecektir.
ng serve --o
Son olarak havalı 404 sayfalar yapamak istiyorsanız aşağıdaki örneklere göz atabilirsiniz.
https://codepen.io/uiswarup/pen/XWdXGGV
https://codepen.io/uzcho_/pen/eYZLMdg
https://codepen.io/takaneichinose/pen/ZEQvRYQ
https://codepen.io/jh3y/pen/BaNOJWK
https://codepen.io/kdbkapsere/pen/oNXLbqQ
Umarım faydalı olmuştur. İyi çalışmalar dilerim.
Yorum yapabilmek için giriş yapmalısınız. Giriş yapmak için tıklayınız.