Angular ile Hello World

Merhabalar, bu yazımda Angular ile bir başlangıç projesi oluşturup, projenin genel yapısından bahsetmeye çalışacağım.

 

Öncelikle bilgisayarımıza yüklememiz gereken programları yükleyip başlayalım.

İlk olarak Node Package Manager kullanmamız için nodejs indirip yüklüyoruz. Buradaki bağlantıdan nodejs indirip bilgisayarımıza kuruyoruz. LTS versiyonunu tercih edebiliriz.

Nodejs yükledikten sonra bize Angular için pek çok kolaylık sunan Angular CLI (Command Line Interface) yüklememiz gerekiyor. Onun için terminalimizi açıp

npm install -g @angular/cli

yazıp Angular Cli paketini bilgisayarımıza yüklüyoruz.

Şimdi sıra yeni bir Angular projesi oluşturmaya geldi.

Terminale

ng new my-app

yazıp my-app adından bir proje oluşturuyoruz.

Oluşturduğumuz proje şu şekilde görünüyor.

Kısaca projedeki bileşenlerden bahsedecek olursam.

-e2e klasöründe Angular testleri ile ilgili dosyalar bulunuyor.

-node_modules klasörü projemizde kullanacağımız npm paketlerini içeriyor.

-package.json  ise projemizin genel config dosyası diyebiliriz.

-src klasöründe ise kodlarımız bulunuyor.

Şimdi sıra geldi projemizi çalıştırmaya, bunun için önce oluşturduğumuz my-app klasörüne giriyoruz ve projeyi başlatıyoruz. Terminale sırasıyla

cd my-app

ng serve

komutlarını yazıyoruz.

Yukarıda görüldüğü gibi projemiz başarılı bir şekilde çalıştı ve http://localhost:4200/ adresinden erişime hazır.

Belirtilen adrese gittiğimizde bu sayfayla karşılaşıyoruz ve projemiz sorunsuz bir şekilde çalışıyor. Şimdi biraz koda bakıp Hello World örneğimizi gerçekleştirelim. Örnekleri anlatırken Visual Studio Code kullanacağım.

src klasörünün altındaki app klasörüne girdiğimde aşağıdaki şekilde 5 dosya göreceğiz.

Kod üzerinde geliştirme yapacağımız kısım aslında burası. Burada bir componentin belirli parçaları bulunuyor.

-app.component.css: CSS kodlarımızı yazacağımız yer.

-app.component.html: HTML templatemizin kodlarının bulunacağı yer.

-app.component.spec.ts: Componentimiz ile ilgili testler burada bulunuyor.

-app.component.ts: Bir nevi iş katmanı diyebiliriz. Çoğu kodu buraya yazacağız.

-app.module.ts: Angular’daki component, pipe, directive gibi bileşenleri projeye tanımlamak için buraya yazmalıyız.

 

Şimdi Welcome To App yazısını Hello World olarak değiştirelim.

HTML dosyasına göz attığımızda Welcome to yazısının text olarak yazıldığını fakat title isminde bir değişken olduğunu görüyoruz.

Burdan şu anlaşılıyor ki, title isimli değişken component dosyamızda tanımlanmış ve ‘app’ değeri atanmış. Hemen bakalım.

Tam düşündüğümüz gibi. Şimdi ‘app’ yerine ‘Hello World’ yazalım ve HTML dosyasından ‘Welcome to’ yazısını silelim. Projeyi kaydedelim. Angular projede değişiklik olduğunu anlayıp sayfayı kendiliğinden yenileyecektir. Sonucun aşağıdaki şekilde olmasını bekliyoruz.

Evet sonunda Hello World’u gördük 🙂

Bu yazıda sıfırdan Angular projesi nasıl oluşturulur göstermeye çalıştım. Umarım faydalı olur.

İyi çalışmalar.

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: