AngularJS nedir? ArchiYapı, Özellikler ve Avantajlar

AngularJS nedir?

angularjs Açık kaynaklı bir Model-View-Controller çerçevesidir ve şu dilde yazılmıştır: JavaSenaryoAngularJS, 2010'lu yılların en popüler web çerçevelerinden biriydi ve geliştirme için kullanılıyordu.ping Çoğunlukla Tek Sayfa uygulamaları için tasarlanmıştır. Bu çerçeve, bir grup geliştirici tarafından geliştirilmiştir. Google kendisi.

Çünkü kibirli destekleri sayesinde Google Geniş bir topluluk forumundan gelen fikirler ve desteklerle, çerçeve aktif kullanım ömrü boyunca güncel tutuldu. Ayrıca o dönemin önde gelen geliştirme trendlerini de bünyesine kattı; bu nedenle bugün hala birçok üretim kodu bu çerçeve üzerinde çalışıyor.

Öncelikle bir terminoloji noktasına açıklık getirmekte fayda var. AngularJS yaygın olarak bir MVC çerçevesi olarak tanımlanır ki bu da yararlı bir başlangıç ​​noktasıdır. Ancak AngularJS ekibinin kendisi farklı bir etiketi tercih etmiştir. MVW (Model-View-Whatever)Çünkü çalışma zamanı, klasik MVC'den ziyade Model-View-ViewModel'e daha yakın davranıyor. Resmi açıklama AngularJS dokümantasyonu Bunu dinamik web uygulamaları için yapısal bir çerçeve olarak adlandırıyor. Bu konuyu açıklığa kavuşturduktan sonra, parçaların nasıl bir araya geldiğine bakalım.

angularjs Archidoku

AngularJS, MVC mimarisini takip eder. MVC çerçevesinin şeması aşağıda gösterilmiştir:

angularjs Archidoku şeması

Üç katmanın her birinin net bir görevi vardır:

• Denetleyici iş mantığına sahip katmanı temsil eder. Kullanıcı olayları, denetleyicinizin içinde depolanan işlevleri tetikler. Kullanıcı olayları denetleyicinin bir parçasıdır.
• Görünümler, son kullanıcılara sunulan sunum katmanını temsil etmek için kullanılır.
• Modeller verilerinizi temsil etmek için kullanılır. Modelinizdeki veriler yalnızca ilkel bildirimlere sahip olmak kadar basit olabilir. Örneğin, bir öğrenci uygulaması sürdürüyorsanız, veri modeliniz yalnızca bir öğrenci kimliği ve bir ada sahip olabilir. Veya yapılandırılmış bir veri modeline sahip olarak karmaşık da olabilir. Bir araba sahipliği uygulaması sürdürüyorsanız, aracın kendisini motor kapasitesi, oturma kapasitesi vb. açısından tanımlamak için yapılara sahip olabilirsiniz.

Pratikte, denetleyici nadiren verileri elle görünüme aktarır. AngularJS modeli izler ve görünümü sizin için yeniler; bu otomatik senkronizasyon, aşağıda açıklanan özellik seti tarafından desteklenir.

AngularJS'in Özellikleri

AngularJS, piyasadaki en güçlü çerçevelerden biri olmasını sağlayan başlıca özelliklere sahiptir:

1. MVC – Çerçeve ünlü konsept üzerine inşa edilmiştir: MVC (Model-Görünüm-Denetleyici). Bu, günümüzün tüm web uygulamalarında kullanılan bir tasarım modelidir. Bu model, iş mantığı katmanını, veri katmanını ve sunum katmanını ayrı bölümlere ayırmaya dayanmaktadır. Farklı bölümlere ayırma, her birinin daha kolay yönetilebilmesi için yapılmıştır.
2. Veri Modeli Bağlama – HTML kontrollerine veri bağlamak için özel kod yazmanıza gerek yok. Bu işlem, AngularJS ile sadece birkaç kod parçacığı eklenerek yapılabilir.
3. Daha az kod yazmak – DOM manipülasyonu gerçekleştirirken birçok JavaSenaryo Herhangi bir uygulama tasarlamak için kod yazılması gerekiyordu. Ancak AngularJS ile, DOM manipülasyonu için yazmanız gereken kod miktarının ne kadar az olduğuna şaşıracaksınız.
4. birim Test yapmak hazır – Tasarımcılar Google AngularJS'i geliştirmekle kalmadı, aynı zamanda AngularJS uygulamaları için birim testleri tasarlamaya yardımcı olan "Karma" adlı bir test çerçevesi de geliştirdi.
5. talimatlar – Şunlar gibi işaretleyiciler: ng-app, ng-model ve ng-tekrar Sıradan HTML öğelerine davranış eklemek.

