Şimdiye kadar yaptığımız tüm route tanımlamalarını uygulamamızın ana modulünde yani appModule‘ de gerçekleştirdik. Lakin appModule dosyası olabildiğince sade olmalı. Bu teknik bir gereksinim değil ! Ama ileride uygulamanız büyüdükçe hayli fazla sayıda route tanımlamanız olacak. Bu tanımlamaların kullandığı Component’ leri de aynı dosya içerisinde yazmanız gerekecek. Böyle bir durumda, appModule dosyası okunmaktan çok uzak bir... » read more
Uygulamamızda route’ ları tanımladık ve hepsi çalışıyor. Lakin route yapımız değişirse ne olacak ? Google vb. yerlerde indekslenmiş eski url’ ler den gelen kullanıcılar ne olacak ? Yada yanlışlıkla hiç varolmamış bir url’ e gidilmek istenirse ne olacak ? Eğer ki redirect(yönlendirme) yapmadıysanız, console’ da hatalar fırlatılacaktır ve haliyle uygulamanızda çalışmayacaktır. İşte bu durumu el... » read more
Angular’ da child(nested) yani iç-içe route’ lar oluşturabilirsiniz. Child route kendi Component’ ine sahip olabilir. Child route, ana route’ un içerisinde kendisine ait view’ a sahip olabilir. Child Route tanımlaması; Ana route’ a child route’ lar eklemek için, ilgili ana route’ u tanımlayan objenin içerisinde "children" isimli bir öznitelik oluşturup, dizi içerisinde her bir child... » read more
Tanımladığınız route’ larda query parameter yada fragment’ larınız olabilir. Query parameter, "?" işaretinden sonraki değerlerdir. Fragment ise (#) işaretinden sonraki değerlerdir. Bu başlık altında inceleyeceğimiz 2 konu var. Query parameters angular route link’ e nasıl eklenir ? Ve bu parametrelere nasıl erişilir ? Uygulama Senaryosu; Anasayfada listelenen ürünlerin linklerine, "?addToBasket=true" query parameter ve değerini ekliycez.... » read more
Angular uygulamaları geliştirirken, aynı route pattern’ i ve aynı component’ i kullanan linkler arasında geçiş yaptığınızda, component‘ in tekrar tekrar yüklenmediğini farkedeceksiniz. Bunu ilk farkettiğiniz an tahminen, kategori vb. gibi pagination kullanan component’ ler olacaktır. Url değişmiş lakin yeni data yüklenmemiş 🙂 Sebebi çok basit, Angular route değişikliklerinde, değişikliği url kısmında hemen uygular. Lakin route... » read more
Angular router tanımlamayı, linklemeyi ve yönlendirmeyi https://gelistir.net/tag/router/ etiketi altındaki konularda anlatmıştım. Altyapımız oluştuğuna göre artık gerçek hayatta en sık kullanacağımız parametreli route oluşturma ve parametrelere erişme konusuna geçebiliriz. Uygulama senaryosu; 2 adet component’ imiz var. HomeComponent; dizi içerisinde tanımladığımız ürünleri, her ürünün kendi id’ si ile linkleyerek listeleyecek. ProductComponent; route’ da belirtilen id’ ye sahip... » read more
Angular Router linklemeyi statik olarak template kısmında yapmayı https://gelistir.net/495/angular-router-linkleme-statik/ adresinde anlatmıştım. Lakin çoğu zaman, linkleme ve sayfa yönlendirme(navigate) işlemlerini bileşenlerin içerisinde TypeScript kodu ile yapmanız gerekecektir. İhtiyaç senaryosu; Neden programatik şekilde TypeScript kodu ile linkleme yapmaya gerek var ? sorusunun gerçek hayattaki uygulamalardan verilebilecek en basit örneği: E-ticaret uygulamanızda, kullanıcı ürün sayfasında "Hemen Satın Al"... » read more
Angular Router konusuna https://gelistir.net/492/angular-router-giris/ adresindeki başlıkta giriş yapmıştık. Bu başlıkta ise, uygulama içinden, route’ lara link vermeyi inceleyeceğiz. Anasayfa için yeni bir HomeComponent oluşturuyorum ve ardından AppModule içerisindeki route tanımlarımı düzenliyorum; const appRoutes: Routes = [ {path: '', component: HomeComponent}, {path: 'about', component: AboutComponent} ]; Basit bir navigation bar oluşturuyoruz. Linklemeleri bu bar üzerinde yapıcaz.... » read more
Angular Router Nedir ? Angular framework kendi router modülü ile gelmektedir. Router sayesinde, url değişmesine rağmen aynı index.html dosyasındaki kalıp, ana template’ i kaybetmeyip, sadece route bazlı template’ in ana template’ e inject edilmesini sağlayabilirsiniz. Bu sayede, Single Page Application oluşturabilirsiniz. Neden Single Page Application ? Geleneksel web uygulamaları, url değiştikçe, her yeni url’ i... » read more
Component’ ler arası veri paslamaya pek çok defa ihtiyaç duyarız. Nested(iç-içe) component arası veri paslanmasını https://gelistir.net/340/angular-componentler-arasi-veri-paslama/ adresinde incelemiştik. Input ve Output ile gerçekleştiriyorduk. Lakin Cross Component’ ler arası veri paslamak daha farklı bir pratik gerektiriyor. Cross Component Nedir ? Nested Component’ ler gibi aynı hiyerarşi altında OLMAYAN component’ lerdir. Örneğin, Header, Content, footer vb. gibi.... » read more