Angular'a Başlangıç: İlk Uygulamamızı Oluşturma

Merhaba arkadaşlar, bu makalemizde uzun zamandır gündemde olan ve ben de artık ciddi anlamda kullandığım Angular'a bir giriş yapıyor olacağız. Web tarafında modern tek sayfa uygulama (SPA) geliştirmek isteyenler için Angular, Google'ın da arkasında durduğu oldukça olgun bir framework. Bu yazıda Angular nedir, neden kullanalım ve ilk uygulamamızı nasıl oluşturup çalıştırırız sorularına cevap arayacağız.

Angular Nedir?
Angular, TypeScript tabanlı, bileşen odaklı (component-based) bir front-end framework'üdür. İlk olarak 2016 yılında Google tarafından "AngularJS"in yeniden yazılmasıyla çıktı ve o günden bu yana sürekli güncellenerek bugünkü halini aldı. React veya Vue'den farklı olarak Angular, bize yönlendirme (routing), form yönetimi, HTTP istekleri, test altyapısı gibi bir projenin ihtiyaç duyacağı hemen her şeyi hazır paket olarak sunuyor. Yani "opinionated" bir yapısı var, belli kurallara göre ilerliyor ve büyük projelerde bu yapı bize çok zaman kazandırıyor.

Neden Angular Kullanalım?
- TypeScript ile güçlü tip desteği, büyük projelerde refactoring kolaylığı
- Component yapısı ile yeniden kullanılabilir arayüz bileşenleri
- Dependency Injection sayesinde temiz ve test edilebilir kod
- Google tarafından desteklenen ve kurumsal firmaların tercih ettiği geniş bir ekosistem
- Angular CLI ile çok hızlı proje kurulumu ve dosya üretimi

Node.js ve Angular CLI Kurulumu
Angular ile çalışmaya başlamak için önce Node.js'i bilgisayarımıza kurmamız gerekiyor. nodejs.org adresinden LTS versiyonunu indirip kurduktan sonra komut satırına aşağıdaki komutu yazarak kurulumu doğrulayalım:

node --version
npm --version

Herhangi bir versiyon numarası görüyorsak (örneğin v20.11.0 gibi) Node hazır demektir. Şimdi Angular CLI'yi global olarak kuralım:

npm install -g @angular/cli

IDE tarafinda: VS Code tarafinda Angular CLI ile olusturdugumuz projeyi acip terminalden 'ng serve' ile ayaga kaldiriyoruz. Localhost:4200'de sicak yeniden yukleme (HMR) devrede.

Kurulum birkaç dakika sürebilir. Sonrasında ng version komutuyla Angular CLI'nin kurulup kurulmadığını test edebiliriz.

İlk Projemizi Oluşturalım
Şimdi Angular CLI kullanarak ilk projemizi oluşturacağız. Proje oluşturmak istediğimiz klasöre gelip şu komutu çalıştırıyoruz:

ng new ilk-angular-uygulamam

CLI bize birkaç soru soracak. Routing eklemek istiyor muyuz (evet), hangi stil formatını kullanacağız (CSS, SCSS, SASS, LESS) gibi. Ben genelde SCSS seçiyorum, rahat çalışıyor. Bu sorulardan sonra CLI, node_modules klasörünü ve bütün Angular bağımlılıklarını indirip kuracak. Bu işlem internet hızınıza göre 2-5 dakika sürebilir.

Uygulamamızı Çalıştıralım
Proje klasörüne girip geliştirme sunucusunu başlatalım:

cd ilk-angular-uygulamam
ng serve --open

--open parametresi sayesinde tarayıcı otomatik açılacak ve http://localhost:4200 adresinde uygulamamızı göreceğiz. Güzel olan şey şu: ng serve canlı yenileme (live reload) ile çalışıyor. Yani bir dosyada değişiklik yaptığımız an, tarayıcı kendi kendine yenilenip yeni halini gösteriyor. Uygulama geliştirirken bu inanılmaz pratik.

Proje Yapısı
Oluşan klasörü bir inceleyelim:

- src/ → Uygulama kaynak kodumuzun bulunduğu klasör
- src/app/ → Component, modül ve servislerimizin olduğu klasör
- src/assets/ → Resim, font, statik dosyalar
- src/index.html → Tek olan HTML dosyamız (SPA olduğu için)
- src/main.ts → Uygulamanın giriş noktası
- angular.json → Angular CLI yapılandırma dosyası
- package.json → NPM bağımlılıkları ve script'ler
- tsconfig.json → TypeScript compiler ayarları

İlk uygulamamızın ana bileşeni src/app/app.component.ts dosyasında. Bu dosyayı açıp şöyle bir şey yapalım:

import { Component } from '@@angular/core';

@@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>{{ baslik }}</h1>
    <p>İlk Angular uygulamama hoş geldin!</p>
  `,
  styles: [`h1 { color: #d97706; }`]
})
export class AppComponent {
  baslik = 'Merhaba Angular!';
}

Kaydettiğimiz an tarayıcı kendi kendine yenilenecek ve yeni halini gösterecek. İşte bu kadar, ilk Angular uygulamamızı yapmış olduk.

Bu ilk makalede Angular'ın ne olduğunu, neden kullanılması gerektiğini ve boş bir proje oluşturmayı inceledik. Bir sonraki makalede Component yapısı ve bileşen üretmekle devam edeceğiz. Sorularınızı yorum olarak bırakabilirsiniz, herkese kolaylıklar...