Angular Notlarım -2 Klasör Yapısı ve Dosyalar
Önceki yazımda yeni bir Angular projesi oluşturmayı anlatmıştım. Yazıya linkten ulaşabilirsiniz. Bu yazıda Angular’ın klasör yapısından, hangi klasörün ne amaçla kullanıldığından ve proje çalışırken hangi klasörlerden geçtiğinden bahsedeceğim.
Projeye baktığımızda ilk olarak aşağıdaki klasörleri görmekteyiz.
Node-modules: npm install ile indirdiğimiz paketlerin konulduğu klasördür.
Örneğin projenize Bootstapt kullanmak istiyorsanız terminalde npm install bootstrap —- save komutunu çalıştırıyorsunuz ve Bootstrap paketleri node_modules klasörünün altına kaydediliyor.
Src klasörü projenin kendisini barındırmaktadır. Proje sürecinde kullanacağımız Component, Servis, HTML ve TypeScript dosyaları bu klasörde yer alacaktır.
Angular.json dosyası uygulama ile alakalı genel ayarların yapıldığı dosyadır. Örneğin projede kendi css veya script dosyamızı kullanmak istiyorsak, css veya script dosyasının adını/yolunu bu dosyanın içine yazarak tüm projede kullanabiliriz.
Package.json dosyasında npm install ile indireceğimiz modüllerin bilgisi yer almaktadır. Paketleri hem dependencies kısmına paket adı ve versiyonunu yazarak hem de Bootstrap örneğindeki gibi npm install ile indirebiliriz.
Dikkat ederseniz package.json dosyası içinde ng build, ng serve komutları da belirtilmiştir. Dependencies kısmında npm install ile Bootstrap paketini yüklediğimiz için bootstrap de yer almaktadır.
Biz projeyi geliştirirken çoğunlukla src klasörünün içindeki dosyalarla ilgileneceğiz
Main.ts dosyası, uygulamanın çalışmaya başladığı dosyadır. Bu dosya içinde projenin hangi modülden çalışmaya başlayacağı bilgisi yer almaktadır. Bizim main.ts dosyamızda projemizin AppModule’den başlayacağı bilgisi yer almaktadır.
app.module.ts dosyası, main.ts içerisinde belirtilen AppModule dosyasıdır. Yani projemizde ilk önce app.module.ts çalışacaktır. Projede kullanacağımız bütün modülleri, servisleri, componentleri bu dosyanın içine ekleyeceğiz.
Componentlerimizi declarations kısmında, dışarıdan kullanacağımız modülleri imports kısmında ve uygulama boyunca kullanacağımız servisleri providers kısmında tanımlarız.
Bootstrap kısmına proje başlangıç componentini yazarız. Yani ilk olarak main.ts çalışır. Sonra onun içinde yer alan app.module.ts çalışır sonrasında da onun da içinde yer alan AppComponent çalışacaktır.
Ayrıca, modüllerimizi sayfanın üst kısmına import… komutu ile de tanımlamamız gerekmektedir.
index.html: Angular’ın Single Page Application geliştirmeyi sağladığından bahsetmiştim. SPA ‘daki single page kısmını index.html dosyamız oluşturuyor diyebiliriz. Yani, bizim projedeki bütün html kodlarımız index.html üzerinden gösterilmektedir. Index.html dosyası bizim kullanıcıya gösterdiğimiz sayfadır. Componentler ile bu sayfanın içerisini doldurmaktayız.
Bu ekrandaki <app-root></app-root> etiketine dikkat etmenizi istiyorum. Bu etiketin neyi ifade ettiğini aşağıda açıklayacağım.
app.component.ts dosyasına şöyle bir göz atalım.
Bu dosyadaki selector’ün değerini bulunduğu componenti çağırmak için gerekli olan html etiketi gibi düşünebiliriz. Yani index.html dosyasındaki <app-root></app-root> etiketi, bizim component dosyasındaki selector değerini ifade etmektedir. Projenin şu anki halinde ana sayfada app.component.ts dosyasını gösteriyoruz diyebiliriz.
‘app-root’ ile componentimiz index.html dosyasına aktarılmış oluyor. Component dosyası içinde html komutları yok, ekranda neyi göstereceğiz diyebilirsiniz. Componenti temsil eden html etiketleri de templateUrl ile belirtilen html dosyasının içerisinde yer almaktadır. Ayrıca css dosyası da styleUrls kısmında belirtilmektedir
Toparlayacak olursam, kullanıcıya index.html sayfasını gösteriyoruz. Index.html içerisinde bulunan <app-root></app-root> etiketi ile componentimizin içindeki html ve css dosyalarını sayfaya yüklüyoruz.
Export class AppComponent içerisindeki değişkenleri de (örn: title) templateUrl’de belirtilen html sayfası içerisinde kullanabilmekteyiz. Bu konuyla ilgili detaylı bilgiyi sonraki yazılarımda anlatacağım.
Assets klasöründe resimler, ikonlar vs. tutulmaktadır.
Son olarak, dosya uzantılarından da anlayacağınız üzere Angular içine TypeScript kullanılmaktadır.
Bu yazıda genel olarak klasör yapısını ve projenin çalışırken geçtiği dosyaları, birbirleri ile olan ilişkileri ile anlatmaya çalıştım. Hangi klasörün ne işe yaradığı konusunun pratik yaptıkça daha da oturacağını düşünüyorum.
Sonraki yazılarımda Model Binding konusunu anlatmayı hedefliyorum. Vakit ayırıp okuduğunuz için teşekkür ederim.
Yararlandığım Kaynaklar:
Angular 7 Dersleri 4 : Kısaca Klasör Yapısı ve Dosyalar — YouTube
1 Video’ da Angular dersleri ile Angular ‘a mükemmel başlangıç! — YouTube
Angular Proje Kurulumu ve Mimari Yapısı — Angular İlk Proje — Mobilhanem
