Angular 4 – Örnek Bir Çalışma

Merhaba,

Angular 4 ile ilgili makale serimizde bilgi ve teknik açıdan olabilecek en zengin içerikleri oluşturmaya çalışmaktayım. Haliyle bu süreçte yapıları ve konuları ele aldıkça pratiksel açıdan da bir kaç senaryo ile bilgileri güçlendirmemiz gerekmektedir. İşte bu sebepten dolayı ben yaptığım bu işin bütünsel olarak tam teferruatlı bir şekilde ilerlemesine özen göstermekte ve bu kararlılıkla her makalede yeni konular işlemekle beraber yer yer örnek çalışmalar üzerine de yazılar kaleme almaktayım.

Şimdi bu içeriğimizde TypeScript nimetlerinden faydalanarak bir personel listeleme uygulaması gerçekleştireceğiz. Tabi bu uygulamada sıfırdan bir Angular 4 projesi oluşturarak hareket edeceğiz.

Ön Hazırlık

İlk olarak Angular 4 İçin Yeni Bir Proje Oluşturmak başlıklı makalede gösterdiğimiz gibi bir adet kendinize Angular 4 projesi oluşturunuz. Ardından proje üzerinde çalışabilmek ve çalışma sürecini seyredebilmek için Angular 4 – Oluşturulan Projeyi Visual Studio Code İle Açmak ve Yayına Almak başlıklı makalede izlediğimiz yolu takip ediniz. Tabi bu arada siz farklı bir editörde tercih edebilirsiniz ve bu durumda ilgili editöre uygun bir şekilde projeyi yükleyiniz. Tüm bu işlemlerden sonra projemizde senaryomuzu icra edebilmek için Angular CLI İle Component Oluşturma ve Kullanma başlıklı makalede ele alındığı gibi projeye “personel” isminde bir component ekleyiniz.

Personel Entity Oluşturma

İlk olarak bir personeli modelleyecek entity oluşturmakla işe başlayalım. Biraz önce oluşturduğumuz “personel” isimli component içerisine “entitys” isminde bir klasör açalım ve component içerisinde oluşturacağımız tüm entity sınıflarını bu klasörde tutalım. Neticede ilgili klasöre “personel.ts” isminde bir TypeScript dosyası oluşturalım ve içeriğini aşağıdaki gibi şekillendirelim.

export class Personel {
    PersonelNo: number;
    Adi: string;
    SoyAdi: string;
    Memleketi: string;
    DogumTarihi: Date;
    Departman: Departman;
}

export enum Departman {
    IK,
    BI,
    Yonetim,
    Muhasebe,
    Danisma,
    Reklam
}

Şimdi bu oluşturduğumuz “Personel” sınıfını kullanarak veri kaynağı oluşturacak farklı bir sınıf yaratalım.

Veri Kaynağı Oluşturma

“Personel” sınıfının tipinde bir veri kaynağı oluşturacağız. Yani bir dizi oluşturacağız. Haliyle bu işlevi yapacak sınıfı “personel” componenti içerisinde “personel-list.ts” isminde bir sınıf oluşturarak gerçekleştirebiliriz.

import { Personel, Departman } from "./entitys/personel";
export const PersonelListesi: Personel[] = [
    { Adi: "Gençay", SoyAdi: "Yıldız", Departman: Departman.BI, DogumTarihi: new Date(1992, 5, 9), Memleketi: "Artvin", PersonelNo: 1 },
    { Adi: "Mustafa", SoyAdi: "Çakmak", Departman: Departman.Danisma, DogumTarihi: new Date(1992, 2, 11), Memleketi: "Zonguldak", PersonelNo: 2 },
    { Adi: "Naci", SoyAdi: "Yıldız", Departman: Departman.Reklam, DogumTarihi: new Date(1965, 5, 9), Memleketi: "Artvin", PersonelNo: 3 },
    { Adi: "Fatih", SoyAdi: "Yıldız", Departman: Departman.Muhasebe, DogumTarihi: new Date(1985, 5, 19), Memleketi: "Artvin", PersonelNo: 4 },
    { Adi: "Gülşah", SoyAdi: "Yıldız", Departman: Departman.Yonetim, DogumTarihi: new Date(1985, 12, 29), Memleketi: "Artvin", PersonelNo: 5 },
    { Adi: "Meriç", SoyAdi: "Yoldaş", Departman: Departman.Danisma, DogumTarihi: new Date(1993, 7, 3), Memleketi: "İzmir", PersonelNo: 6 },
    { Adi: "Sabri", SoyAdi: "Şükrü", Departman: Departman.IK, DogumTarihi: new Date(1990, 1, 13), Memleketi: "Malatya", PersonelNo: 7 },
    { Adi: "Mehmet", SoyAdi: "Tokman", Departman: Departman.IK, DogumTarihi: new Date(1992, 3, 12), Memleketi: "Afyon", PersonelNo: 8 }
];

Veri Kaynağını Modülün Componentine Import Etme ve Çalışmayı Yayınlama

Şu an elimizde programatik olarak(TypeScript ile) ürettiğimiz “personel” entitymiz ve bu entityden oluşan bir veri kümemiz mevcuttur. Artık tek yapmamız gereken modülümüzün componentine gelip veri kümemizi import etmek ve ilgili veri kaynağına ait bir değişken oluşturup, modül componentinin .html kaynağına bu değişken ile veri kaynağımızı taşımak kalmıştır.

O halde “app.component.ts” dosyasını açınız ve içeriğine aşağıdaki gibi bir çalışma yapınız.

import { Component } from '@angular/core';
import { PersonelListesi } from "./personel/personel-list";
import { Personel } from './personel/entitys/personel';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  _PersonelListesi: Personel[];
  constructor() {
    this._PersonelListesi = PersonelListesi;
  }
}

Yukarıdaki kod bloğuna dikkat ederseniz eğer “Personel” tipinde “_PersonelListesi” isminde bir dizi değişkeni oluşturulmuştur ve modül componentinin constructer’ında bu değişkene import edilen “PersonelListesi” sınıfından gelen nesne atanmıştır.

Artık bu nesne üzerindeki verileri listelemek için “app.component.html” dosyasında aşağıdaki çalışmayı yapmamız yeterli olacaktır.

<table style="width:60%;">
  <thead>
    <tr>
      <th>Personel No</th>
      <th>Adı</th>
      <th>Soyadı</th>
      <th>Memleketi</th>
      <th>Doğum Tarihi</th>
      <th>Çalıştığı Departmanı</th>
    </tr>
  </thead>
  <tbody>
    <tr style="text-align:center;" *ngFor="let personel of _PersonelListesi">
      <td>{{personel.PersonelNo}}</td>
      <td>{{personel.Adi}}</td>
      <td>{{personel.SoyAdi}}</td>
      <td>{{personel.Memleketi}}</td>
      <td>{{personel.DogumTarihi | date}}</td>
      <td>{{personel.Departman}}</td>
    </tr>
  </tbody>
</table>

Projemizi kaydedip, yayınladığımızda aşağıdaki ekran görüntüsünde olduğu gibi bir sonuçla karşılaşmış olacağız.

Evet arkadaşlar. Bu tatbik amaçlı örnek çalışmadan sonra Angular 4 serimize farklı ve yeni içeriklerle devam edeceğiz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…