Yükleniyor...

Kurulum ve Yapılandırma

Kurulum ve yapılandırma, Angular projelerine başlarken yapılan ilk ve en kritik adımdır. Bu süreç, geliştirme ortamının hazırlanmasını, gerekli bağımlılıkların yüklenmesini ve Angular CLI aracılığıyla temel bir proje oluşturmayı kapsar. Doğru bir kurulum, komponentlerin, servislerin ve modüllerin sorunsuz çalışmasını sağlar ve projenin ilerleyen aşamalarında daha sürdürülebilir bir yapı oluşturur.
Kurulum ve yapılandırma, yeni bir Angular projesi başlatırken, komponent ve servis oluştururken ve proje yapısını planlarken kullanılır. Angular’ın temel kavramları arasında komponentler, durum yönetimi, veri akışı ve yaşam döngüsü yer alır. Komponentler, tekrar kullanılabilir kullanıcı arayüzü parçalarıdır. Durum yönetimi, komponent içindeki verilerin kontrolünü sağlar. Veri akışı, bileşenler arasında senkronizasyonu sağlar ve yaşam döngüsü, komponentin farklı aşamalarda özel işlemler yapmasına imkan tanır.
Bu eğitimde okuyucu, Angular CLI kullanarak bir proje oluşturmayı, temel komponentler geliştirmeyi ve komponent içi durumu yönetmeyi öğrenecektir. Bu beceriler, modern web uygulamaları ve SPA’lar için ölçeklenebilir ve reaktif uygulamalar geliştirmeyi mümkün kılar.

Temel Örnek

typescript
TYPESCRIPT Code 
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `       <h1>Angular Projesine Hoş Geldiniz!</h1>       <app-sayac></app-sayac>
`
})
export class AppComponent { }

@Component({
selector: 'app-sayac',
template: `       <p>Şu anki değer: {{ sayac }}</p>       <button (click)="arttir()">Artır</button>
`
})
export class SayacComponent {
sayac = 0;

arttir() {
this.sayac++;
}
}

Bu örnekte iki komponent tanımlanmıştır: AppComponent ve SayacComponent. AppComponent, uygulamanın ana komponenti olarak başlık ve SayacComponent’i gösterir. SayacComponent kendi durumunu, yani sayac değişkenini yönetir ve arttir metodu ile değerini günceller.
Butona tıklandığında, Angular’ın event binding özelliği kullanılarak arttir metodu çağrılır. Bu, veri bağlama (data binding) ile komponent durumu ve kullanıcı arayüzü arasında senkronizasyon sağlar. Komponentler tekrar kullanılabilir şekilde tasarlanmış, prop drilling engellenmiş ve kod temiz tutulmuştur.
Bu örnek, kurulum ve yapılandırma sırasında komponent oluşturma, durum yönetimi ve temel veri akışını gösterir.

Pratik Örnek

typescript
TYPESCRIPT Code 
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-kullanici-profil',
template: `       <h2>Kullanıcı Profili</h2>       <p>Ad: {{ kullanici.ad }}</p>       <p>Yaş: {{ kullanici.yas }}</p>       <button (click)="yasArtir()">Yaşını Artır</button>
`
})
export class KullaniciProfilComponent implements OnInit {
kullanici = { ad: 'Ahmet', yas: 30 };

ngOnInit() {
console.log('KullaniciProfilComponent başlatıldı');
}

yasArtir() {
this.kullanici.yas += 1;
}
}

KullaniciProfilComponent, daha gelişmiş bir örnek sunar. ngOnInit yaşam döngüsü metodu komponent başlatıldığında çalışır. kullanici nesnesi, komponentin yerel durumunu tutar ve yasArtir metodu ile güncellenir.
Bu örnek, veri akışı ve durum yönetimini gerçek bir senaryoda gösterir, prop drilling’i önler ve kullanıcı arayüzünü verimli şekilde günceller. Yaşam döngüsü hook’ları, belirli aşamalarda özel işlemler yapılmasını sağlayarak kodun güvenilir ve sürdürülebilir olmasına katkıda bulunur.

Angular için kurulum ve yapılandırmada en iyi uygulamalar ve yaygın hatalar:

  • Küçük ve tekrar kullanılabilir komponentler oluşturun.
  • Durumu komponent içinde veya paylaşılan servisler aracılığıyla yönetin.
  • Data binding kullanarak durum ve arayüzü senkronize edin.

  • ngOnInit ve ngOnDestroy gibi yaşam döngüsü hook’larını uygulayın.
    Yaygın hatalar:

  • Durumu birden fazla komponent arasında doğrudan geçirmek.

  • Gereksiz re-render işlemleri ile performansı düşürmek.

  • Durumu doğrudan güncellemek yerine kontrollü metodlar kullanmamak.
    Debug ve optimizasyon ipuçları:

  • Angular DevTools ile komponentleri inceleyin.

  • OnPush Change Detection kullanarak performansı artırın.
  • Durumu güncellemeden önce veri doğrulaması yapın.

📊 Referans Tablosu

Angular Element/Concept Description Usage Example
Component Tekrar kullanılabilir UI bloğu @Component({ selector: 'app-sayac', template: <p>{{sayac}}</p> })
Data Binding Durum ve template senkronizasyonu <p>{{ kullanici.ad }}</p>
Event Binding Kullanıcı aksiyonlarını metoda bağlar <button (click)="arttir()">+</button>
Lifecycle Hook Komponentin yaşam döngüsü aşamaları ngOnInit() { console.log('Başlatıldı'); }
State Management Komponent durumu yönetimi sayac = 0; arttir() { this.sayac++; }

Kurulum ve yapılandırma, Angular uygulamaları geliştirmek için temel bir adımdır. Bu süreç sayesinde projeler düzenli ve sürdürülebilir hale gelir, komponentler yeniden kullanılabilir ve durum yönetimi güvenli olur. İleri seviye konular olarak servisler, routing ve formlar önerilir. Küçük projeler üzerinde uygulama yaparak bu beceriler pekiştirilebilir ve Angular dokümantasyonu ile öğrenim devam ettirilebilir.

İlgili Arama Terimleri

Kullanıcılar bu içeriği bu terimlerle de araştırıyor:

Angular kurulum Angular yapılandırma Angular proje oluşturma Angular komponentler Angular durum yönetimi Angular veri bağlama Angular yaşam döngüsü SPA Angular geliştirme Angular CLI rehberi Angular performans optimizasyonu Angular OnPush Angular başlangıç rehberi Angular örnek proje Angular veri akışı Angular tekrar kullanılabilir komponentler

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Angular Ders