Angular Notları ve İpuçları

İçindekiler

Bileşenler
Şablonlar
Direktifler
Borular
Servisler
Bağımlılık Enjeksiyonu
Yönlendirme
Formlar
HTTP İstemcisi
Gözlemlenebilirler
Modüller
Yaşam Döngüsü Kancaları
Değişiklik Algılama
Dekoratörler
Angular CLI
Test Etme
Animasyonlar
Güvenlik

Bileşenler

Temel Bileşen

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

@Component({
  selector: 'app-merhaba',
  template: '<h1>Merhaba, {{isim}}!</h1>',
  styles: ['h1 { font-weight: normal; }']
})
export class MerhabaComponent {
  isim: string = 'Angular';
}

Girdi ve Çıktı ile Bileşen

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-cocuk',
  template: `
    <h2>{{cocukBaslik}}</h2>
    <button (click)="mesajGonder()">Mesaj Gönder</button>
  `
})
export class CocukComponent {
  @Input() cocukBaslik: string;
  @Output() mesajOlayi = new EventEmitter<string>();

  mesajGonder() {
    this.mesajOlayi.emit('Çocuktan merhaba!');
  }
}

Şablonlar

İnterpolasyon

<h1>{{baslik}}</h1>
<p>Toplam: {{ 1 + 1 }}</p>
<p>Metin manipülasyonu: {{ baslik.toUpperCase() }}</p>

Özellik Bağlama

<img [src]="resimUrl">
<button [disabled]="degismedi">Devre Dışı Düğme</button>

Olay Bağlama

<button (click)="kaydet()">Kaydet</button>
<input (keyup.enter)="girisYap($event)">

İki Yönlü Bağlama

<input [(ngModel)]="isim">

Direktifler

Yerleşik Direktifler

<p *ngIf="kosul">Koşullu içerik</p>

<ul>
  <li *ngFor="let item of ögeler; let i = index">{{i}}: {{item}}</li>
</ul>

<div [ngSwitch]="kosulIfadesi">
  <ng-container *ngSwitchCase="ifade1">Çıktı 1</ng-container>
  <ng-container *ngSwitchCase="ifade2">Çıktı 2</ng-container>
  <ng-container *ngSwitchDefault>Varsayılan çıktı</ng-container>
</div>

<div [ngClass]="{'aktif': aktifMi, 'devreDisi': devreDisiMi}">
  Stillendirilmiş içerik
</div>

<div [ngStyle]="{'color': yaziRengi, 'font-size': yaziBoyutu + 'px'}">
  Stillendirilmiş içerik
</div>

Özel Öznitelik Direktifi

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appVurgu]'
})
export class VurguDirective {
  @Input('appVurgu') vurguRengi: string;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor = this.vurguRengi || 'sarı';
  }
}

Borular

Yerleşik Borular

<p>{{ tarihDegeri | date:'short' }}</p>
<p>{{ fiyat | currency:'TRY':'symbol':'1.2-2' }}</p>
<p>{{ uzunMetin | slice:0:50 }}...</p>

Özel Boru

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'üsselGüç'})
export class UsselGucPipe implements PipeTransform {
  transform(deger: number, us = 1): number {
    return Math.pow(deger, us);
  }
}

Servisler

Temel Servis

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

@Injectable({
  providedIn: 'root'
})
export class VeriServisi {
  private veriler: string[] = [];

  veriEkle(oge: string) {
    this.veriler.push(oge);
  }

  verileriAl(): string[] {
    return this.veriler;
  }
}

Bağımlılık Enjeksiyonu

Servis Enjekte Etme

import { Component } from '@angular/core';
import { VeriServisi } from './veri.servisi';

@Component({
  selector: 'app-benim-bileşenim',
  template: '<ul><li *ngFor="let oge of ogeler">{{oge}}</li></ul>'
})
export class BenimBilesenimComponent {
  ogeler: string[];

  constructor(private veriServisi: VeriServisi) {
    this.ogeler = this.veriServisi.verileriAl();
  }
}

Yönlendirme

Temel Rotalar

import { RouterModule, Routes } from '@angular/router';