Bu özelliklerin anlaşılması en kolay olanlar, onları çalıştırdıktan sonradır; bu nedenle bir sonraki bölümde sıfırdan çalışan bir sayfa oluşturulacaktır.

AngularJS Kurulumu ve İlk Uygulamanızı Oluşturma

Veri bağlama hakkında okumak bir şey, çalışmasını izlemek ise bambaşka bir şey. AngularJS'nin paket yöneticisine, paketleyiciye veya derleyiciye ihtiyacı yok, bu nedenle ilk uygulamanız doğrudan sabit diskinizden çalışan tek bir HTML dosyasıdır.

Adım 1) AngularJS kütüphanesini ekleyin

Kütüphaneyi tek bir script etiketiyle bir CDN'den yükleyin. 1.8.3 sürümü AngularJS'nin son sürümüdür, bu nedenle sayfanızı değişken bir sürüme değil, tam olarak bu sürüme sabitleyin.

Adım 2) Uygulama kök dizinini ng-app ile işaretleyin.

`ng-app` yönergesi, AngularJS derleyicisine sayfanın hangi bölümüne sahip olduğunu söyler. Bunu `html` etiketine koymak, tüm belgeyi çerçeveye devreder ve verdiğiniz değer, oluşturmak üzere olduğunuz modülün adını belirler.

Adım 3) Verileri ng-model ve bir ifade kullanarak bağlayın.

`ng-model` yönergesi, bir giriş öğesini kapsamdaki bir özelliğe bağlar ve çift parantezli bir ifade, aynı özelliği sayfanın başka bir yerinde yazdırır. Bağlama iki yönlü olduğundan, typing Bu kutucuk, kendi olay işleyicinize gerek kalmadan başlığı anında günceller.

Adım 4) Mantık için bir denetleyici ekleyin.

Bir kontrol cihazı sade bir şeydir. Java$scope nesnesini alan ve ona başlangıç ​​değerleri atayan betik fonksiyonu. Bu fonksiyonu modüle kaydetmek, ng-controller yönergesi tarafından kullanılabilir hale gelmesini sağlar.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Adım 5) Sayfayı çalıştırın ve sonucu kontrol edin.

Dosyayı index.html olarak kaydedin ve herhangi bir tarayıcıda açın. Başlık ilk başta "Merhaba Dünya!" şeklinde görünür ve her tuş vuruşunda kendini yeniden yazar. Herhangi bir web sunucusu veya derleme adımı söz konusu değildir.

Eğer hiçbir şey görünmüyorsa, tarayıcı konsolunu açın ve CDN betiğinin yüklendiğini ve ng-app içindeki modül adının angular.module'e iletilen adla tam olarak eşleştiğini doğrulayın, çünkü bir uyuşmazlık sessizce başarısız olur. Bu küçük sayfa, aşağıda açıklanan avantajları zaten göstermektedir.

AngularJS'nin Avantajları

AngularJS'in avantajları şunlardır:

