Angular Başlangıç Rehberi: Kurulum ve Temel Kavramlar
Yazar: Burak Balkı | Kategori: Cloud Computing | Okuma Süresi: 10 dk
Angular dünyasına profesyonel bir giriş yapın. Bu rehber, kurulumdan mimari yapıya, veri bağlamadan best practice'lere kadar tüm temel Angular kavramlarını k...
## Angular Nedir ve Neden Tercih Edilmelidir?
**Angular**, Google tarafından geliştirilen ve desteklenen, TypeScript tabanlı, açık kaynaklı bir web uygulama geliştirme platformudur. Modern web standartlarına uygun, ölçeklenebilir ve yüksek performanslı tek sayfa uygulamaları (Single Page Applications - SPA) oluşturmak için tasarlanmıştır. Kurumsal seviyedeki projelerde sağladığı katı yapısal düzen ve modüler mimari, büyük ekiplerin eşzamanlı çalışmasını kolaylaştırır.
Angular'ı diğer kütüphanelerden ayıran temel özellik, bir "framework" (çerçeve) olmasıdır. Yani, bir uygulama geliştirmek için gereken yönlendirme (routing), form yönetimi, HTTP istemcisi ve test araçları gibi tüm bileşenler kutudan çıktığı haliyle sunulur. Bu durum, geliştiricilerin üçüncü taraf kütüphanelere olan bağımlılığını azaltır ve projenin sürdürülebilirliğini artırır.
## Geliştirme Ortamının Hazırlanması ve Gereksinimler
Angular geliştirme sürecine başlamadan önce sisteminizde belirli araçların kurulu olması gerekmektedir. Angular, modern JavaScript ekosistemine dayandığı için **Node.js** ve **NPM** (Node Package Manager) temel gereksinimlerdir.
### 1. Node.js ve NPM Kurulumu
Angular'ın en son sürümlerini kullanabilmek için Node.js'in LTS (Long Term Support) sürümünü kullanmanız önerilir. Node.js yüklendiğinde NPM de otomatik olarak kurulacaktır.
### 2. Angular CLI Kurulumu
Angular Command Line Interface (CLI), proje oluşturma, bileşen ekleme ve test süreçlerini otomatize eden güçlü bir araçtır. Terminalinize aşağıdaki komutu yazarak global olarak kurabilirsiniz:
```bash
npm install -g @angular/cli
```
Kurulumun başarılı olduğunu doğrulamak için şu komutu kullanın:
```bash
ng version
```
## Angular CLI ile İlk Projenin Oluşturulması
Ortam hazırlandıktan sonra ilk projenizi oluşturmak oldukça basittir. Angular CLI, projenin temel iskeletini sizin için hazırlar.
```bash
ng new ilk-angular-projem
```
Bu komutu çalıştırdığınızda CLI size bazı sorular soracaktır:
- **Routing eklemek istiyor musunuz?**: Çok sayfalı bir yapı için 'Yes' demeniz önerilir.
- **Hangi stil formatını kullanacaksınız?**: Modern projeler için SCSS veya CSS seçebilirsiniz.
Proje oluşturulduktan sonra dizine girin ve uygulamayı başlatın:
```bash
cd ilk-angular-projem
ng serve --open
```
> **Not:** `--open` bayrağı, uygulamanın varsayılan tarayıcınızda (genellikle `http://localhost:4200`) otomatik olarak açılmasını sağlar.
## Angular Proje Yapısı ve Dosya Hiyerarşisi
Bir Angular projesi oluşturulduğunda karmaşık görünen bir dosya yapısı ile karşılaşırsınız. Ancak bu yapı, projenin ölçeklenebilirliği için kritik öneme sahiptir.
| Dosya/Klasör | Açıklama |
| :--- | :--- |
| `src/app` | Uygulamanın mantıksal bileşenlerinin ve modüllerinin bulunduğu yerdir. |
| `src/assets` | Görsel, ikon ve konfigürasyon dosyaları gibi statik varlıkları barındırır. |
| `angular.json` | CLI yapılandırması ve derleme ayarlarını içerir. |
| `package.json` | Bağımlılıkları ve scriptleri tanımlar. |
| `tsconfig.json` | TypeScript derleyici ayarlarını belirler. |
## Bileşen (Component) Mimarisi ve Yaşam Döngüsü
Angular uygulamaları, **Component** adı verilen küçük, yeniden kullanılabilir parçalardan oluşur. Bir bileşen; HTML şablonu, CSS stilleri ve TypeScript mantığından meydana gelir.
Yeni bir bileşen oluşturmak için:
```bash
ng generate component user-profile
```
Örnek bir bileşen sınıfı (TypeScript):
```typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-user-profile',
templateUrl: './user-profile.component.html',
styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {
userName: string = 'Ahmet Yılmaz';
constructor() { }
ngOnInit(): void {
console.log('Bileşen yüklendi.');
}
}
```
## Veri Bağlama (Data Binding) Teknikleri
Angular, bileşen sınıfı ile HTML şablonu arasındaki iletişimi yönetmek için dört farklı veri bağlama yöntemi sunar.
### 1. Interpolation (Ekleme)
TypeScript tarafındaki bir değişkeni HTML'de göstermek için kullanılır.
```html
![]()
```
### 3. Event Binding (Olay Bağlama)
Kullanıcı etkileşimlerini (tıklama, yazma vb.) yakalamak için kullanılır.
```html
```
### 4. Two-Way Data Binding (Çift Yönlü Bağlama)
Hem modeldeki değişikliğin HTML'e, hem de HTML'deki değişikliğin modele yansımasını sağlar. `FormsModule` gerektirir.
```html
```
## Direktifler (Directives) ile DOM Yönetimi
Direktifler, DOM öğelerinin davranışını veya görünümünü değiştiren talimatlardır.
### Yapısal Direktifler (*ngIf, *ngFor)
DOM yapısını değiştiren direktiflerdir.
```html
Merhaba {{ userName }}
``` ### 2. Property Binding (Özellik Bağlama) HTML elementlerinin özelliklerini dinamik olarak ayarlamak için kullanılır. ```htmlHoş geldiniz!
- {{ item.name }}
Durum Çubuğu
```
## Servisler ve Bağımlılık Enjeksiyonu (Dependency Injection)
Veri paylaşımı ve iş mantığını bileşenlerden ayırmak için **Services** kullanılır. Angular, servisleri yönetmek için gelişmiş bir Dependency Injection (DI) sistemi kullanır.
Bir servis oluşturma:
```bash
ng generate service data
```
Servis içeriği:
```typescript
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
getUsers() {
return [{ id: 1, name: 'Can' }, { id: 2, name: 'Ece' }];
}
}
```
Bileşende kullanımı:
```typescript
constructor(private dataService: DataService) {
this.users = this.dataService.getUsers();
}
```
## Angular Routing ve Navigasyon
Uygulama içindeki sayfalar arası geçişi yönetmek için `RouterModule` kullanılır. Rotalar genellikle `app-routing.module.ts` dosyasında tanımlanır.
```typescript
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
```
HTML tarafında yönlendirme:
```html