Angular Proje Yapısı

Angular’da bir proje oluşturduktan sonra, geliştirme yapabilmemiz için varsayılan ayarlarla birlikte gelen bir şablon bulunmaktadır. Bu, Angular’a özgü olmayan, bütün programlama dillerinde bulunan bir özelliktir. Çünkü projenin çalışabilmesi için minimum düzeyde ayarlanmış, çalışır durumda bir proje gelmektedir. Bu Angular şablonundaki bazı dosyalar çok kritik öneme sahiptir. Başlangıçta bu dosyaların her birinin ne işe yaradığını detaylı olarak bilmeden de projemizi geliştirmeye başlayabiliriz. Ancak proje ilerledikçe hata almaya başladığımızda kafamız karışabilir. Bu yüzden bu dosyaların projede nasıl kritik görevler üstlendiklerini bilmekte fayda vardır.

Öncelikle yeni bir proje oluşturalım. Projeyi oluşturmak istediğimiz klasörü komut satırında açalım ve aşağıdaki Angular CLI komutu ile projeyi oluşturalım.

ng new yeni-angular

Bu komutu çalıştırdığımızda Angular CLI, bize bir dizi soru soracak ve çıkan seçenekler arasından tercih yapmamızı sağlayarak proje alt yapısını oluşturacaktır.

İlk soru projenin stil yapısını soracaktır. CSS seçeneğini seçip devam ediyoruz.

İkinci soruda, sunucu taraflı statik bir web sitesi oluşturmak isteyip istemediğimizi soruyor. Angular 4. versiyonda SSR (Server-side Rendering) desteğini getirmiştir. Şimdilik sadece dinamik bir web projesi oluşturmak istediğimiz için bu soruda “Hayır” diyerek devam ediyoruz.

Daha sonra Angular CLI, projemizin ihtiyaç duyduğu bütün paketleri NPM ile indirmeye başlayacaktır.

İşlem bittikten sonra komut satırında aşağıdaki mesajı göreceksiniz. Aynı zamanda projemiz Git kaynak kontrolü içinde gerekli işlemler otomatik olarak oluşturulmuş olacaktır.

√ Packages installed successfully.
 Successfully initialized git.

Bulunduğumuz klasörün içinde, proje adında yeni bir klasör oluşturulmuş olacaktır. Projeyi doğru bir şekilde oluşturulduğunu görmek için, komut satırımızı proje adında oluşturulan klasöre giderek projeyi çalıştırmalıyız.

cd yeni-angular // projenin base kalsörüne gidilir
ng serve        // angular projesi çalıştırılır

“Would you like to share pseudonymous usage data about this project with the Angular Team?” tarzında bir uyarı alacaksınız. Veri işleme izni ile ilgilidir. Buna da “Evet” diyerek projemiz localhost:4200 portunda çalışmaya başlayacaktır. 4200 portu Angular projesi için varsayılan porttur. Farklı bir portta çalıştırmak istiyorsak "ng serve --port 1337" gibi bir komut ekleyebiliriz. Tarayıcıda localhost:4200 adresine gittiğinizde varsayılan Angular projesi karşınıza çıkacaktır.

Projemiz oluşturuldu ve çalışıyor. Şimdi projenin hazır gelen şablonuna bir göz atalım. Komut satırında aşağıdaki komutla projeyi VSCode editöründe açıyorum.

code .

VSCode açıldığında bizi şöyle bir ekran karşılıyor.

Proje dizininde hazır gelen bu dosyaların ne işe yaradığına tek tek bakalım.

.angular/cache:

Bu dosya Angular projelerinde varsayılan olarak gelir. Angular projesinin çalışırken önbelleğe aldığı verileri tutar. Bu dosyanın Git reposuna gönderilmesine gerek yoktur. Bunu sağlamak için .gitignore dosyasına ‘/.angular/cache’ satırı eklenmelidir.

.vscode:

Proje çalışma ortamının(workspace) VSCode ayarları ile ilgili bilgilerin tutulduğu dosyadır.

node_modules:

Çalışma ortamındaki bütün projelerin bağımlı olduğu NPM paketlerinin tutulduğu dosyadır. Bu dosya Git reposuna gönderilmez. Her geliştirici kendi sisteminde bunu indirir veya günceller.

editorconfig:

Kodun doğru formatta yazılabilmesi için editöre veya kod düzenleyiciye uygulanabilecek kuralları tutar.

gitignore:

Git reposuna göndermek istemediğimiz veya Git tarafından takip edilmesini istemediğimiz dosyaların Git’e bildirildiği ayar doyasıdır.

angular.json:

Angular çalışma alanının (workspace) temel düzeydeki yapılandırmasının varsayılan ayarlarını tutar. Bu dosyayı açtığınızda karşınıza birçok ayar çıkar. Örneğin, projenizi oluşturduğunuzda ‘projects’ bölümünde projenizi görebilirsiniz. Bütün bu ayarları burada tek tek açıklamayacağım. Angular.json dosyasındaki ayarları ayrıntılı bir şekilde açıklamayı başka bir yazıda düşünüyorum. Çünkü bu dosya, incelikli bir şekilde öğrenilmesi gereken bir ayar dosyasıdır.

package.json:

Adı üstünde, paket bilgilerinin tutulduğu dosyadır. Her proje için zorunlu bir dosyadır. Ayrıca, projenin adını, sürümünü ve NPM komutlarının script’lerini içerir.

package-lock.json:

