Angular 14 ile Web Uygulamanızı Kolayca Oluşturun: Adım Adım Kurulum ve Kullanım Rehberi

Web geliştirme dünyasında Angular, güçlü ve modern bir framework olarak kendini kanıtlamış durumda. Özellikle dinamik ve kullanıcı etkileşimini artıran uygulamalar için tercih edilen Angular, büyük projelerde de rahatlıkla kullanılabiliyor. Peki ya Angular 14? Bu yazıda, Angular 14'ün sunduğu yenilikleri ve özellikleri keşfedecek, Angular 14'ü adım adım nasıl kuracağınızı ve kullanacağınızı öğreneceksiniz. Hadi, Angular dünyasına adım atmaya ne dersiniz?

Angular 14 Nedir ve Neden Kullanmalısınız?

Angular, Google tarafından geliştirilmiş ve sürekli olarak güncellenen bir JavaScript framework'üdür. 2025 itibariyle Angular 14, önceki sürümlerine kıyasla çok daha hızlı ve verimli bir deneyim sunuyor. Yeni özellikleri ve geliştirmeleriyle özellikle büyük projelerde performansı arttırıyor. Angular ile, modern tek sayfalık uygulamalar (SPA) geliştirmek oldukça kolay ve hızlı. Ayrıca TypeScript desteği sayesinde, kod yazarken daha güvenli ve hatasız bir ortamda çalışırsınız.

Adım Adım Angular 14 Kurulum Rehberi

Angular 14’ü kurmaya başlamadan önce, bilgisayarınızda birkaç yazılımın yüklü olması gerekiyor. Bu yazılımlar:

1. Node.js: Angular, Node.js üzerinde çalışır, bu yüzden Node.js'in en son sürümünü kurmanız önemlidir.
2. npm (Node Package Manager): npm, projelerde kullanacağınız paketlerin yönetilmesini sağlar. Node.js ile birlikte gelir.
3. Angular CLI (Command Line Interface): Angular projelerini komut satırından yönetmek için kullanılır.

İlk olarak, bilgisayarınızda Node.js yüklü olup olmadığını kontrol edin. Bunun için terminal veya komut satırına şu komutu yazın:

node -v

Eğer Node.js yüklü değilse, [Node.js'in resmi sitesinden](https://nodejs.org/en/) en son sürümü indirip yükleyebilirsiniz. Yükleme işlemi tamamlandığında, npm'in de yüklendiğini doğrulamak için şu komutu yazabilirsiniz:

npm -v

Eğer her şey yolunda giderse, artık Angular CLI'yı kurabiliriz. Angular CLI'yi kurmak için terminale şu komutu yazıyoruz:

npm install -g @angular/cli

Bu komut, Angular CLI’yı global olarak yükleyecektir. Kurulum tamamlandıktan sonra, Angular CLI’nın doğru şekilde yüklendiğinden emin olmak için aşağıdaki komutu çalıştırabilirsiniz:

ng version

Eğer doğru versiyon bilgilerini görüyorsanız, kurulum başarılı demektir!

Yeni Angular 14 Projesi Oluşturma

Şimdi, Angular 14 ile yeni bir proje oluşturalım. Proje oluşturmak için terminalde şu komutu yazıyoruz:

ng new my-angular-app

Burada, "my-angular-app" yerine kendi projenizin adını verebilirsiniz. Bu komut, Angular CLI tarafından yeni bir proje oluşturur ve size bazı temel seçenekler sunar. Eğer bu seçenekleri hızlıca geçmek isterseniz, sadece "Enter" tuşuna basabilirsiniz.

Proje oluşturulduktan sonra, proje klasörüne gitmek için şu komutu kullanın:

cd my-angular-app

Şimdi, Angular projemizi başlatabiliriz. Bunun için aşağıdaki komutu yazıyoruz:

ng serve

Bu komut, projenizi derler ve yerel sunucuda çalıştırır. Tarayıcınızda [http://localhost:4200](http://localhost:4200) adresine giderek uygulamanızı görebilirsiniz.

Angular 14 ile İlk Bileşeninizi Oluşturun

Angular projelerinde bileşenler (components), uygulamanın temel yapı taşlarıdır. Yeni bir bileşen oluşturmak için Angular CLI komutlarını kullanabilirsiniz. Örneğin, "about" adında bir bileşen oluşturmak için şu komutu yazabilirsiniz:

ng generate component about

Bu komut, `src/app/about` klasöründe gerekli dosyaları oluşturur. Ardından, `about.component.ts` dosyasını açarak bu bileşenin işlevselliğini tanımlayabilirsiniz.

Angular bileşenleri, genellikle şu dört dosyadan oluşur:

- about.component.ts: TypeScript dosyası, bileşenin mantığını içerir.
- about.component.html: HTML dosyası, bileşenin görsel yapısını tanımlar.
- about.component.css: CSS dosyası, bileşenin stilini düzenler.
- about.component.spec.ts: Test dosyası, bileşenin testlerini içerir.

Örnek olarak, basit bir "About" bileşeni şu şekilde görünebilir:

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

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.css']
})
export class AboutComponent {
  title = 'About Angular 14';
}

Ve `about.component.html` dosyasındaki basit içerik şu şekilde olabilir:

{{ title }}
Angular 14 ile uygulamalarınızı hızla geliştirebilirsiniz!

Angular 14'ün Yeni Özellikleri

Angular 14, birçok yeni özellik ve iyileştirme sunuyor. Bunlar arasında:

- Geliştirilmiş performans: Angular 14, önceki sürümlere kıyasla daha hızlı yükleniyor ve daha verimli çalışıyor.
- TypeScript 4.7 Desteği: Daha gelişmiş type-checking özellikleri ve hata ayıklama.
- Standalone Components (Bağımsız Bileşenler): Artık Angular bileşenleri, bağımsız olarak kullanılabilir hale geldi. Bu özellik, uygulamanızın yapısını sadeleştirmenize yardımcı olur.

Angular 14, aynı zamanda daha iyi hata raporlama ve hata ayıklama araçları ile birlikte geliyor, bu da geliştiricilerin projelerini daha hızlı bir şekilde geliştirmelerine olanak tanır.

Sonuç: Angular 14 ile Web Geliştirme Artık Daha Kolay!

Angular 14, web geliştirme konusunda birçok yenilik ve geliştirme sundu. Bu rehberde, Angular 14’ün kurulumu, proje oluşturma, bileşen ekleme gibi temel konuları inceledik. Artık siz de Angular 14 ile hızlıca projeler geliştirebilirsiniz. Kendi web uygulamalarınızı inşa etmek için Angular 14’ün gücünden faydalanın!