Merhabalar arkadaşlar.

Bu yazıda Angular 2 üzerinde kendi component’imizi oluşturmayı göreceğiz. Angular 2 Giriş yazımızda Angular 2’ye giriş yapmış, konfigürasyon dosyalarını öğrenmiş, Hello World uygulaması yapmıştık. Bu yazıda da kendi component’imizi yapıp uyglamanın başlatıldığı AppComponent’e ekleyecek ve ekranda göreceğiz.

angular2tutorials.component.ts

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

@Component({
    selector : 'angular2Tutorials',
    template : '<h2>Angular 2 Tutorials</h2>'
})

export class Angular2Tutorials{}

Yeni bir component oluşturacağımız zaman ilk olarak dosya ismini düzgün hazırlamamız gerekiyor. Angular 2 anladığım kadarı dosya isimlendirmelerinde bir zorunluluk getirmemiş ancak hangi dosyanın ne işe yaradığının net anlaşılabilmesi adına dosya adının peşine türünü de yazmak oldukça faydalı olacaktır. Temiz kod yaklaşımında kodun, dosyanın vs. ne iş yaptığının isminden anlaşılabilmesi iyi bir pratiktir. Bu örneğimizde biz bir Component dosyası hazıladığımız için dosyaAdi.component.ts şeklinde isimlendirme. Mesela ,ilerde göreceğiz, service işleri yapan kısımları barındıracak dosyalarımız olacak. O zamanda dosyaAdi.service.ts. bir isimlendirme yoluna gideceğiz.

angular2tutorials.component.ts dosyamızın içerisine adım adım bakalım:

• İlk olarak bir Component oluşturacağımız için Angular’ın kütüphanesinden Component‘i import ediyoruz.
• Akabinde @Component notasyonu ile bir Component tanımlayacağımızı söylüyoruz.
• @Component’in gövde kısmında ise selector özelliği ile bu Component’in diğer Component’ler ya da HTML dosyaları içinde nasıl çağırılabileceğini tanımlıyoruz. Bir nevi id bilgisi ataması gibi düşünülebilir.
• template özelliğinde ise Component’in çağırıldığında ekranda gözükecek şablonu tanımlıyoruz. Bu component için çağırıldığı zaman Angular 2 Tutorials metnini görmeyi bekliyoruz.
• Son olarak da export class Angular2Tutorials{} satırı ile bu Component’i diğer .ts dosyaları içinde çağırılmaya ve kullanılmaya hazır hale getiriyoruz.

app.component.ts

import { Component } from '@angular/core';
import {Angular2Tutorials} from './angular2tutorials.component';

@Component({
  selector: 'my-app',
  template: `<h1>Hello World</h1>
              <angular2Tutorials></angular2Tutorials>`,
  directives:[Angular2Tutorials]
})
export class AppComponent { }

Önceki yazıdan da hatırlayacağınız üzere uygulama başlatılırken (bootstrap) AppComponent ile başlatılıyordu. Biz de yeni component’lerimizi AppComponent içinden çağırmak sureti ile kullanabiliriz.

• app.component.ts dosyamız içerisinde ilk olarak az önce kullanıma hazır hale getirdiğimiz Angular2Tutorials’ı import ederek başlıyoruz.
• Akabinde Component’in tanımlandığı @Component notasyonunun gövde kısmında, template özelliğinde Angular2Tutorials içerisinde tanımladığımız selector özelliğini HTML tag’i kullanır gibi kullanıyoruz. Bildiğimiz gibi HTML’de etiketleri kullanırken etiket açma-kapama şeklinde kullanıyoruz. Burada da aynı şekilde angular2Tutorials ifadesi ile HTML tag’i açıp kapatıyoruz.
• Burada dikkat edilmesi gereken bir nokta mevcut. Hello World yazısı içerisinde template kısmı tek tırnaklar yani ’ ‘ arasına yazılıp kullanılmıştı. Fakat burada dikkat ederseniz eğik tırnaklar yani arasında. Angular 2’de kendi oluşturdumuz Component’leri çağıracağımız zaman bu şekilde bir yazım şekli kullanmamız gerekiyor.
• Template kısmında kendi oluşturduğumuz bir Component’i çağıracağımız zaman bir de export edilen class’ı directives özelliği ile tanıtmamız gerekiyor. AppComponent, template içindeki tag’i bu sayede tanıyor.

Hali hazırda npm start komutu verilmiş durumda ise bir şey yapmamıza lüzum yok. Bu dosyalar otomatik derlenip yüklenecek ve tarayıcıda hemen görebileceğiz. Komut verilmemiş durumda ise npm start diyelim ve projemiz açılsın.

Proje açıldığında gördüğümüz gibi yeni oluşturduğumuz Component’imiz de sayfamızda yer alıyor. Sayfanın kodunu incelediğimizde de my-app component’imizin içerisinde angular2Tutorials component’imizi görüyoruz.

Bu yazıda anlatacaklarım bu kadar arkadaşlar. Yeni bir Component oluşturmayı ve kullanmayı görmüş olduk. Gelecek yazıda görüşmek üzere.

Görüşene kadar sağlıcakla kalın.

Selam ve Sevgilerimle