NPM paket yöneticisi ile ‘node_modules’ klasörü içerisine indirilen paketlerin sürüm, path gibi bilgilerini tutar. Bağımlılıkları belirli bir versiyon numarasına kilitlemek için kullanılır. Böylece, ekip arkadaşlarının kullandığı paketlerin aynı kalmasını ve bu paketler arasındaki bağımlılıkların sabit kalmasını sağlar.

README.md:

Readme dosyası, proje hakkında bilgi vermek amacıyla kullanılan bir dosyadır. Projenin amacından, içerdiği paketlere ve hangi problemleri çözdüğüne kadar çeşitli bilgileri içerir. Uzantısı ‘.md’, Markdown anlamına gelir. Markdown, kendi formatı olan bir dildir.

tsconfig.json, tsconfig.app.json ve tsconfig.spec.json:

Angular uygulamaları TypeScript dili ile yazılır. TypeScript ile yazılan kodlar TypeScript derleyicisi (tsc) ile derlenir. Bu config dosyalarında, tsc derleyicisi için yapılandırmalar yapılmaktadır. Çalışma ortamında (workspace), eğer bir proje varsa ve bu projeye özel derleyici ayarları verilmek isteniyorsa ‘tsconfig.app.json’ dosyası kullanılır. Eğer çalışma ortamında birden fazla proje varsa, bu projelerin her biri için ayrı bir ‘tsconfig.app.json’ dosyası olacaktır. Ayrıca, ortak bir yapılandırma dosyası olan ‘tsconfig.json’ dosyası bulunur. Bu dosya, root dizininde yer alır ve genel ve ortak ayarları içerir. ‘tsconfig.app.json’ dosyası, ‘tsconfig.json’ dosyasını extend edebilir. Bunun için ‘tsconfig.app.json’ dosyasına aşağıdaki satır eklenmelidir.

{
  "extends": "./tsconfig.json", // extends
//...
}

Son olarak, ‘tsconfig.spec.json’ dosyası Angular projelerinde yazılan testlerin derleyici ayarlarının yapıldığı dosyadır. Örneğin, Angular’da Jasmine varsayılan olarak gelen bir test frameworküdür ve ‘tsconfig.spec.json’ dosyasında ‘types’ kısmında belirtilir.

src:

Src klasörü, Angular uygulamasının kalbidir diyebiliriz. İçinde projenin başlangıç sayfası, projenin kullandığı varlık dosyaları (ikonlar, görüntüler, svg’ler vb.), merkezi stil dosyası ile proje başlatıcısı olan ‘main.ts’ bulunmaktadır. Bundan sonra geliştirdiğimiz her parça bu klasörün içinde olacaktır. Eğer bu klasörde bulunan dosyalardan bahsetmemiz gerekiyorsa,

src/index.html:

Angular, SPA (Tek Sayfa Uygulaması) projeleri oluşturmamıza yardımcı olur. İşte Angular projesindeki bu tek sayfalık sayfa ‘index.html’dir. İçerisinde varsayılan bir HTML tanımı bulunmaktadır. Bu HTML tanımının body etiketinde <app-root></app-root> etiketlerini görebilirsiniz. Angular, bütün işlemlerini dinamik olarak bu <app-root></app-root> bileşeni üzerinden yapmaktadır. Buna başlangıç bileşeni denilmektedir.

src/style.css:

Angular projesindeki heryeri etkileyecek genel stillerin tanımlandığı dosyadır. Gloabal css dosyasıdır.

src/favicon.ico:

Angular projesinde tarayıcının sekme başlığındaki küçük ikonudur.

src/main.ts:

Angular projesinin başlatıcı dosyasıdır. İçerisinde ‘bootstrapApplication()’ adında başlatıcı bir fonksiyon bulunur. Bu fonksiyon iki parametre alır. Birinci parametre, uygulamayı hangi bileşenden başlatacağının bilgisini alırken, ikinci parametre ise hangi ayarlarla başlatılacağının bilgisini alır. Aşağıdaki örnekte ‘main.ts’ dosyasının içeriği bulunmaktadır. Kendi oluşturduğunuz projeyi incelediğinizde, ‘AppComponent’ ve ‘appConfig’ parametrelerini ‘src/app’ dizininde tanımlı olduğunu göreceksiniz.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

src/app klasörü:

Başlangıçta bu klasörde, projenin başlangıç bileşeni olan ‘app.component’, ‘app.config.ts’ ve ‘app.routes.ts’ dosyaları bulunur. Ancak ilerleyen zamanlarda, projenin içine geliştirdiğimiz Module, Component, Directive, Service, Pipe, Route ve Guard gibi tüm bileşenleri ekleyeceğimiz yer haline gelir. Angular varsayılan olarak başlangıç bileşenini ‘app.component’ olarak ayarlar. Ancak bu zorunlu değildir. Projeyi başka bir bileşenden başlatmak istiyorsak, bunu ‘main.ts’ dosyasındaki ‘bootstrapApplication()’ fonksiyonu aracılığıyla değiştirebiliriz. Bu tamamen projenin ihtiyaçlarına göre modüllere bölünebilir veya minimal bir şekilde devam edilebilir.

Bu yazıda, Angular uygulamasının nasıl oluşturulacağını ve oluşturulan yeni projede varsayılan olarak gelen şablonun içerdiği dosyaların ne işe yaradığını açıklamaya çalıştım. Angular.json dosyasının detaylarına inmedim çünkü bu dosya oldukça büyük ve önemli bir ayar dosyasıdır. Bu konuyu ele almayı planladığım başka bir makaleye bıraktım.

Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular

package-lock.json | npm Docs