Angular 7.0 – Yeni Avatarındaki Yeni Neler Var?

Yayınlanan: 2018-12-29

Bir binanın gücü beton direklerindedir. Bir web uygulamasının çerçevesi de öyle. Bir yazılım çerçevesi, uygulamaları tasarlamak, oluşturmak ve dağıtmak için standart bir yol sağlar. Java platformları dünyasında, Javascript çerçevesi , Angular önem kazanana kadar en çok konuşulan terimdi.
Şimdi, Angular'ın bazı Belirgin özelliklerini görelim .

  • Angular, şimdi 'Typescript' olarak adlandırılan şeye dönüşen bir Açık kaynaklı Javascript çerçevesidir.
  • Kod oluşturma ve geliştirme, bir (Javascript) JS koduna kıyasla daha hızlıdır.
  • Komut satırı isteminde (CLI), uygulamayı daha hızlı oluşturmaya yönelik komutlar bulunur.
  • Kurallar, bileşenleri kullandığı için iyi organize edilmiştir, dolayısıyla üretkenliği artırır
  • Yönerge, değişkenleri, if deyimlerini ve HTML'deki döngüleri işleyen dinamik bir işlevdir.
  • Angular çapraz platformdur, dolayısıyla tarayıcıdan ve işletim sisteminden bağımsızdır.
  • Angular CLI, birim testi için yardımcı olan test araçlarıyla birlikte gelir

Yazılım mühendisliği kurslarını dünyanın en iyi üniversitelerinden çevrimiçi öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

İçindekiler

AngularJS – Angular'ın öncüsü

AngularJS, 2009 yılında Google tarafından tanıtılan Angular serisindeki ilk üründür. İstemci tarafı veya ön uç çerçevesidir. Bunun anlamı, kodun web sunucusunda değil, kullanıcının tarayıcısında çalışmasıdır. AngularJS tamamen Javascript ile yazılmıştır. Bu, uygulama mantığını ayırmak için geliştirildi, ancak mevcut avatarı 7.0 ile Angular için oldukça başarılı ve döşeli tek yol buydu.
Bir Sonraki Mobil Uygulama Geliştirmeniz İçin AngularJS Doğru Seçim mi?

Açısal 7.0 Çerçevesi

Angular'ın yapı taşlarını kısaca anlayalım:

  1. Modül : Temel olarak uygulamanın çekirdek ekranlarını mantıksal olarak parçalar. Örneğin, bir alışveriş sepeti sayfası varsa, bir alışveriş sepeti modülüne sahip olmak isteyebilirsiniz.
  2. Bileşen : Bu, kullanıcı arayüzünün bir bölümüdür ve nesne yönelimli programlamada olduğu gibi bir 'sınıf'tır. Bu, Kullanıcı Arayüzünün (UI) temel yapı taşıdır. Bileşen sınıfı, sayfanın temel mantığını içerir.
     Bileşenler şunlardan oluşur:

    1. Şablon : Bir şablon HTML ile yazılır veya HTML dosyaları olabilir. Değişkenler gibi dinamik özelliklere sahip olabilir ve yönergelerle 'if koşullarının' kullanılması mümkündür.
    2. Class : Uygulamanın kodudur. Kod TypeScript'te yazılmıştır. Typescript, Javascript'in bir üst kümesidir. Typescript, değişkenlerin tanımlanmış türlerle bildirildiği 'statik' bir tür dilidir. Bu nedenle hatalar, çalışma zamanında yakalanmak yerine programın derlenmesinde yakalanır. Angular sınıflar Javascript ile de yazılabilir. Bileşenlerin veri özellikleri ve yöntemleri vardır.
    3. Metadata : Sınıfın bir Angular bileşeni olduğunu belirlemek için Metadata kullanılır. Meta veriler, bir dekoratör bildirimi kullanılarak TypeScript'e eklenebilir.
       Angular'da basit bir bileşeni inceleyelim.

       {bileşeni} ''@angular/core'' içinden içe aktarın; Burada bileşen paketi Angular çekirdek kitaplığından içe aktarılır.