• Açık kaynaklı bir çerçeve olduğu için, hata veya sorun sayısının minimum düzeyde olmasını bekleyebilirsiniz.
• İki yönlü veri bağlama – AngularJS, veri ve sunum katmanını senkronize halde tutar. Ek kod yazmanıza gerek yoktur. JavaHTML kodunuzdaki ve veri katmanınızdaki verileri senkronize tutmak için kullanılan komut dosyası kodu. AngularJS bunu sizin için otomatik olarak yapacaktır. Sadece hangi kontrolün modelinizin hangi bölümüne bağlı olduğunu belirtmeniz yeterlidir.
• Yönlendirme – AngularJS, bir görünümden diğerine geçiş anlamına gelen yönlendirmeyi üstlenebilir. Bu, tek sayfa uygulamalarının temel prensibidir; kullanıcı etkileşimine bağlı olarak web uygulamanızdaki farklı işlevlere geçebilir, ancak yine de aynı sayfada kalabilirsiniz.
• AngularJS hem test etmeyi destekler, hem de Birim Testi, ve Entegrasyon Testi.
• AngularJS, yönergeler adı verilen kendi öğelerini sağlayarak HTML'i genişletir. Genel olarak, yönergeler, bir DOM öğesi üzerinde (örneğin bir öznitelik, öğe adı ve yorum veya CSS sınıfı gibi) AngularJS HTML derleyicisine o DOM öğesine belirli bir davranış eklemesini söyleyen işaretleyicilerdir. Bu yönergeler, mevcut HTML öğelerinin işlevselliğini genişletmeye ve web uygulamanıza daha fazla güç kazandırmaya yardımcı olur.

AngularJS'nin Avantajları

Dengeli bir bakış açısı da aynı derecede önemlidir, bu nedenle ödünleşmeler aşağıda açıklanmıştır.

AngularJS'nin Dezavantajları ve Sınırlamaları

Her framework'ün bazı dezavantajları vardır ve AngularJS de istisna değildir. AngularJS uygulamalarını geliştiren ekipler tarafından en sık bildirilen sınırlamalar şunlardır:

• Kendi başına herhangi bir güvenlik katmanı yok. – AngularJS ne kimlik doğrulama ne de yetkilendirme sağlar, bu nedenle her ikisi de sunucu tarafında uygulanmalıdır.
• Tamamen bağımlılık JavaSenaryo – Eğer bir ziyaretçi devre dışı bırakırsa JavaKomut dosyası çalıştırıldığında, sayfa temel işaretleme koduna geri döner ve görüntülenmez.
• Sindirim döngüsü performansı – Değişiklikler, izlenen değerlerin tekrar tekrar karşılaştırılmasıyla tespit edilir; bu nedenle, birkaç bin cilt içeren sayfalar yavaş çalışabilir.
• Dik bir öğrenme eğrisi – Kapsamlar, yönergeler, fabrikalar, hizmetler ve sağlayıcılar örtüşür ve aynı sonuca ulaşmak için genellikle birden fazla yol mevcuttur.
• Arama Motoru Görünürlülüğü – Görünümler tarayıcıda oluşturulur, bu nedenle tarayıcıların sayfaları güvenilir bir şekilde indekslemesi için önceden oluşturma gibi ek çalışmalar gereklidir.
• Başka güncelleme yok. – 31 Aralık 2021'den beri resmi bir yama bulunmadığından, yeni keşfedilen bir güvenlik açığı, ticari bir satıcı tarafından bir düzeltme sağlanmadığı sürece giderilmemiş olarak kalır.

Bu son nokta, çoğu ekibi, aynı adı taşımasına rağmen farklı bir ürün olan halef çerçeveye yönlendiriyor.

AngularJS ve Angular: Aralarındaki Fark Nedir?

AngularJS ve Angular, isimleri birbirine çok benzediği için sıklıkla karıştırılır, ancak farklı dillere, mimarilere ve sürüm serilerine sahip ayrı çerçevelerdir. AngularJS yalnızca bu sayfada açıklanan 1.x serisini ifade eder. Angular ise 2. sürüm ve ondan sonraki tüm sürümleri ifade eder; 2016'da yayınlanan ve hala aktif olarak geliştirilmekte olan tamamen yeniden yazılmış bir sürümdür. Code Planlı göç çalışmaları yapılmadıkça aralarında geçiş yapmaz.

Pratik sonuç şu ki, bir AngularJS denetleyicisi doğrudan bir Angular projesine eklenemez. Geçiş, her denetleyiciyi bir bileşen olarak yeniden yazmak anlamına gelir; bu nedenle bunu bir yükseltme değil, gerçek bir mühendislik çalışması olarak planlayın. Kısacası, AngularJS'yi bir bakım becerisi, Angular'ı ise yeni geliştirme için bir platform olarak ele alın.

SSS