Angular Component Nedir?

Angular Eğitim Serisine “Angular Component Nedir?” konulu yazısı ile devam edeceğim. Bir önceki yazımda “Angular Proje Kurulumu ve Mimarisi” konulu yazıyı paylaştım ve Angular ilk projeyi oluşturma, directory yapısı, projeyi debug etme gibi konuları alt konuları anlattım.

Bu yazımda ise projelerimizde bol bol kullanacağımız component yapısından, component-template ilişkisinden, component decorator’dan bahsedeceğim. Ayrıca, Angular CLI ile komutlar ile component oluşturmayı göstereceğim.

Angular Eğitim Seti ile alakalı yazıların tamamına buradan ulaşabilirsiniz.

Angular Component

Angular, component-based devlopment yaklaşımını ile kod geliştirmenizi sağlayan bir framework’dür. Son kullanıcının etkileşime geçeceği .html uzantılı dosyalar aslında ‘n’ sayıda component’in templatelerinin birleşiminden meydana gelir. Bu yüzden Angular’da geliştirmenin büyük bir kısmı Component’ler üzerinde yapılır. Bu mantıktan yola çıkarak zaten geliştireceğimiz SPA(Single Page Application) uygulamasının da run olacağı bir root component olması gerektiği ortaya kendiliğinden çıkıyor. Önceki yazımızda Angular2+ bir projenin dosya yapısından bahsettim. Angular CLI ile oluşturduğumuz bir projenin src>app dizini altındaki app.component varsayılan olarak Angular tarafından oluşturulan root component’idir ve main.ts dosyasında referansı vardır.

Main.ts dosyasının içeriği;

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.error(err));

Şimdi custom componentimizi oluşturalım. Terminalden aşağıdaki komut ile CLI’ya app klasörü altında components klasörü içine “new-component” adında bir component bileşeni ekle diyoruz.

ng g component components/new-component

Terminalde komut çalıştıktan sonra dizine eklenen dosyalar;

• new-component.component.html – Component’e ait template dosyası
• new-component.component.spec.ts – Component test birimi
• new-component.component.ts – Component back-end kod geliştireceğimiz dosya
• new-component.component.scss – Component’e ait style dosyası

App.module.ts içinde olan değişiklikler;

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewComponentComponent } from './components/new-component/new-component.component';

@NgModule({
  declarations: [
    AppComponent,
    NewComponentComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular CLI component dosyalarını oluşturdu ve uygulama içerisinde kullanabilmemiz için AppModule içine dahil etti.

Angular Component Decorator

Bir nesnenin component özelliği taşıyabilmesi için üstüne @Component decorator’ü eklenmelidir. Bu decorator sayesinde meta-datalarını da tanımlayabiliriz.

@Component({
  selector: 'app-new-component',
  templateUrl: './new-component.component.html',
  styleUrls: ['./new-component.component.scss']
})
export class NewComponentComponent implements OnInit {

@Component Decorator ile en çok kullanılan opsiyonlar;

 selector : Angular’a template HTML içinde bu değişkene karşılık gelen etiketi bulduğu her yerde bu component’in bir örneğini oluşturmasını ve render etmesini söyleyen CSS seçicidir. Yani, yukarıdaki resimde selector : app-new-component olduğu için HTML  <app-new-component></app-new-component> içeriyorsa, Angular bu tag içine NewComponent’in html template’ini render edecektir.

templateUrl : Bu özellik ile Component’e karşılık gelen html şablonunu tanımlıyoruz. Angular CLI component’i oluştururken bizim için new-component.component.html dosyasını oluşturarak @Component decorator içindeki templateUrl özelliğine bu dosyanın yolunu atadı.

styleUrls : Bu da templateUrl özelliğine benzer bir özellik aslında. Bu component için oluşturduğumuz html üzerinde kullanacağımız css’lerin dosya yolunu styleUrls değişkenine verdiğimizde Angular bizim için onları derleyip runtime’da sadece bu html’de kullanmak üzere izole edecektir. Angular CLI component’i oluştururken yine bizim için bu component’e ait bir style dosyası oluşturup @Component decorator içindeki styleUrls’e karşılık gelen diziye atadı.

Component Render

Şimdi selector nasıl çalışıyor test edelim;

Oluşturduğumuz componentin selector değeri “app-new-component” olduğu için <app-new-component></app-new-component> tag’lerini yerleştirdiğimiz yerde componentimizin HTML ve CSS dosyalarının render olmasını bekliyoruz.

new-component.component.html dosyasının içeriği;

<p>
  new-component works!
</p>

new-component.component.scss dosyasının içeriği;

p{
    font-size: 40px;
    text-align: center;
    padding: 10px;
    background-color:red;
}

Component’in render olması için “app.component.html” dosyasında <app-new-component></app-new-component> tag’lerini ekliyorum. Dikkat ederseniz bu tag i aşağıdaki html kodunda 2 kere kullandım. Bu sayede componentin kod tekrarını engelleyerek nasıl okunaklı bir hale getirdiğini daha iyi anlayabilirsiniz.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<router-outlet>
  <app-new-component></app-new-component>
  <app-new-component></app-new-component>
</router-outlet>

Sonuç;

Daha sonraki yazılarımda binding konusuna detaylıca gireceğim fakat component’lere ait .ts uzantılı dosyaların önyüz ile nasıl etkileşime geçtiği ile alakalı, back-end tarafında nasıl kod yazacağımızı daha iyi anlatabilmek için bir örnek paylaşmak istiyorum. “.ts” uzantılı dosyada tanımladığımız bir değişkeni .html üzerinde gösterebilmek için NewComponentComponent class’ını aşağıdaki gibi güncelliyorum.

export class NewComponentComponent implements OnInit {

  message = "My First Component!!!";

  constructor() { }

  ngOnInit() {
  }

}

Html dosyasını ise;

<p>
  {{message}}
</p>

gibi güncelliyorum ve Sonuç;

Dediğim gibi daha sonraki makalelerimde one-way, two-way binding konularını derinlemesine anlatacağım.

Özet

Bu yazıda; Mobilhanem üzerinde yayımlamaya başladığımız Angular Eğitim Seti yazı serisinden Angular Component yapısı hakkında bilgiler verdik. CLI ile component oluşturduk, html içinde nasıl render edileceği, basit anlamda nasıl değişken tanımlanır ve view katmanında gösterilir ile alakalı örnekler paylaştık.

Eğer bir önceki Angular Proje Kurulumu ve Mimarisi konulu yazımı okumadıysanız konu bütünlüğü açısından okumanızı tavsiye ederim.

Bir sonraki yazıda görüşmek üzere…

Yararlı Linkler

https://angular.io/guide/architecture-components