@component ({ (bu bir dekoratör beyanıdır)
Seçici : 'mapplication' …(.bu, bileşeni eklemek için kullandığımız özel HTML etiketidir. )
Şablon: '<h1> Merhaba {(isim)}</h1> (isim bir değişkendir)
})
dışa aktarma sınıfı AppComponent{ (Bu, bileşen sınıfıdır ve 'ad', sınıftaki bir özelliktir)
name = 'Açısal çerçeve';
}
<body>
<myapplication>Buradan bir örnek uygulama bileşeni yükleniyor..</myapplication>
</body>
    4. Veri bağlama : Bileşen ve görünüm arasında iletişime izin veren bir süreç. Böylece veriler bileşenden görünüme geçirilir ve bunun tersi de geçerlidir. Dört tür veri bağlama vardır. Enterpolasyon ve özellik bağlamada veriler bileşenden görünüme gönderilir ve olay bağlamada veriler görünümden veya şablondan bileşene gönderilir. İki yönlü bağlamada veriler her iki yönde de hareket eder.
    5. Service : Yeniden kullanılabilir kod yani birden çok bileşenden erişilebilen kod için yazılmış bir sınıftır. Bu sınıflar, bileşenler arasında veri ve işlevsellik gönderir. Hizmet sınıfları ayrıca bir veritabanından veya bir js/JSON dosyasından veri alabilir. Bir Service sınıfı kullanıldığında, kod düzenli ve parçalanmış görünüyor.
    6. Yönerge : HTML'nin gücünü genişletmek için HTML niteliklerini özelleştirmek bir yönergedir. ngIf, ngFor, ngModel yönergelerdir. ngModel, input, textarea veya Select gibi diğer direktiflerin gerektirdiği şekilde görünümü modele bağlamaktan sorumludur.
       İşte ngmodel'in nasıl çalıştığını gösteren bir kod parçası.

       <div ng-app="" ng-init="firstName='John'">
<p>Giriş kutusuna bir ad girin:</p>
<p>Ad: <input type="text" ng-model="firstName"></p>
<p>Şunu yazdınız: {{ firstName }}</p>
</div>

      Böylece, firstName 'John' olarak başlatıldı ve metin kutusuna yeni bir değer girildiğinde, firstName girilen yeni adı tutacaktır.

    7. Bağımlılık ekleme (DI) : Sınıflar, belirli bir işlevi gerçekleştirmek için nesnelere ihtiyaç duyar. Sınıfta her seferinde nesneleri oluşturmak yerine, sınıf nesneleri(bağımlılıkları) dış kaynaklardan alır. DI çerçevesinde takip edilmesi gereken adımlar şunlardır:
      1. Bir Hizmet Sınıfı oluşturun, örn. çalışan verisi
      2. Bu hizmet sınıfını Enjektöre kaydedin. Enjektör, tüm bağımlılık sınıflarını içeren bir kapsayıcıdır.
      3. Employeedata sınıfını, ihtiyacı olan sınıfta bir bağımlılık olarak bildirin, örn. Çalışan Listesi Sınıfı
Bir Yazılım Geliştirici Ne Yapar?

Angular sürümleri

AngularJS'den sonra, AngularJS'nin tamamen yeniden yazılması olan Angular 2 piyasaya sürüldü. Bileşenler Angular 2'den eklendi. Angular 2 geriye dönük uyumlu değildi. Angular, bir grup paketten oluşur ve Angular 3'teki Yönlendirici paketi senkronize değildi. Bu nedenle Angular ekibi, Angular 2 ile geriye dönük uyumluluğu olan tüm düzeltmeler ve özelliklerle birlikte piyasaya sürülen Angular 4'e geçti. Ardından Angular 5, Angular 6 çıktı ve şimdi en son sürüm Angular 7 oldu .

