Angular 5 çıktı. Beşinci nesline giren Javascript Framework, birçok yenilik getirdi. Şimdi bu yeniliklerin bazılarına yakından bakalım.

AngularJS sürümünden Angular 2 ye geçiş önemli bir devrimdi. Angular 4 sürümü ise Angular 2 sürümüne çok az şey getiriyordu. Hatta bu güncelleme için mevcut sitelerde neredeyse hiçbir işleme gerek olmamıştı. Angular 4'ün yayınlanmasından yaklaşık 8 ay sonra bu kez 5. sürüm yayınlandı. Bu Major bir güncelleme olduğundan içinde pek çok düzenleme içeriyor. Geliştiriciler için de bazı düzeltmeler gerektirmesine rağmen çok da zorluk çıkartmayacak.

TypeScript 2.4 Desteği

Angular 5 resmi olarak TypeScript 2.4 desteği ile geliyor. Önceki sürümde TypeScript 2.3 desteği bulunmaktaydı.

TypeScript 2.4 ile String bazlı enum desteği geliyor.

enum Colors {Red = "RED", Green = "GREEN", Blue = "BLUE",}

Aynı zamanda yeni Typescript daha gelişmiş tip kontrol fonksiyonları içeriyor.

let foo: Promise<number> = new Promise(resolve => {
    resolve("bar");
    // Error
});

Weak-Type-Detection ismi verilen güncelleme ise seçimlik parametrelere sahip değişkenleri tanımlıyor

export interface Options {
  showSideNav?: boolean;
  description?: string;
}

Progressive Web Uygulamaları (PWA)

Halihazırda progressive web uygulamalarının (PWA) geliştirilmesi oldukça karmaşık bir süreç gerektirmekteydi. Geliştirme, yayınlama, önbellekleme ve eski sürümlerin çağırılması konuları oldukça dikkat gerektirmekte idi.

Angular 5 ile bu değişiyor. PWA geliştirme süreci o kadar basitleşiyor ki varsayılan olarak böyle çalışmak mantıklı hale geliyor. Bu hem geliştiriciler, hem de kullanıcılar için iyi bir gelişme.

PWA desteği CLI'dan şu komut ile açılabilir :

ng set apps.0.serviceWorker=true

Build

Her Build işleminde artık varsayılan olarak optimizasyon yapılıyor. Bunun sonucunda daha küçük ve hızlı çalışan kodlar oluşturuluyor.

Formlar

Performansı artırmak için artık form doğrulamalarının ne zaman yapılması gerektiğini belirleyebileceksiniz. 

Form alanlarının değeri her değiştiğinde (mesela her bir klavye girişinde) karmaşık kontrollerin yapılması performansı oldukça düşürebilir.

Yeni updateOn seçeneği ile Angular 5 doğrulamanın ne zaman yapılacağını daha net olarak tanımlamanıza imkan veriyor. Mesela change olayını submit ya da blur ertesinde çalıştırmak mümkün.

Reactive Formlar

Reaktive formlarda updateOn özelliği, parametre nesnesi olarak form üyesine geçirilebiliyor.

Uygun parametre nesnesi ile FormControl örneği:

this.email = new FormControl(null, { updateOn: 'blur' });

Eğer doğrulama tanımlanacaksa, bunlar parametre nesnesinin özellikleri olarak verilir :

this.email = new FormControl(null, {
  validators: Validators.required,
  updateOn: 'blur'
});

Alt elementlerin davranışlarını ayrı ayrı tanımlamaktansa, FormGroup ve FormArray yapıları kullanılabilir. Bu örnekte FormGroup nesnesinin içerdiği elemanlar Submit anında doğrulanmakta:

this.login = new FormGroup({
  email: new FormControl(),
  password: new FormControl()
}, { updateOn: 'submit' });

Grubun içerdiği elemanlar, burada belirtilen davranışları aşağıda görüldüğü gibi override edebilir:

this.login = new FormGroup({
  email: new FormControl(null, {
     validators: Validators.required,
     updateOn: 'blur'
  }),
  password: new FormControl(null, [Validators.required])
}, {updateOn: 'submit'})

Şablonla Oluşturulan (Template-Driven) Formlar