const rotalar: Routes = [
  { path: 'anasayfa', component: AnasayfaComponent },
  { path: 'hakkinda', component: HakkindaComponent },
  { path: 'iletisim', component: IletisimComponent },
  { path: '', redirectTo: '/anasayfa', pathMatch: 'full' },
  { path: '**', component: SayfaBulunamadiComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(rotalar)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Yönlendirici Çıkışı

<router-outlet></router-outlet>

Yönlendirici Bağlantısı

<a routerLink="/anasayfa">Anasayfa</a>
<a [routerLink]="['/kullanici', kullaniciId]">Kullanıcı Profili</a>

Formlar

Şablon Tabanlı Form

<form (ngSubmit)="gonder()" #formum="ngForm">
  <div>
    <label for="isim">İsim:</label>
    <input type="text" id="isim" name="isim" [(ngModel)]="model.isim" required>
  </div>
  <button type="submit" [disabled]="!formum.form.valid">Gönder</button>
</form>

Reaktif Form

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-profil-duzenleyici',
  templateUrl: './profil-duzenleyici.component.html'
})
export class ProfilDuzenleyiciComponent {
  profilFormu: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profilFormu = this.fb.group({
      ad: ['', Validators.required],
      soyad: [''],
      adres: this.fb.group({
        sokak: [''],
        sehir: [''],
        ilce: [''],
        postaKodu: ['']
      })
    });
  }

  gonder() {
    console.log(this.profilFormu.value);
  }
}

HTTP İstemcisi

GET İsteği

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class VeriServisi {
  constructor(private http: HttpClient) { }

  veriAl(): Observable<any> {
    return this.http.get('https://api.ornek.com/veri');
  }
}

POST İsteği

veriGonder(veri: any): Observable<any> {
  return this.http.post('https://api.ornek.com/veri', veri);
}

Gözlemlenebilirler

Temel Kullanım

import { Observable } from 'rxjs';

const benimGozlemlenebilirim = new Observable(gozlemci => {
  gozlemci.next('Merhaba');
  gozlemci.next('Dünya');
  gozlemci.complete();
});

benimGozlemlenebilirim.subscribe(
  deger => console.log(deger),
  hata => console.error(hata),
  () => console.log('Tamamlandı')
);

Modüller

Özellik Modülü

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OzellikBileşeni } from './ozellik.bileşeni';

@NgModule({
  imports: [CommonModule],
  declarations: [OzellikBileşeni],
  exports: [OzellikBileşeni]
})
export class OzellikModulu { }

Yaşam Döngüsü Kancaları

Yaygın Yaşam Döngüsü Kancaları

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-yasam-dongusu',
  template: '<p>Yaşam Döngüsü Bileşeni</p>'
})
export class YasamDongusuComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Bileşen başlatıldı');
  }

  ngOnDestroy() {
    console.log('Bileşen yok edildi');
  }
}

Değişiklik Algılama

OnPush Stratejisi

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

@Component({
  selector: 'app-on-push',
  template: '<p>{{veri}}</p>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {
  veri: string = 'İlk veri';
}

Dekoratörler

Özellik Dekoratörü

import { Input, Output, EventEmitter } from '@angular/core';

export class BenimBileşenim {
  @Input() girdiOzelligi: string;
  @Output() ciktiOlayi = new EventEmitter<string>();
}

Angular CLI

Yaygın Komutlar

ng new uygulamam
ng serve
ng generate component benim-bileşenim
ng build --prod
ng test
ng lint

Test Etme

Bileşen Testi

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BenimBileşenim } from './benim.bileşeni';

describe('BenimBileşenim', () => {
  let bileşen: BenimBileşenim;
  let fixture: ComponentFixture<BenimBileşenim>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ BenimBileşenim ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(BenimBileşenim);
    bileşen = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('oluşturulmalı', () => {
    expect(bileşen).toBeTruthy();
  });
});

Animasyonlar

Temel Animasyon

import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-animasyon',
  template: '<div [@acKapa]="acikMi ? 'acik' : 'kapali'">İçerik</div>',
  animations: [
    trigger('acKapa', [
      state('acik', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'sarı'
      })),
      state('kapali', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'yeşil'
      })),
      transition('acik => kapali', [
        animate('1s')
      ]),
      transition('kapali => acik', [
        animate('0.5s')
      ]),
    ]),
  ],
})
export class AnimasyonComponent {
  acikMi = true;
}

Güvenlik

HTML Temizleme

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-temizleyici',
  template: '<div [innerHTML]="guvenliHtml"></div>'
})
export class TemizleyiciComponent {
  guvenliHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    const guvenliOlmayanHtml = '<script>alert("XSS")</script> <b>Kalın metin</b>';
    this.guvenliHtml = this.sanitizer.bypassSecurityTrustHtml(guvenliOlmayanHtml);
  }
}