Angular 19 ve Spring Boot ile CRUD Uygulaması Kurulum Rehberi (2026)

Yeni Angular projeleri oluştururken dikkat edilmesi gereken en önemli nokta, frameworkün sürekli güncellenen yapısıdır. 2026 yılında Angular 19, geliştiricilere sunduğu yeniliklerle projeleri daha hafif ve yönetilebilir hale getiriyor. Bu rehberde, Spring Boot REST API ile bütünleşik çalışacak bir CRUD uygulaması kurulumunu adım adım ele alacağız. Projemizin adı Friends, yani arkadaşlarımızı yönetebileceğimiz basit bir liste uygulaması olacak.

Bu ilk bölümde, Angular 19 kullanarak temel proje yapısını oluşturacak ve Spring Boot ile entegrasyon için gerekli altyapıyı hazırlayacağız. İlerleyen bölümlerde ise veritabanı işlemleri, servis katmanı ve kullanıcı arayüzü geliştirme konularına değineceğiz. Hazırsanız, ilk adımları atmaya başlayalım.

Angular 19 Projesinin Kurulumu

Angular 19, standalone bileşenler ve fonksiyonel sağlayıcılar kullanarak projelere daha minimal bir yaklaşım sunuyor. Bu sayede AppModule gibi geleneksel Angular modüllerine ihtiyaç kalmıyor. Projemizi oluştururken aşağıdaki komutları kullanacağız:

npm install -g @angular/cli@latest
ng new friends-ui --routing --style=scss --ssr=false
cd friends-ui
ng serve --port 9002

Proje oluşturulduktan sonra, Angular'ın HTTP istekleri için gerekli olan HttpClient modülünü projemize entegre etmemiz gerekiyor. Bu işlemi main.ts dosyasında gerçekleştireceğiz:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

Ardından, uygulamanın kök bileşeni olan AppComponent’ı tanımlayalım. Bu bileşen, Angular 19’un standalone yapısına uygun olarak aşağıdaki şekilde oluşturulabilir:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

Projemizin geliştirme ortamı ayarlarını yaparken, API uç noktalarını tanımlamamız gerekiyor. Bu ayarları src/environments/environment.ts dosyasında gerçekleştirebiliriz:

export const environment = {
  production: false,
  apiUrl: '
};

Servis Katmanının Oluşturulması

Angular uygulamalarında veri işlemleri için genellikle bir servis katmanı kullanılır. Bu servis, HTTP isteklerini yöneterek frontend ve backend arasındaki iletişimi sağlar. Öncelikle, FriendService adıyla yeni bir servis oluşturalım:

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class FriendService {
  private http = inject(HttpClient);
  private base = environment.apiUrl;

  getAll() {
    return this.http.get<Friend[]>(this.base);
  }
}

Bu servis, uygulamanın farklı bölümlerinde yeniden kullanılabilir ve bağımsız bir şekilde yönetilebilir. Servisin içinde yer alan getAll() metodu, backend’den tüm arkadaşlarımızın listesini çekecek şekilde tasarlandı. İlerleyen bölümlerde bu servise yeni metodlar ekleyerek CRUD işlemlerini tamamlayacağız.

Spring Boot REST API’nin Hazırlanması

Backend tarafında kullanacağımız Spring Boot projesi, Web, JPA ve H2 bağımlılıklarını içermelidir. Bu bağımlılıklar projede REST API’lerin oluşturulması, veritabanı işlemleri ve yerel testler için gerekli altyapıyı sağlayacaktır. Projeyi aşağıdaki adımlarla oluşturabiliriz:

• FriendController.java — REST uç noktalarını tanımlayan controller sınıfı
• Friend.java — veritabanı entity’si
• FriendService.java — iş mantığını içeren servis sınıfı
• FriendRepository.java — JPA repository’si
• data.sql — varsayılan veri seed’leri

Proje ayarlarını application.properties dosyasında aşağıdaki gibi yapılandırabiliriz:

server.port=9001
spring.datasource.url=jdbc:h2:mem:friendsdb
spring.jpa.hibernate.ddl-auto=update

Bu yapılandırma sayesinde, Spring Boot uygulamamız 9001 portunda çalışacak ve H2 veritabanını bellekte oluşturacaktır. Veritabanı işlemleri için gerekli tablolar otomatik olarak oluşturulacaktır.

Sonraki Adımlar ve Hazırlık

Bu rehberde Angular 19 ve Spring Boot kullanarak temel bir CRUD uygulaması kurulumunu tamamladık. Şimdi sırada, uygulamamızın veri işlemlerini genişletmek ve kullanıcı arayüzünü geliştirmek var. Önümüzdeki bölümlerde aşağıdaki konuları ele alacağız:

• GET istekleriyle kayıtları listeleme
• POST istekleriyle yeni kayıt oluşturma
• Kayıt detaylarını görüntüleme
• PUT istekleriyle kayıtları güncelleme
• DELETE istekleriyle kayıtları silme

Her bir adımı tek tek uygulamaya entegre ederek, tamamen işlevsel bir arkadaş listesi uygulaması oluşturacağız. Uygulamanın tüm bölümlerini tamamladığınızda, Angular ve Spring Boot’un birlikte nasıl çalıştığını daha iyi anlayacak ve gelecekteki projelerinizde bu bilgileri kullanabileceksiniz.