Angular CLI İle Component Oluşturma ve Kullanma

Merhaba,

Bu içeriğimizde Angular CLI ile component oluşturmayı tam teferruatıyla irdeleyeceğiz.

Bu işlem için Angular 4 çalışmasına eşlik eden Visual Studio Code editörünün Terminal özelliğini kullanacağız.

Bu özelliği Visual Studio Code editörürümüz üzerinden “View” -> “Integrated Terminal” kombinasyonunu takip ederek açabilirsiniz.

Bu işlemden sonra editörümüzün alt kısmına terminal penceresi açılacaktır.

Terminal penceresi bizim komut penceresinde yaptığımız tüm işlemleri Visual Studio Code editörümüz üzerinden yapmamızı sağlayan editöre entegre mini bir komut penceresidir.

Angular CLI ile Component Oluşturma

Şimdi bu pencereyi kullanarak projemizde component oluşturalım.
Component oluşturmak için aşağıdaki kod yapısından yararlanacağız.

 ng g component [Component Adı]

ya da

 ng generate component [Component Adı]

Örneğin; ben “profil” isminde bir component oluşturmak istiyorum.

Componenti generate ettikten sonra “app” klasörümüze “profil” adında bir klasör oluşturulmuş ve içerisine componentle ilgili dosyalar eklenmiştir.

Peki biz bu componenti eklediğimizde arkaplanda neler gerçekleşiyor? inceleyelim.

Component ana modülümüzün barındırıldığı “app.module.ts” dosyasına import edilecek ve NgModule içerisine deklare edilecektir.

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

import { AppComponent } from './app.component';
import { ProfilComponent } from './profil/profil.component';

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

Gördüğünüz gibi ana modülümüze “ProfilComponent” adında componentimiz ‘./profil/profil.component’ yolundan import edilmiştir ve bu tip NgModule içerisinde deklare edilmiştir.

Dikkat ederseniz biz component oluştururken “profil” adını vermiştik. Angular CLI verdiğimiz component adını otomatik biçimlendirerek, verdiğimiz adın baş harfi büyük olacak şekilde ve sonuna ‘Component’ etiketini ekleyerek componenti oluşturmuştur.

“Peki oluşturulan component ne alemde?” diye sorabilirsiniz. Haydi gelin birde componentimize göz atalım.

Componentimiz “profil.component.ts” dosyasında oluşturulmuştur.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-profil',
  templateUrl: './profil.component.html',
  styleUrls: ['./profil.component.css']
})
export class ProfilComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

Burada dikkat ederseniz oluşturduğumuz component içerisine ‘@angular/core’ içerisinden “Component” ve “OnInit” paketleri import edilmiştir.
Componentimizin class yapısına bakarsak eğer “OnInit” sınıfından implement edilmiştir. Burada OnInit bir page load mantığında çalışan eventtır diyebiliriz. Yani Angular projesinin life cycle sürecindeki load eventıdır.
Ayrıca oluşturduğumuz componentin ‘selector’ özelliği “app-profil” olarak atanmıştır. Bu selector değeri sayesinde ilgili componenti istediğimiz alanda kullanabileceğiz.

Oluşturulan Componentin Kullanımı

Oluşturduğumuz componentin selector özelliğine atanan değeri alıp uygulamamızın ana modülüne bağlı başlangıç componenti olarak ayarlanmış componentin .html uzantılı dosyası içerisinde herhangi bir alana kopyalamamız yeterlidir.

Ana modülde hangi componentin başlangıç componenti olduğunu anlamak için modülün “app.module.ts” dosyasına gelerek NgModule metodu içerisindeki “bootstrap: [AppComponent]” parametresine bakmamız yeterlidir. Hatırlarsanız şu yazımızda “bootstrap” özelliğiyle ilgili modülün başlangıç componentini belirler şeklinde ifade de bulunmuştuk.

Şimdi ben oluşturmuş olduğum “ProfilComponent” isimli componentin selector özelliğini alıp başlangıç componenti olan “AppComponent” isimli componentin html kaynağı olan “app.component.html” dosyasına ekliyorum.

<app-profil></app-profil>

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

Tabi burada profil componentinin html içeriğinde ne olduğu önemli değil. O yüzden oraya değinmeden es geçiyorum.

Gördüğünüz gibi oluşturduğumuz componenti bu şekilde çalıştırmış oluyoruz.

Sonraki dersimizde Angular’da ileriye gidebilmemiz için kullanacağımız TypeScript üzerine konuşuyor olacağız. Bu şekilde adım adım bütüne varacağız.

O halde görüşmek üzere diyorum…
İyi çalışmalar…