Angular 7.0'daki yenilikler neler?

  1. CLI İstemleri : Angular komut satırı istemindeki bir değişiklik, CLI'nin kullanıcıdan ortak komutları çalıştırırken özellikleri seçmesini istemesidir. Açısal yönlendirme veya stil sayfasının formatı gibi özellikler ve daha fazlası kullanıcı tarafından seçilebilir. Angular'ın önceki sürümlerinde, komut istemindeki seçenekleri hatırlamanız ve yazmanız gerekiyordu.
  2. Uygulama Performansı :
    1. Genel hatalar:
       Bu versiyonda, açısal ekip, geliştiriciler tarafından yapılan 'yansıma-meta veri' polyfill gibi bazı yaygın hataları analiz etti ve kaldırdı, aslında sadece geliştirmede ihtiyaç duyulan üretime dahil edildi.
    2. Paket-Bütçeler:
       Uygulamanın performansını iyileştirmek için varsayılan Paket Bütçeleri angular.JSON'da tanımlanır. Uygulama paketi boyutu 5 MB sınırını aşarsa ve ilk paket 2 MB'ı aşarsa geliştiriciler artık uyarılacaktır. Bu değerler, gerektiğinde JSON dosyasında değiştirilebilir.
  3. Angular Material ve CDK: Angular bileşen geliştirme kiti (CDK), Angular Material'dan (kütüphaneler için UI) oluşturulmuştur. CDK'ye eklenen iki yeni özellik şunlardır:
    1. Sanal Kaydırma:
       Ekranda yalnızca görünen kısmı yüklemek için <cdk-virtual-scroll-viewport> paketi, kaydırma olaylarına tepki veren yönergeler için yardımcılar sağlar. Bu nedenle, yalnızca ekrana sığabilecek öğeleri oluşturacaktır. Bir kullanıcı listeyi kaydırdığında, DOM, öğeleri görüntüleme boyutuna göre dinamik olarak yükler ve kaldırır.
    2. Sürükle ve Bırak desteği:
       @angular/cdk/sürükle-bırak modülü, bir öğenin serbest sürükle ve bırak özelliğine, listedeki öğelerin yeniden sıralanmasına, listedeki öğelerin taşınmasına vb. yardımcı olur. Bu, cdkDropList ve cdkDrag yönergeleri yardımıyla yapılır.
  4. Angular 7.0, bağımlılıklarını Typescript 3.1, RxJS 6.3 ve Node 10'u destekleyecek şekilde güncelledi .
  5. Seçimlerin iyileştirilmiş erişilebilirliği: Yerel 'seçim' bazı performans, erişilebilirlik ve kullanılabilirlik avantajlarına sahiptir, bu nedenle bir 'mat-form alanı' içinde yerel bir seçim öğesi kullanmak Angular 7.0'daki yeni bir özelliktir.
  6. Açısal elemanlar: Küçük bir değişiklik ama Angular 7'de yeni
     “ Angular Elements artık özel öğeler için web standartlarını kullanarak içerik projeksiyonunu destekliyor .” — Stephen Fluin böyle diyor Angular.
  7. Ortaklarla çalışma: Angular ekibi, yakın zamanda başlatılan topluluk projeleriyle ortak olmak için çalışıyor, bunlardan biri Angular Konsolu. Angular Console, Angular CLI için bir kullanıcı arayüzüdür. Bilgi istemlerinden çok daha kolay olduğu için yeni başlayanlar ve uzmanlar için iyidir. Windows ve Mac OS için farklı UI sürümleri vardır .
Java'da MVC Mimarisi İçin Başlangıç ​​Kılavuzu

Angular 7.0'daki değişikliklerin çoğu performans iyileştirmeleri ve hata düzeltme üzerinedir. Bu nedenle, bugüne kadarki en güvenli sürümdür ve önceki sürümlerden geçiş yapmak basittir. Ivy, Angular ekibinin üzerinde çalışmakta olduğu yaklaşan yeni işleme motorudur. O zamana kadar bekleyip izleyelim. Öğrenmeye Devam Et !

Tam yığın yazılım geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin Yazılım Geliştirmede Yönetici PG Programına göz atın - Çalışan profesyoneller için tasarlanmış ve 500+ saatlik zorlu eğitim, 9+ projeler ve görevler, IIIT-B Mezunları durumu, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.

Tam Yığın Geliştirici Olun

UpGrad'ın Yazılım Mühendisliğinde İş Bağlantılı PG Sertifikasyonu için başvurun