Merhabalar arkadaşlar. Bu yazıla ile birlikte Angular 7 öğrenmeye başlıyoruz.

Angular’ın ne olduğu ile ilgili daha önce http://ilkaygunel.com/blog/2017/angular-2-lesson-1/ adresindeki yazımda bahsetmiştim, burada tekrar yazmıyacağım, ilgilenen arkadaşların orayı okumalarını tavsiye ederim.

Angular 7 geliştirebilmek için bilgisayarımızda node.js kurulu olmalıdır arkadaşlar. Windows işletim sisteminde kurulum dosyasını indirip kurarak, Mac OS ve Linux tabanlı işletim sistemlerinde ise paket yöneticiniz aracılığı ile kurumulumu gerçekleştirmelisiniz. Kurulumdan emin olmak için npm -v ve node -v komutlarını çalıştırabilirsiniz. Benim bilgisayarımda npm için 6.4.1, node için 10.15.1 versiyonları kurulu.

node.js kurulumunun ardından bilgisayarımıza Angular CLI kurmamız gerekecek arkadaşlar. Komut satırı/terminal üzerinde iken npm install -g @angular/cli komutunu çalıştırdığımızda npm’den bizim için en güncel olan Angular CLI sürümü çekilip kurulacak. Bu yazıyı yazdığım gün itibari ile 7.3.6 sürümü en güncel sürüm. Eğer bilgisayarınızda 7.3.6 altında bir Angular CLI kurulu ise şu komutlar ile Angular CLI’ın güncel sürümüne geçebilirsiniz:

npm uninstall -g angular-cli
npm cache verify 
npm install -g @angular/cli@latest

Angular CLI kurulumunu ya da güncellemesini yaptıktan sonra şimdi ilk projemizi oluşturabiliriz.

Komut satırımızı/terminalimizi açalım ve ilk projemizi oluşturmak için şu komutu çalıştıralım, ben C diskinin altında AngularTutorials adında bir klasör oluşturdum, yazılardaki kodlar için orayı kullanacağım:

ng new hello-world

Komut satırında size Routing ve CSS ile ilgili 2 soru sorulacak, y/N sorusuna y deyip, ikinci seçenekte de Enter’a basıp geçebilirsiniz arkadaşlar. Benim komut satırı çıktım şöyle:

Şimdi komut satırı üzerinden oluşturmuş olduğumuz hello-world klasörüne cd komutu ile geçelim ve şu komutu çalıştıralım:

ng s -o

Bu komut bizim için oluşturduğumuz hello-world projesini derleyecek ve http://localhost:4200/ adresi üzerinde çalıştıracak.

Şimdi bir değişiklik yapalım bu proje üzerinde. Oluşturduğumuz hello-world projesini herhangi bir IDE ya da Code Editor üzerinde açalım. Ben Visual Studio Code kullanıyorum bu iş için. Projeyi açtıktan sonra app klasörü altında app.component.html dosyasını göreceksiniz. Bu dosyayı açalım ve Welcome to {{title}}! yazısını {{title}} Projesine Hoşgeldiniz! ile değiştirelim. Değişikliği yapıp dosyayı kaydettiğimizde değişiklik anında uygulanacaktır. Tarayıcıya döndüğümüzde uygulandığını göreceğiz:

Bu yazıda anlatacaklarım bu kadar arkadaşlar. Bu yazıda

  • Angular CLI 7 kurulumunu yaptık,
  • İlk projemizi oluşturup çalıştırdık,
  • Bir değişiklik yapıp değişikliğin hemen uygulandığını gördük.

Gelecek yazıda Componenets konusunu öğreneceğiz. Görüşene kadar sağlıcakla kalın.