Angular Kurulumu ve İlk Proje: Ortamı Sıfırdan Hazırlamak

Kod Yazmadan Önce: Neye İhtiyacımız Var?

Bir marangozun ilk işi tahtayı kesmek değildir; önce tezgahını kurar, aletlerini bileyler, çalışma alanını hazırlar. Biz de öyle yapacağız. Angular yazmaya başlamadan önce üç şeye ihtiyacımız var: Node.js, npm ve Angular CLI. Bu yazıda üçünü de kuracak, ilk projemizi oluşturacak ve ortaya çıkan klasör yapısını karış karış gezeceğiz.

Endişelenme, hiçbirini ezberlemene gerek yok. Amaç, bir sonraki yazıda ilk component'imizi yazdığımızda "bu dosya da neyin nesiydi?" diye takılmaman.

Node.js Nedir ve Neden Lazım?

Angular tarayıcıda çalışan bir framework, peki neden bir sunucu teknolojisi olan Node.js'e ihtiyacımız var? Cevap şu: Node.js'i uygulamayı çalıştırmak için değil, geliştirmek için kullanıyoruz.

Şöyle düşün: yazdığın TypeScript kodunu tarayıcı doğrudan anlamaz, önce JavaScript'e çevrilmesi gerekir. Kodun paketlenmesi, sıkıştırılması, bir geliştirme sunucusunda ayağa kaldırılması gerekir. İşte bütün bu "arka mutfak" işlerini Node.js yapar. Node.js, geliştirme sürecinin mutfağıdır; yemek (uygulaman) sonunda tarayıcıda servis edilir ama pişirme işi bu mutfakta olur.

Node.js ile birlikte npm (Node Package Manager) de otomatik gelir. npm, projenin ihtiyaç duyduğu hazır paketleri indirip yöneten araçtır; Angular'ın kendisi de dahil, her şey npm üzerinden gelir.

Node.js Kurulumu ve Sürüm Meselesi

Node.js'i nodejs.org adresinden indirip kurabilirsin. Karşına iki seçenek çıkacak: LTS ve Current. Neredeyse her zaman LTS (Long Term Support) sürümünü seç. LTS, uzun süre desteklenen, kararlı sürümdür; Current ise en yeni ama daha az oturmuş sürümdür. Geliştirme ortamında istikrar, en yeniye sahip olmaktan daha kıymetlidir.

Kurulumdan sonra terminalini aç ve şu iki komutla kontrol et:

node -v
npm -v

Her ikisi de bir sürüm numarası döndürüyorsa (örneğin v20.11.0 gibi) kurulum başarılı demektir. Burada önemli bir not: Angular ile Node sürümü uyumlu olmalıdır. Her Angular sürümü belirli bir Node aralığı ister ve uyumsuz bir Node ile CLI sana uyarı verir. Bu yüzden güncel bir LTS sürümü kullanmak, çoğu baş ağrısını baştan önler.

Angular CLI: Serinin En Yakın Dostu

Angular CLI (Command Line Interface), Angular geliştirmenin İsviçre çakısıdır. Proje oluşturmak, component üretmek, uygulamayı çalıştırmak, build almak; hepsi tek bir komut satırı aracıyla yapılır. Onsuz da Angular yazılabilir ama kimse yapmaz; CLI olmadan Angular yazmak, çamaşırı elde yıkamak gibidir. Mümkün ama neden?

CLI'yi npm ile global olarak kuruyoruz. "Global" demek, bu aracın tek bir projeye değil, bilgisayarındaki her yere kurulması demek; böylece istediğin klasörde ng komutunu çalıştırabilirsin.

npm install -g @angular/cli

Bu komuttaki -g bayrağı "global" demek, @angular/cli ise kurduğumuz paketin adı. Kurulum bittiğinde şunu çalıştırarak kontrol et:

ng version

Karşına Angular'ın meşhur ASCII logosu ve sürüm bilgileri çıkıyorsa, tebrikler; artık Angular geliştirmeye hazırsın.

Küçük bir ipucu: Bizim serimiz Angular 12 temelinden başlıyor. Eğer belirli bir sürümü kurmak istersen, paket adının sonuna sürüm ekleyebilirsin: npm install -g @angular/cli@12. Ama takılıp kalma; kavramları öğrenmek için en güncel CLI da gayet iş görür, çünkü temel komutlar sürümler arasında neredeyse hiç değişmez.

İlk Projemizi Oluşturuyoruz

Sıra geldi büyünün başladığı yere. Terminalde, projelerini tutmak istediğin klasöre gir ve şu komutu çalıştır:

ng new ilk-uygulama

Burada ng new "yeni proje oluştur" komutu, ilk-uygulama ise proje adımız. CLI sana birkaç soru soracak. Genellikle şu ikisiyle karşılaşırsın: routing eklensin mi ve hangi stil formatı kullanılsın (CSS, SCSS vb.). Şimdilik routing için "no", stil için "CSS" diyebilirsin; ilerleyen yazılarda routing'i ayrıca ele alacağız.