Şablon ile oluşturulan formlar için Angular 5 yeniliği olan updateOn parametresi tanımlanabilir. Bu, ngModelOptions dahilinde aşağıdaki örnekte görüldüğü gibi yapılır:

<input type="email" ngModel [ngModelOptions]="{updateOn: 'submit'}">

Aynı zamanda reactive formlar gibi varsayılan değerlerin üzerine yazılabilmektedir:

<form [ngFormOptions]="{updateOn: 'submit'}">
 <input name="email" ngModel type="email" [ngModelOptions]="{updateOn: 'blur'}">
 <input name="password" ngModel type="email">
</form>

HttpClient

Angular 4.3 ile sunulan HttpClient şimdi sayfa başlık verileri ve parametrelerini içeren bir parametre nesnesi destekliyor.

http.get("/api", {
    headers: {
        "X-DEMO-HEADER": "demo"
    },
    params: {
        "foo":  "bar"
    },
})

i18N Pipes

Angular 5 ile uluslararasılaştırma (Internationalization) ve Yerelleştirme (Localization) yapıları yenileniyor. Daha önceden kullanılan Intl-API artık tarayıcu uyumsuzlukları nedeniyle desteklenmeyecek. Bunun yerine yerelleştirme, Unicode Common Locale Data Repository (CLDR) den alınacak veri üzerine temelleniyor. 

Bu mevcut API yapısını kırmak anlamına geliyor. Varsayılan ayarlar US-English "en-US" olacak. Eğer farklı bir yerelleştirme ya da dil ayarı isteniyorsa, bunu önceden sisteme import etmek gerekiyor.

Router

Angular yönlendiricisi (Router) yeni event'lar ile genişletildi. Bunlarla örneğin rota değiştirildiğinde gösterilecek ilerleme ekranları oluşturabilirsiniz. Bu eventlar ActivationStart ve ActivationEnd ya da ChildActivationStart ve ChildActivationEnd.

Animations

Angular 5'de bulunan animations paketi bazı yazım kuralı düzenlemelerini de içerecek şekilde genişletildi. Artık sayısal değer değişikliklerine cevap olarak uygun değişimleri :increment ve :decrement kullanarak yapabileceksiniz. Şu koda bir göz atın:

@Component({
    animations: [
        trigger("counter", [ 
            transition(':increment', [ /*...*/ ]),
            transition(':decrement', [ /*...*/ ]),
        ])
    ],
    template: `
    <span [@counter]="count">
    `
})
class MyComponent() { 
    count = 1;
}

Angular 5'de animasyonlar databinding vasıtası ile değişkenler kullanılarak başlatılıp durdurulabiliyor. Bunu yapmak için .disabled özelliğini sınırlamak yeterli.

@Component({
    animations: [
        trigger("val", [ /* ... */])
    ],
    template: `
 
 
<div [@val]="prop" [@val.disabled]="animationDisabled">
    `
})
class MyComponent() { 
    prop = '';
    animationDisabled = false;
}

Angular 5'deki diğer önemli değişiklikler

Aşağıdaki API ve fonksiyonlar Angular 4 ile "deprecated" moduna alınmıştı. Angular 5 ile tamamen kaldırıldı.

  • OpaqueToken kaldırıldı, yerine InjectionToken kullanılmalı
  • ErrorHandler nesnesinin parametre constructor u kaldırıldı
  • NgTemplateOutlet'de bulunan ngOutletContext kaldırıldı
  • Angular Router, initialNavigation için sadece "enabled" ya da "disabled" değerlerini alabilecek. "true","false","legacy_enabled" ve "legacy_disabled" değerleri artık kabul edilmeyecek.
  • i18n yorumları yerine artık ng-container elementleri kullanılmalı
  • Derleyici artık varsayılan olarak enableLegacyTemplate kullanmayacak. <template> elementi kullanımdan kaldırıldı, yerine <ng-template> kullanılmalı. <template> ve enableLegacyTemplate seçenekleri Angular 6 ile tamamen kaldırılacak.
  • Dependency injection için kullanılan ReflectiveInjector kullanımdan kaldırıldı, yerine StaticInjector kullanılacak. ReflectiveInjector.resolveAndCreate kullanılan yerlerde Injector.create kullanılmalı.

 

Kaynak : https://jaxenter.com/angular-5-new-features-138649.html

angular typescript mvc