İlk Angular Projesi ve Angular Tanımlamaları

Merhaba arkadaşlar.

Bugün Angular ile ilk projemizi yapacağız. Basit bi uygulama olacak. Ama Angular yapısını öğrenmek için güzel bi örnek olduğunu düşünüyorum.

Daha fazla uzatmadan projeye geçelim. Angular'da bir sınıfta tuttuğumuz öğrencileri ekranda listelemek istiyoruz. Şimdi ilk olarak bi component oluşturmamız gerekiyor. Bu component'i terminal ekranından ekleyeceğiz. VS Code içinde terminal ekranını açmak için  View --> Integrated Terminal menüsüne gidin. Aşağıdaki komutu yazın.

"  ng g component student  "

Dikkat ettiyseniz component oluştuktan sonra app klasörünün altına geldi. Şimdi biz student klasörünün üzerine sağ tıklayıp iki adet yeni dosya oluşturucaz. İlk dosyamız "student.ts" olacak.

*  export --> Nesne yönelimli programlama dillerinde olan public'le aynıdır.

*  Angular'da int,double,float vb. gibi tanımlamalar yerine direk number yazılır.

İkinci dosyamız ise " student-list.ts " olacak.

Sanırım açıklamaya gerek yok. Öğrenci ekliyoruz. Sırada component'i oluştururken gelen " student.component.ts " isimli dosyaya.

Burası bizim HTML içinde işlemler yapabilmemiz için olanak sağlayan component sınıfımız. Dikkat etmeniz gereken kısım constructor'un hemen üzerinde bir değişken tanımlamışım ve bu değişkene ctor içinde StudentList'i atamışım.

Şimdi HTML kodumuza gelelim.

 *  ngFor kısmı --> bildimiz foreach döngüsü. student.component.ts içerisinde student değişkeni tanımlamıştık. Burada o değişkenin içinde dönüyoruz.

*  {{ "" }} --> HTML içerisinde değişkenlerle ya da sınıflarla alakalı işlemlerde bu Angular Expressions kullanılır.

Yaptıklarımızın ekranda görünmesi için student.component.ts içerisinde "selector" isimli değişkenin değerini alıp app.component.html içerisine aşağıdaki şekilde yazalım.

<app-student></app-student>

Her şey yolunda gitmişse aşağıdaki gibi bir ekran görmeniz gerekiyor. 

Bir sonraki yazıda Angular'da notification yazacağız. İyi çalışmalar..