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.

Angular Proje Dosyaları
Angular Dosya Yapısı

e2e(End to end)

Birim testlerin yada diğer testlerin yapılandırma ile ilgili dosyaları içermektedir.

node_modules

node_modules
Node Modules

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

src

src
Environments

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

app

app
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.

app.module.ts
main.ts
main.ts
app.module.ts

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

main.ts
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

package.json
package.js

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.