Merhabalar arkadaşlar.

Günümüz yazılım dünyasında bana göre önemi ve popülerliği giderek artan bir JS framework’ü olan Angular’ın 6. versiyonunu kendimi geliştirmek ve ilerisi için yatırım yapmak adına öğrenmeye başladım. Bu yazı ile beraber de öğrendiklerimi sizlerle paylaşmaya başlayacağım.

Angular 6 Nedir?

Angular 6, Angular 2 ile birlikte gelen TypeScript yapısının devam ettirildiği bir Client Side MVC yazılımıdır.

Başlamak İçin Gereksinimler

İlk olarak bilgisayarımızda node ve npm‘in kurulu olması gerekmektedir arkadaşlar.

  • Mac OS X ortamında brew install node komutu ile kurulumları gerçekleştirebilirsiniz.
  • Linux tabanlı işletim sistemleri için ilgili paket yöneticinizin kurulumunu bulmanız gerekecektir.
  • Windows ortamı için ise https://nodejs.org/en/#download adresinden kurulum dosyasını indirip kurmanız yeterlidir.

Kurulumdan sonra Terminal’e/Komut Satırı’na node -v ve npm -v komutlarını girip aşağıdakine benzer çıktı alıyorsanız kurulum tamamlanmış demektir.

Node.js kurulumunun ardından Angular 6 tabanlı bir projeler oluşturabilmek için bilgisayarımıza Angular CLI’ın 6.x.x versiyon numaralı sürümünü kurmamız gerekecek. Bu yazıyı yazdığım gün itibari ile Angular 7’nin karalı sürümleri yayınlanmaya başlamıştı ve Angular 6’nın da son sürümü 6.2.8’di. Angular CLI’ın kurulumu için de terminalde/komut satırında npm install -g @angular/cli@6.2.8 yazıp çalıştırmamız gereklidir arkadaşlar.

Angular CLI’ın kurulumunun ardından doğru versiyonun düzgün şekilde kurulup kurulmadığını öğrenmek için de terminalde/komut satırında ng -v komutunu çalıştırarak kontrol edebilirsiniz. Aşağıdaki çıktıda görebileceğiniz gibi Angular CLI versiyonu 6.2.8 olarak gözükmekte.

Uygulamayı Çalıştıralım Ve Değişiklik Yapalım

Angular CLI kurulumunun ardından şimdi yeni bir Angular 6 projesi oluşturma adımına geçebiliriz.

  • ng new projectName -d komutu ile oluşturulacak projede hangi dosyaların yer alacağını listeleyebiliriz. Bu komut projeyi oluşturmayacak, sadece listeleme yapacaktır. Aşağıdaki ekran görüntüsünde bu komutun çıktısını göreceğiz.
  • ng new projectName –skip-tests komutu ile yukarıda oluşturulacak dosyaları listelettiğimizde görünen spec yani test için kullanılacak dosyaların oluşumunu şimdilik atlayabiliriz. Bu komut projeyi fiziksel dizinimizde oluşturacaktır.

ng new projectName -d komutunun çıktısı içerisinde görebileceğiniz gibi spec isimli dosyalar da mevcut ve onlar test için varlar:

ng new projectName –skip-tests komutunun çıktısı:

Projemiz başarı ile oluşturulduktan sonra cd komutu ile projemizin içine girelim ve projemizi çalıştırmak için ng serve –open ya da bu komuta karşılık gelen ng s -o komutunu terminalimizde çalıştıralım. Bu komuttaki ng Angular CLI kurulumundan komut, s komutu serve yani sunucu üstünde bu projeyi çalıştır, –open (o) komutu da projeyi tarayıcı üzerinde aç demektir.

ng s -o komutunun çıktısı:

Komut başarı ile çalıştığında localhost:4200 adresi üzerinde projemiz açılıyor.

Ben bu yazılar sırasında Angular kodlarını yazmak ve düzenlemek için Visual Studio Code kullanacağım. Siz de Visual Studio Code uygulamasında Open Folder diyerek az önce oluşturduğumuz Angular6Project klasörünü açabilirsiniz.

Projeyi Visual Studio Code üzerinde açtıktan sonra src klasörünün altında bir app klasörü göreceksiniz ve onun içinde de app.component.html adında bir dosya göreceksiniz. Bu dosya az önce localhost:4200 üzerinde projeyi çalıştırdığımızda gördüğümüz sayfadır arkadaşlar. Dosyayı açtığınızda hemen yukarıda şu kod parçacığını göreceksiniz:

  <h1>
    Welcome to {{ title }}!
  </h1>

Tarayıcımızda gördüğümüz Welcome to Angular6Project! satırı buradan gelmektedir. İki süslü parantezler arasındaki title ise Angular’ın ts dosylarından gelmektedir ve buna interpolation denmektedir. Şimdi buradaki Welcome to ifadesini Welcome my friend to olarak değiştirelim ve title olduğu gibi kalsın. Değişimden sonra sadece dosyayı kaydedelim ve tarayıcıyı kontrol edelim.

Gördüğümüz gibi sayfa kendiliğinden değişip yeniden yüklendi. Biz projeyi çalıştırdıktan sonra proje watch modda çalışıyor ve herhangi bir değişim olduğu anda yeniden derlenip yükleniyor, bizim dosyadaki değişiklikleri kaydetmekten başka yapmamız gereken bir şey yok.

Az önce bahsettiğim gibi title ifadesi ts dosyasından geliyor bu dosya da yine src/app altındaki app.component.ts dosyasıdır. Dosyayı açtığınızda export class AppComponent satırının hemen altında title parametresine Angular6Project değerinin atandığını göreceksiniz. Biz şimdi Angular6Project değerini Angular6Project Tutorial değeri ile değiştirip dosyayı kaydedelim.

Tarayıcıyı kontrol ettiğimizde yine yaptığımız değişikliğin direk yüklendiğini görmekteyiz.

Bu yazıda anlatacaklarım bu kadar arkadaşlar. Angular 6’ya giriş yapmış olduk. Bir sonraki yazıda görüşene kadar sağlıcakla kalın.