Angular 4 Projesindeki app Klasörünü Detaylı Analiz Edelim

Merhaba,

Önceki Angular 4 – Proje Dosyalarını Tanıyalım başlıklı yazımda Angular 4 proje dosyalarının ne işe yaradığına değinmiştik. Amma velakin özellikle “app” klasörüne hususi bir değerlendirmede bulunacağımızdan dolayı konuyu ilgili makalede es geçmiştik. Şimdi gelin Angular 4 projesinin şah damarını teşkil eden “app” klasörünü, klasörden daha çok işlevselliğini inceleyelim.

“app” klasörü aşağıdaki ekran görüntüsünden de görebileceğiniz gibi “src” klasörü altında bulunan ve içerisinde component tarzı yapılar barındıran bir klasördür.

Şimdi hızlıca “app” klasörü içerisindeki dosyaları tanımlayalım ve ardından bizlere Angular 4’ü kavratacak rayı yavaş yavaş döşemeye başlayalım.

• app.component.css
  Componente özel css dosyasıdır.
• app.component.html
  Componentin html sayfasıdır.
• app.component.spec.ts
  Componentin Uniq Testi.
• app.component.ts
  İlgili componentin kendi dosyasıdır.
• app.module.ts
  Uygulamamızın root modülüdür.”src” klasörü içerisindeki “main.ts” dosyasının içeriğine göz atarsak eğer;

  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  if (environment.production) {
    enableProdMode();
  }
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
  

  gördüğünüz üzere “platformBrowserDynamic().bootstrapModule(AppModule)” komutunda başlangıç modülü olarak “AppModule” gösterilmiştir. İşte o “AppModule” bizim “app.module.ts” dosyamızın içerisinde oluşturulmuş root modüldür.

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

Angular 4 mimarisinde tüm temel modüler yapılar üzerine inşa edilmiştir. Haliyle bu modüllerde bizler tasarladığımız componentleri kullanacağız. Ama dikkat etmemiz gereken nokta tasarlanan componentlerin kullanılacağı modüllere import edilip deklerasyonu sağlanmalıdır.

Modül İncelemesi

Bir modülün modül olabilmesi için NgModule’den deklarasyon ediliyor olması gerekmektedir.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
//AppComponent buraya import ediliyor.

@NgModule({
  declarations: [
    AppComponent
//import edilen AppComponent nesnesinin modüle deklarasyonu sağlanıyor.
//declarations içerisinde genellikle kendi componentlerimizi tanımlarız.
//Yani bu uygulamada bulunan componentleri tanımlarız.
  ],
  imports: [
    BrowserModule
//Componentlerini ya da servislerini kullanmak istediğimiz dış
//componentler buradan modüle entegre edilir.
//Yukarıda görüldüğü üzere farklı componentler import edilmekte
//ve bu componentlerden BrowserModule bu modüle import edilmekte.
//Genellikle @angular'da tanımlı modülleri import ederiz.
  ],
  exports: [
//Projemiz üzerinden dışarıya hangi modüllerin açılmasını istiyorsak
//buraya ilgili componentleri verebiliriz.
  ],
  providers: [
//Uygulamamızda sürekli Singleton bir nesne tanımlamak istiyorsak
//burayı kullanırız.
  ]
  ,
  bootstrap: [
    AppComponent
//Bu modülün başlangıç komponentini belirttiğimiz alandır.
//Burada da görüldüğü üzere bu modülün başlangıç componenti
//AppComponent olarak ayarlanmıştır.
  ]
})
export class AppModule {
//export; bildiğiniz C#'ta ki public erişim belirleyicisine
//karşılık gelmektedir.
}

Component İncelemesi

Angular’da component bir HTML çıktısına hizmet eden class yapısıdır. Bir component oluşturmak istiyorsanız Component modülü tarafından gelen @Component deklarasyonuyla beslenmesi gerekmektedir.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Yukarıda görmüş olduğunuz gibi bir örnek component oluşturulmuştur. @Component içerisindeki parametrelere değinmemiz gerekirse eğer;
selector, bu componentin html içerisinde hangi etiketle çağrılacağını belirtmektedir. index.html dosyasına açıp bakarsak eğer;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>OrnekProje</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

“<app-root></app-root>” etiketlerine dikkat ediniz. Uygulama bu etiketler yerine “AppComponent” isimli componentin çıktısını basacaktır.

“Peki AppComponent isimli componentin çıktısı nerede?” diye sorarsanız eğer sıranın templateUrl parametresine geldiğini anlıyoruz. templateUrl, bu componentin html kaynağını tutmaktadır. “app.component.html” dosyası aşağıda da görüldüğü üzere html bir içerikten ibarettir.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="angular4.png">
</div>

Burada dikkat etmenizi istediğim husus component içerisindeki sınıfta tanımlanmış değişkenin html içerisinde {{ }}->(süslü parantez) ile ulaşılabilir olmasıdır. Buradan şöyle bir genellemeye varabiliriz. Component içerisinde tanımlanan değişkenler, propertyler, fonksiyonlar vs. hepsi html tarafından erişilebilirdirler. Ek olarak burada sadece title değişkeninin değeri yazdırıldığından dolayı “One Way DataBinding” gerçekleştiğini de bilmenizde fayda var.

styleUrls parametresi ise ilgili componentin kullanacağı özel bir style yapısı varsa o bilgiyi tutmaktadır.

Evet arkadaşlar. Bu yazımızda Angular 4 projesindeki “app” klasöründe olan yapılanmayı mantığıyla irdeleme çalıştık. Bu adımdan sonra sıra component oluşturmaya geldi. Ee haliyle bu konuyuda sonraki makaleye saklayalım artık…

O halde sonraki yazıda görüşmek üzere 🙂
İyi çalışmalar…