Angular 7'nin on ana özelliğini analiz edin!
Angular, en popüler web uygulama geliştirme çerçevelerinden biridir. Angular 7'nin piyasaya sürülmesiyle, web geliştiricilerine ana sürümle ayak uydurmak için temel çerçeve, Angular Material, CLI ve araç zinciri ve birkaç büyük ortak dahil olmak üzere daha fazla özellik getiriyor.
Bu makalede Angular ekibi tarafından yayınlanan bazı yeni özellikleri tanıtacağız. Angular 7 esas olarak Ivy projesine odaklanır, Angular derleyicisini ve çalışma zamanı kodunu daha küçük, daha iyi ve daha hızlı hale getirmek için yeniden yazar, ancak Ivy altın anına hazır değildir.
Ardından, Angular 7.0 tarafından sunulan en iyi 10 özelliğe bir göz atalım.
1. CLI İstemleri
Angular CLI, v7.0.2'ye güncellendi ve bazı yeni özellikler eklendi. Örneğin, artık kullanıcılara ortak komutları (ng-add veya ng-new gibi) girdiklerinde soruyor. @ Angular / material, yönlendirme gibi yerleşik özellikleri keşfetmek için kullanılabilir Veya SCSS desteği. Angular 7 ile yeni bir proje oluştururken, CLI'deki paket bütçesi varsayılan olarak kullanılacaktır.
2. Uygulama performansı
Angular ekibi, Angular geliştiricilerinin üretim ortamına yansıma meta verisi polyfill'i dahil edeceğini, ancak bu polyfill'in yalnızca geliştirme ortamında kullanıldığını buldu.Bu sorunu çözmek için, v7 güncellemesinin bir kısmı onu polyfills.ts dosyasından otomatik olarak kaldıracaktır. Ardından, JIT modunda bir uygulama oluştururken bunu bir oluşturma adımı olarak kullanın. Varsayılan olarak, bu çoklu dolgu, üretim ortamı için bir yapı oluştururken silinir.
Performansı artırmak için, yeni uygulama ilk paket 2MB'yi aştığında uyaracak ve 5MB'ye ulaştığında bir hata bildirecektir.Kullanıcılar bu bütçe değerlerini angular.json dosyasında değiştirebilir.
3. Köşeli Malzeme ve CDK
Açısal Malzeme ve Bileşen Geliştirme Kiti (CDK), Angular 7, Malzeme Tasarımında görsel iyileştirmeler yaptı ve 2018'de, DOM'nin bazı öğelerini dinamik olarak yüklemek ve boşaltmak için kullanılan sanal kaydırma özelliğini getiren büyük bir güncelleme aldı. Yüksek performanslı büyük veri listeleri. Ek olarak, DragDropModule veya ScrollingModule'u içe aktararak, uygulamalar sürükle ve bırak işlevine sahip olabilir.
4. Sanal kaydırma
Sanal haddeleme paketi < cdk-sanal-kaydırma-görüntü penceresi > Kaydırma olaylarına tepki verme talimatları için bazı yardımlar sağlanır. Sanal kaydırma, görünen bölüme bağlı olarak DOM'un bazı öğelerini yükleyebilir ve kaldırabilir. Kap öğesinin yüksekliğini, işlenecek toplam öğe sayısının yüksekliğiyle tutarlı tutar, böylece işlenmekte olan tüm öğeleri verimli bir şekilde simüle eder ve sonra yalnızca görünümdeki görünür öğeleri işleyerek büyük kaydırılabilir listeler için çok hızlı bir kullanıcı deneyimi sağlar.
5. Sürükle ve bırak
@ Angular / cdk / sürükle-bırak modülü, bildirimsel bir şekilde sürükle ve bırak arayüzü oluşturmanın bir yolunu sağlar.Ücretsiz sürükleme, listeler halinde sıralama, listeler arasında öğe aktarımı, animasyonlar, dokunmatik cihazlar, Sürükleme tutamaçlarını, önizlemeleri ve yer tutucuları özelleştirmenin yanı sıra listeleri yeniden sıralayın (moveItemInArray) ve öğeleri listeler arasında aktarın (transferArrayItem).
6. Açısal Uyumluluk Derleyicisi (ngcc)
Bu derleyici, ngc ile derlenen node_modules'i yeni Ivy oluşturucu ile uyumlu node_modules'e dönüştürmek için kullanılır. Angular uyumluluk derleyicisi ngc ile derlenen node_moduls'u ngtsc ile derlenen node_modules'e benzer hale getirir. Bu dönüştürme yoluyla, Ivy oluşturma motoru bazı "eski" paketleri kullanabilir.
7. Açısal Do-Bootstrap
Önyükleme bileşenleri gerektiren modülleri başlatmak için kullanılır. Angular 7, yeni bir yaşam döngüsü kancası (ngDoBootstrap) ve arayüz (DoBootstrap) ekler.
Örneğin:
Daha iyi hata işleme
Angular 7, başlatılmamış özellikler gibi @Output'a gelişmiş bir hata işleme getirir.
8. Angular 7'de bağımlılık güncellemesi
(1) TypeScript 3.1 desteği
Angular 7, TypeScript sürümünü 2.7'den en son sürüm 3.1'e yükseltti. Angular 7 kullanılırken, TypeScript'in en son sürümü kullanılmalıdır. Angular tarafından kullanılan TypeScript sürümü genellikle geride kaldığından, bu sefer en son TypeScript sürümüyle eşleşir.
(2) RxJS 6.3
Angular 7, bazı heyecan verici eklemeler ve değişiklikler getiren RxJ'lerin (6.3.3) en son sürümünü ekler. Bu değişiklikler, performans iyileştirmeleri sağlar, geliştiricilerin çağrı yığınında hata ayıklamasını kolaylaştırır ve modülerliği iyileştirirken mümkün olduğunca geriye dönük uyumludur.
(3) Node v10 için destek ekleyin
Angular 7 ekibi artık geriye dönük uyumluluk ile Node V10'u da destekliyor.
(4) Yuvalı açısal eleman
Angular 6.1, Angular öğeler için çok yararlı olan ViewEncapsulation.ShadowDom işlevini etkinleştirir ve artık özel öğelerde içerik projeksiyonu için Web standartlarının kullanımını destekler. Web Bileşenleri Spesifikasyonu, Yuva adında yeni bir standart HTML öğesi sunar. Bu özellik artık kullanılabilir ve bileşenler şablonlar aracılığıyla etkinleştirilebilir.
O zaman bunu bir Açısal eleman olarak kullanabilirsiniz:
(5) Yeni ng-derleyici
Yeni ng-derleyici, hızlandırılmış sekiz aşamalı derleme sağlar ve büyük uygulamaların boyutunu yaklaşık yarıya indirir. Yeni derleyici, sekiz aşamalı rotasyon ön derlemesi gerçekleştirebilir. Çoğu uygulamanın paket boyutunun% 95-99 oranında önemli ölçüde azaltılması beklenmektedir.
(6) Bölünmüş @ açısal / çekirdek
Angular'ın bir dezavantajı, çok fazla genel özelliğe sahip olmasıdır. Bu geniş bir çerçevedir ve size otomatik olarak kullanılmayan modülleri sağlayacaktır.Bu nedenle, Angular ekibi @ angular / core'u en az 418 modüle böldü.
(7) Yönlendirici
Yeni bir uyarı türü eklendi. Bu uyarı, Açısal alanın dışında gezinmeyi tetiklemeye çalışırsanız görünecektir. Bu sizin için işe yaramazsa, Angular günlüğe bir uyarı yazar (yalnızca geliştirme modunda). Yeni sürüm ayrıca, etkinleştirme kancalarına gezinme yürütme bağlam bilgilerini de ekler.
9. Hâlâ Ivy Yok
Angular ekibi son bir zaman çizelgesi vaat etmedi, ancak resmi blog gönderisine göre, Ivy hala aktif geliştirme aşamasında, ancak bu Angular v7'nin bir parçası değil. Sürüm 8'de tam beta olmasını bekliyoruz. Angular'ın resmi GitHub deposundaki Ivy Renderer sayısında kendi başınıza takip edebilirsiniz. Ayrıca, tamamen test edildiği ve doğrulandığı sürece Ivy'nin küçük bir versiyonda yayınlanabileceğini umuyorlar. Belki Angular 7'nin bir sonraki sürümünde göreceğiz.
10. Dokümantasyon Güncelleme
Angular.io'daki dokümantasyon artık Angular CLI ile ilgili referanslarla güncellenmiştir.
Kullanımdan kaldırıldı
En son Angular 7 sürümü, bazı şeyleri kullanımdan kaldırmıştır, örneğin, önceden şablondaki formu bildirmiştiniz. Bu seçici artık kullanımdan kaldırılmıştır ve şimdi kullanılmalıdır < ng-formu > .
Angular 7'ye nasıl güncellenir
Angular Uygulamasını Angular 6 ve RXJS 6'da zaten çalıştırıyorsanız, yalnızca @angular cli / core ve Angular Material'inizi güncellemeniz gerekir.
Veya uygulamayı güncellemeyle ilgili ayrıntılı bilgi ve rehberlik için update.angular.io adresini ziyaret edin. Geliştiriciler, Angular 7'nin her zamankinden daha hızlı güncellendiğini ve birçok uygulamanın güncellenmesinin 10 dakikadan kısa sürdüğünü bildirdi.
Angular 7'nin diğer yeni özellikleri:
- Angular Console - yerel bilgisayarda Angular projeleri başlatmak ve çalıştırmak için indirilebilir bir konsol;
- @ angular / fire-AngularFire'ın npm'de yeni bir ana sayfası var ve Angular'ın ilk kararlı sürümünü sağlıyor;
- NativeScript-NativeScript artık Web ve mobil aygıtlar için tek bir proje oluşturmak için kullanılabilir;
- StackBlitz-StackBlitz 2.0 yayınlandı ve artık Angular dil hizmetleri ve sekme düzenleme gibi daha fazla özellik içeriyor;
- Seçmelerin erişilebilirliği iyileştirildi (mat-form alanında seçim öğesi);
- bazel: contractor_web_test_suite'in ilk sunumu;
- compiler-cli: tsickle'ı 0.29.x'e güncelleyin;
- core: defaultKeyValueDiffers'ı özel bir API olarak dışa aktar;
- Platform tarayıcısı: HammerJS tembel yükleyici sembolünü genel API'ye ekleyin;
- Service Worker: SW joker karakter yapılandırması için destek sağlayın.
sonuç olarak
Yukarıdaki tüm özellikleri birleştiren Angular v7, modern teknoloji trendlerini karşılamaya ve Bitcoin madenciliği, sanal kaydırma, sürükle ve bırak, Angular Material gibi özellikler eklemeye odaklanan bir çözüm gibi görünüyor, ancak hala mevcut sürümde değil. Ivy içerir.
Angular ekibi, Angular'ı daha iyi hale getirmek için harika bir iş çıkardı. Web ve mobil teknolojilere dayalı kendi çözümlerinizi uygulamayı planlıyorsanız, Angular 7'yi verimli bir yeni geliştirme çerçevesi olarak kabul ettiğinizden emin olun.
Orijinal İngilizce: https://www.angularminds.com/blog/article/top-10-features-of-angular-7.html
