Angular v16'daki Yenilikler Neler?

Google tarafından sağlanan Angular, web uygulamaları geliştirmek için yaygın olarak kullanılan açık kaynaklı bir çerçevedir. Dinamik, hızlı yanıt veren ve ölçeklenebilir web uygulamaları oluşturmanıza olanak tanıyan sağlam bir araç seti ve çeşitli özellikler sunar.

Angular sürüm 16'nın son lansmanı, geliştirme deneyiminde heyecan verici güncellemeler ve iyileştirmelerin yanı sıra daha iyi uygulama performansı ve kararlılığı sunar.

1. Açısal Sinyaller

Açısal Sinyaller reaktif değerlerin tanımlanmasını ve aralarında bağımlılıkların kurulmasını sağlayan bir kütüphanedir. İşte bir Angular uygulamasında Angular Signals'ın nasıl kullanılacağına dair basit bir örnek:

@Bileşen ({
 seçici: "uygulamam",
 bağımsız: doğru,
 şablon: `
{{ Ad Soyad() }} "setName('John')">tıklayın</button>
`,
})
ihracatsınıf Uygulama {
 ad = sinyal('Jane');
 soyadı = sinyal("Doe");
 tamAdı = hesaplanan(() =>`${Bu.ilk adı()}${Bu.soy isim()}`





instagram viewer
);
inşaatçı() {
 etki(() =>konsol.kayıt("İsim değişti:", Bu.Ad Soyad()));
 }
 setName (yeniAd: sicim) {
Bu.ilkAdı.set (yeniAdı);
 }
}

Yukarıdaki kod parçacığı, firstName ve lastName sinyallerine dayanan fullName adlı bir hesaplanmış değer oluşturur. Ek olarak, okuduğu sinyallerin değeri değiştiğinde çalışan bir efekt, bir geri arama işlevi tanımlar.

Bu durumda, fullName değeri firstName ve lastName'e bağlıdır, bu nedenle bunlardan birinin değiştirilmesi etkiyi tetikler. FirstName'in değeri John olarak ayarlandığında, tarayıcı aşağıdaki mesajı konsola kaydeder:

 İsim değişti: John Doe.

2. Bağımsız Ng Yeni Koleksiyon

Angular v16'dan başlayarak, en baştan yeni bağımsız projeler oluşturabilirsiniz! Bağımsız şemaların geliştirici önizlemesini denemek için Angular CLI v16'nın kurulu olduğundan emin olun ve aşağıdaki komutu çalıştırın:

yeni -- bağımsız

Bunu yaparak, herhangi bir NgModule olmadan daha basit bir proje yapısı elde edeceksiniz. Ayrıca, projedeki tüm jeneratörler bağımsız direktifler, bileşenler ve boru hatları üretecek!

3. Otomatik Rota Parametreleri Eşleme

Aşağıdaki gibi bir yönlendirme yapılandırması düşünün:

ihracatsabit rotalar: Rotalar = [{
 yol: "arama:/kimlik",
 bileşen: Arama Bileşeni,
 çözmek: {
 searchDetails: searchResolverFn
 }
}];

Angular 16'dan önce, belirli bir URL için URL parametrelerini, sorgu parametrelerini veya ilişkili verileri almak için ActivatedRoute hizmetini enjekte etmeniz gerekiyordu.

İşte bunu nasıl yapmanız gerektiğine dair bir örnek:

@Bileşen({
 ...
})
ihracatsınıf Arama Bileşeni {
 salt okunur #activedRoute = enjekte (ActivatedRoute);
 salt okunur kimlik$ = Bu.#activedRoute.paramMap (harita(parametreler => parametreler.get('İD')));
 salt okunur veri$ = Bu.#activedRoute.data.map(({
 aramaAyrıntıları
 }) => aramaAyrıntıları);
}

Angular 16 ile, çeşitli rota parametrelerini almak için artık ActivatedRoute hizmetini enjekte etmeniz gerekmez çünkü bunları doğrudan bileşen girişlerine bağlayabilirsiniz.

Modül sistemini kullanan bir uygulamada bu işlevi etkinleştirmek için RouterModule seçeneklerinde karşılık gelen değeri ayarlayın:

RouterModule.forRoot (yollar, {
 bindComponentGirişleri: doğru
})

Bağımsız bir uygulama için bunun yerine bir işlev çağırmanız gerekir:

ProvideRoutes (yollar, ComponentInputBinding() ile);

Bu işlevi etkinleştirdiğinizde, bileşen çok daha basit hale gelir:

@Bileşen({
 ...
})
ihracatsınıf Arama Bileşeni {
@Giriş() kimlik!: sicim;
@Giriş() searchDetails!: SearchDetails;
}

4. Gerekli Girdi

Angular topluluğu için merakla beklenen bir özellik, belirli girdileri gerektiği gibi işaretleme yeteneğidir. Şimdiye kadar, bunu başarmak için NgOnInit'te bir hata oluşturmak gibi çeşitli geçici çözümler kullanmak zorundaydınız. değişken tanımlanmamışsa veya bileşenin seçicisini zorunlu olanı içerecek şekilde değiştiriyorsa yaşam döngüsü girişler.

Ancak, bu çözümlerin her ikisinin de avantajları ve dezavantajları vardı. Sürüm 16'dan başlayarak, bir girişi gerekli kılmak, giriş ek açıklamasının meta verilerinde bir yapılandırma nesnesi sağlamak kadar basittir:

@Giriş({
 gerekli: doğru
}) isim!: sicim;

5. Geliştirici Sunucusu olarak Vite

Angular 14, oluşturma sürelerini yaklaşık %40 oranında önemli ölçüde iyileştiren EsBuild adlı yeni bir JavaScript paketleyiciyi kullanıma sundu. Ancak, bu performans kazanımını dev sunucusuyla geliştirme sırasında değil, yalnızca oluşturma aşamasında gerçekleştirebilirsiniz.

Angular'ın gelecek sürümünde, Vite oluşturma aracı EsBuild'in geliştirme sırasında da kullanılmasını sağlar.

Bu özelliği etkinleştirmek için angular.json dosyasındaki oluşturucu yapılandırmasını aşağıdaki gibi güncelleyin:

"mimar": {
"inşa etmek": {
"inşaatçı": "@ angular-devkit/build-angular: browser-esbuild",
"seçenekler": {
 ...
 }
 }

Lütfen bu işlevin hala deneysel olduğunu unutmayın.

Geliştirme Deneyimini ve Performansı Artırmak

Angular sürüm 16, verileri yönetmek için Angular Signals, bağımsız proje gibi heyecan verici güncellemeler getiriyor oluşturma, otomatik rota parametreleri eşleme, gerekli girdiler ve geliştirilmiş Vite entegrasyonu gelişim. Bu geliştirmeler, geliştirme deneyimini iyileştirir ve uygulama performansını artırır.