Enter'a bastıktan sonra CLI arka planda bir sürü iş yapar: klasör yapısını kurar, gerekli tüm npm paketlerini indirir, git deposu başlatır. Bu işlem internet hızına göre birkaç dakika sürebilir. Bittiğinde, projeye girip uygulamayı ayağa kaldıralım:

cd ilk-uygulama
ng serve

Kısa bir derleme sonrası terminal sana bir adres verir, genellikle http://localhost:4200. Bu adresi tarayıcında açtığında Angular'ın hoş geldin sayfasını göreceksin. İlk Angular uygulaman çalışıyor; hem de tek bir satır kod yazmadan.

Peki Bu Klasörlerin Hepsi Ne?

Proje klasörünü bir kod editöründe (mesela VS Code) açtığında ilk tepkin muhtemelen "bu kadar dosya da ne?" olacak. Panik yok. Başta gözünü korkutan bu yapı, aslında son derece düzenlidir ve birkaç dosya dışında çoğuna aylarca dokunmayacaksın. Önemlileri gezelim.

src/ klasörü senin evindir. Yazdığın hemen her şey burada yaşar; geri kalan her şey bu klasörü desteklemek için vardır. İçindeki src/app/ ise uygulamanın kalbidir; component'lerin, service'lerin, kısaca kendi kodunun büyük kısmı buraya gelir.

src/main.ts uygulamanın giriş kapısıdır. Tarayıcı Angular uygulamasını çalıştırmaya buradan başlar; adeta bir kitabın ilk sayfasıdır. src/index.html ise tüm uygulamanın oturduğu tek HTML sayfasıdır. "Tek sayfa uygulaması" (single-page application) derken kastedilen tam olarak budur; işte o tek sayfa bu dosyadır. İçine baktığında neredeyse boş görünür çünkü içeriği Angular çalışma zamanında doldurur.

angular.json projenin ana ayar dosyasıdır; build ayarları, hangi stil dosyalarının dahil edileceği gibi yapılandırmalar buradadır. package.json ise projenin bağımlılık listesidir; hangi paketlerin hangi sürümlerine ihtiyaç duyduğun burada yazar. Bir projeyi başka bir bilgisayara taşıdığında, npm install komutu tam da bu dosyaya bakarak eksik paketleri indirir.

Bir de node_modules/ var; içine indirilen tüm paketlerin durduğu, devasa ve asla elle dokunmayacağın klasör. O kadar büyüktür ki genelde git'e bile eklenmez; zaten package.json sayesinde her an yeniden indirilebilir. Onu bir depo gibi düşün; malzemeler orada durur, sen sadece reçetene (package.json) bakarsın.

ng serve Çalışırken Arkada Ne Oluyor?

Bir detay daha, çünkü ilk günden görmen güzel olur. ng serve komutunu çalıştırıp uygulama açıkken, src/ içindeki herhangi bir dosyada değişiklik yapıp kaydettiğinde tarayıcı kendiliğinden yenilenir ve değişikliğini anında gösterir. Buna "hot reload" denir.

Bu, geliştirme hızını uçuran bir özelliktir. Bir yazı yazarken her cümleden sonra elle "kaydet ve önizle" yapmak yerine, yazdıkça sonucun anında yan ekranda belirmesi gibidir. CLI arka planda dosyalarını sürekli izler ve her değişiklikte gerekli kısmı yeniden derler. Sen sadece kod yazmaya odaklanırsın.

Küçük Bir Deneme

Kurulumu tamamladıysan, minik ama tatmin edici bir deneme yapalım; ilk kez kendi elinle bir şeyi değiştireceksin. src/app/ klasörüne git ve app.component.html dosyasını aç. İçinde CLI'nin oluşturduğu hoş geldin şablonu var. Hepsini sil ve yerine tek bir satır yaz:

<h1>Merhaba Mert, Angular yolculuğu başladı!</h1>

Dosyayı kaydet ve tarayıcına dön. ng serve hâlâ çalışıyorsa, sayfa kendiliğinden yenilenecek ve senin yazdığın başlık ekranda belirecek. Elle tarayıcıyı yenilemene bile gerek kalmadı; işte hot reload'u ilk kez kendi gözünle gördün.

Şimdi bir adım daha: aynı dosyada, başlığın altına ikinci bir satır ekle ve kendi adını yaz. Kaydet, ekranda belirmesini izle. Bu ufak an, aslında Angular geliştirmenin çekirdeğidir; sen kaynağı değiştirirsin, sonuç anında karşına gelir. Bir sonraki yazıda bu HTML'in aslında bir component tarafından yönetildiğini öğrenecek ve o sihirli yapıyı sıfırdan kendimiz kuracağız.