Geliştir.Net

C# .Net, Angular ve daha fazlası

Angular Outsourcing Route Configuration
Angular Outsourcing Route Configuration

Ş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

Angular Route Redirect(Yönlendirme) ve Wildcard(*)
Angular Route Redirect(Yönlendirme) ve Wildcard(*)

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 Child(Nested | İç-içe) Route Oluşturmak
Angular Child(Nested | İç-içe) Route Oluşturmak

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

Angular Route Query Parameter(?) ve Fragment(#) Erişmek
Angular Route Query Parameter(?) ve Fragment(#) Erişmek

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 Route Parametrelerine Reactive olarak Erişmek (Component’ in tekrar yüklenmemesi)
Angular Route Parametrelerine Reactive olarak Erişmek (Component’ in tekrar yüklenmemesi)

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 Route Parametrelerine Erişmek
Angular Route Parametrelerine Erişmek

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 Navigate [Programatik]
Angular Router Navigate [Programatik]

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 Linkleme [Statik]
Angular Router Linkleme [Statik]

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 Giriş
Angular Router Giriş

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

Angular Cross Component iletişimi için Service kullanmak
Angular Cross Component iletişimi için Service kullanmak

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