Angular 8 Dosya Yapısı
Merhabalar önceki makalemizde Angular Proje Açma ve Yayınlama konusunu incelemiştik. Bu makalemizde bir Angular projesinin dosya yapısını inceleyeceğiz. Bu makalede ve sonraki makalelerde oluşturduğumuz angular-projem isimli proje ile devam edeceğim.

e2e(End to end)
Birim testlerin yada diğer testlerin yapılandırma ile ilgili dosyaları içermektedir.
node_modules

Node.js yardımıyla indirdiğimiz paketleri içermektedir.
src

src klasörü içerisindeki dosya ve klasörleri inceleyelim.
app

Bu klasörde Angular uyuglamalarının yapı taşlarından componentler ve modüller bulunmaktadır. Her componentin ayrı stil dosyalarını tanımlayabileceğimiz css dosyası bulunmakadır. app klasörünün içerisindeki dosyaları incelemeye geçelim.
* app.component.css
Componente özel css dosyasıdır. Bu css dosyasına eklenen tüm stiller sadece bu compnent için çalışır. Dolayısı ile herhangi bir yerdeki sitil ile çakışması önlenmektedir.
* app.component.html
Componentin html sayfasıdır.
* app.component.spec.ts
Componentin Uniq test dosyasıdır.
* app.component.ts
Componentin kendi kod sayfasıdır.
* app.module.ts
Angular uygulamasının root modülüdür. src klasöründeki main.ts dosyasında başlangıç modülü olarak AppModule gösterilmektedir.


AppModule dosyasına baktığımızda oluşturduğumuz componentleri ve modülleri görebilmekteyiz. Angular mimarisi modüler yapılar üzerine yapılmıştır. Bu nedenle istediğimiz componentleri entegre edip kullanabiliriz.
assets
Proje ile ilgili tüm js,image,css dosyalar burada bulunmaktadır.
environments
Uygulamayı yayına alırken yada geliştirme aşamasında çalışacak konfigürasyon bilgileri bulunmaktadır. Örneğin geliştirici API ve yayına alındığında çalışacak API adresleri. environment.ts (Geliştirme ortamı için.), environment.prod.ts (Yayın ortamı için)
index.html
Ana geliştirme sayfasıdır. Sonraki makalelerde inceleyeceğimiz app-root etiketi bulunmaktadır.
main.ts

Uygulamanın startup dosyasıdır. Hangi modülün default olarak çalışacağından hangi konfigürasyon yapılarına göre nasıl compiler edileceğine kadar ayarlamaların yapıldığı bölümdür.
polyfills.ts
Uygulamanın farklı tarayıcılarda sorunsuz çalışması için gerekli importlar bulunmaktadır. Default tanımlı olarak yorum satırları ile importlar kapalı gelmektedir. Bu yorum satırlarını aççtığımızda proje diğer tarayıcılarda da çalışacaktır.
style.css
Global stil tanımlarını yapabileceğimiz stil dosyası.
.editorconfig
Editör ile ilgili temel ayarları yapılandırdığımız dosyadır.
angular.json
Uygulama ayarları ve third-party yüklenen javascript, css ya da kendi custom javascript ve ya css dosyalarını ekleyip kullanabilmemizi sağlayan bileşendir.
package.json

dependencies Uygulamanın yayınlandığında kullanılacak paket bilgilerini tutmaktadır.
devDependencies Uygulamanın geliştirme ve testlerinde kullanılacak paket bilgileri tutulmaktadır.
tsconfig.json
TypeScript konfigürasyon bilgilerini içermektedir.
Bir sonraki makalede görüşmek üzere.
0 Yorumlar
Yorumunuz için çok teşekkür ederim. En kısa zamanda geri dönüş yapacağım.