Skip to content

Latest commit

 

History

History

No 09 - ToDo App with Angular

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 

Angular ile Basit Bir Görevler Listesi Uygulaması Yazmak

Amacım Angular için basit bir Hello World uygulaması oluşturmak. Güncel Angular bilgim oldukça düşük olduğu için bu tip bir çalışma içerisine girdim diyebilirim. Platform olarak uzun zamandır olduğu gibi yine WestWorld (Ubuntu 18.04, 64bit) üzerinde çalıştım.

Uygulamayı çalıştırmak için aşağıdaki terminal komutunu vermemiz yeterlir.

ng server

Buna göre https://localhost:4200 adresinden çalışabiliriz.

Ön Gereklilikler

Makinede node ve npm yüklü durumda. Ayrıca Angular için Command Line Interface(CLI) aracına ihtiyaç var. Kurmak için gerekli terminal komutu ise şöyle.

sudo npm install -g @angular/cli

Ayrıca önyüz tarafında Bootstrap kullanılıyor. Onu da bower yardımıyla sisteme dahil edebiliriz.

bower i bootstrap

Ben bootstrap'i indirdikten sonra gerekli css dosyalarını assets/css altına alıp orayı referans göstermeyi tercih ettim. (index.html sayfasına bakın)

Angular Uygulamasını Oluşturmak

Angular uygulamasını hazır şablonundan üretmek oldukça kolay. Tek yapmamız gereken aşağıdaki terminal komunutunu çalıştırmak. new sonrası gelen parametre tahmin edileceği üzere uygulamamızın adı.

ng new life-pbi-app

Yapılan değişiklikler

ng new sonrası oluşan proje içerisinde çok fazla dosya var. Örneği sonradan bakınca anlayabilmek için sadece değişiklik yaptığım dosyaları aşağıdaki listeye ekledim.

  • index.html
  • app.component.html
  • app.component.ts (typescript tabanlı bileşenimiz)

Çalışma zamanı

Uygulamanın çalışma zamanına ait örnek bir görüntü.

credit_1.png

Neler Öğrendim?

  • Typescript ile HTML tarafındaki Angular yapılarının nasıl anlaştığını,
  • Bootstrap'i bir Angular projesinde nasıl kullanabileceğimi,