İlk defa Single Page Application yazacak kişiler için Angular’ ın nasıl çalıştığı biraz kompleks gelebiliyor. Çünkü klasik düzenden çok farklı. Klasik düzende, sayfalar backend’ teki layout larda bind edilir ve tarayıcıya rendered şekilde gelir. Lakin SPA yapısında sayfalarımız tamamen tarayıcıda render ediliyor. Backend’ ten XHR requestler ile data alınıyor ve sayfalara bind ediliyor.
Server da çalışan uygulamanız bir api gibi davranıyor. Sadece veri akışını sağlamak.

index.html dosyasında etiketini göreceksiniz. Angular uygulamanızdaki tüm değişiklikler bu etiketin içinde dinamik şekilde gerçekleşiyor. Sayfadan sayfaya geçerken, tüm sayfalar bu etiket içine gerekli işlemlerden geçerek inject ediliyor.

Lakin aklınıza şu soru gelecektir: her sayfa değiştiğinde app-root tamamen yenilenirse, state’ i nasıl koruyacağız ? Örnek vermek gerekirse, sayfa geçişlerinde header ve footer sabit kalabilmeli, sadece içerik değişmeli. İşte bunun için AppComponent yapısı var. Angular projenizi açtığınızda default olarak bulunuyor.

AppComponent’ i uygulamanızın çekirdeği olarak düşünebilirsiniz.

Şimdi akılda oluşması gereken birkaç soru var…

Angular’ ın kendisi, app-root etiketini nerden biliyor ? App component’ i nerden biliyor ? da bütün herşey sırasıyla gerçekleşip sonuç alıyoruz.

Cevap, main.ts dosyası…

Angular framework ve diğer dosyalar compile edilip sayfanızda yüklenip çalışmaya başladığında, main.ts dosyasındaki ayarlara bakar.

Gördüğünüz üzere, main.ts de uygulamanın AppModule ile bootstrap edildiği görülüyor.

AppModule’ e bakalım

AppModule’ ün AppComponent’ i kullandığını görüyoruz.

AppComponent dosyasında da "app-root" sorumuza cevap aldığımız görülebilir.

Module ve Component nedir ? ilerleyen konularda derinlemesine değineceğim.

Kısaca app-root, appmodule, appcomponent isimlendirmeleri statik isimlendirmeler değil, değişkendirler.

main.ts dosyası statik midir ? Hayır, main.ts de angular.json dosyasında tanımlanmıştır. Dilerseniz değiştirebilirsiniz.

Statik olarak tek birşey var. angular.json dosyasının ismi 🙂

Last modified: 22 October 2019

Author

Comments

Write a Reply or Comment

Your email address will not be published.