Menü

AngularJS Kullanarak Tek Sayfalı Uygulama Oluşturun (Örnekli Eğitim)

  • Ana
  • Diğer
  • AngularJS Kullanarak Tek Sayfalı Uygulama Oluşturun (Örnekli Eğitim)

build single page application using angularjs

Sorunları Ortadan Kaldırmak Için Enstrümanımızı Deneyin

AngularJS Kullanarak Tek Sayfa Uygulama SPA'sı Oluşturun:

AngularJS hakkında bilmemiz gereken her şey önceki eğitimimizde açıklanmıştır. Bu eğitimde, AngularJS kullanarak tek sayfalı bir uygulama geliştirme hakkında daha fazla bilgi edineceğiz.

Netflix'i biliyor musunuz? Web sitesini hiç ziyaret ettiniz mi?

Cevabınız 'Evet' ise, o zaman tek sayfalık bir uygulamanın nasıl göründüğünü biliyorsunuzdur! Keşfedin AngularJS için Eksiksiz Kılavuz AngularJS hakkında net bir bilgi edinmek için.

AngularJS kullanan tek sayfalı uygulama

Ayrıntılandırmama izin verin!

Netflix, web uygulamalarındaki kullanıcı işlevlerini zenginleştirmek için istemci tarafı çerçevesinde AngularJS kullanır.

Kullanıcı arayüzlerini çok basit hale getirdiler. SPA (Tek Sayfalı Uygulama). Bu, Netflix içindeki gezinmenin tüm sayfayı yenilemeden gerçekleştirildiği anlamına gelir.

Ne öğreneceksin:

Tek Sayfa Uygulamaların Avantajları

Aşağıda verilenler, Tek Sayfa Uygulamalarının birkaç avantajıdır.

  • Geliştirilmiş kullanıcı deneyimi.
  • Daha az bant genişliği kullanıldığı için web sayfaları daha hızlı yenilenir.
  • Uygulamanın (index.html, CSS paketi ve javascript paketi) üretimde dağıtımı daha kolay hale gelir.
  • Demetleri birden çok parçaya bölmek için kod bölme yapılabilir.

Neden AngularJS Kullanarak SPA Geliştirmelisiniz?

Günümüzde piyasada ember.js, backbone.js, vb. Gibi birçok javascript uygulaması bulunmaktadır. Ancak yine de birçok web uygulaması, SPA'lar oluşturmak için geliştirmelerinde AngularJS'i kullanır.

Aşağıda AngularJS'nin neden açık bir kazanan olduğuna dair birkaç neden verilmiştir:

# 1) Bağımlılık Yapmayın

AngularJS'den farklı olarak, backbone.js, undercore.js ve jQuery'ye bağımlıdır. Oysa ember JS'nin gidonlara ve jQuery'ye bağımlılıkları vardır.

uçtan uca test senaryoları örnekleri

# 2) Yönlendirme

AngularJS kullanılarak oluşturulan web sayfaları arasında gezinme, diğer javascript çerçeveleri kullanılarak oluşturulanlara kıyasla çok basittir. AngularJS'de kullanılan yönergeler hafiftir, bu nedenle AngularJS'nin performans ölçütleri kayda değerdir.

# 3) Test

Uygulama AngularJS kullanılarak oluşturulduktan sonra, selenyum kullanılarak kalite güvencesi için otomatik test gerçekleştirilebilir. Bu, AngularJS geliştirme kullanılarak oluşturulmuş uygulamaların harika özelliklerinden biridir.

angularJS özellikleri

(resim kaynağı edureka.co)

# 4) Veri Bağlama

AngularJS, iki yönlü veri bağlamayı destekler, yani model her güncellendiğinde, AngularJS MVC mimarisini takip ettiğinden görünüm de güncellenir.

Bu nedenle, veriler kullanıcı tarafından tercihlerine göre görüntülenebilir.

# 5) Tarayıcı Desteği

AngularJS, IE sürüm 9 ve üzeri dahil olmak üzere çoğu tarayıcıda desteklenmektedir. Cep telefonlarında, tabletlerde ve dizüstü bilgisayarlarda da çalışmaya uyum sağlayabilir.

# 6) Çeviklik

AngularJS çevikliği destekler, bu da işletmelerin rekabetçi çalışma ortamlarına girdiklerinde yeni taleplerini karşılayabileceği anlamına gelir. Denetleyiciler, bu isteklere hizmet vermek için MVC mimarisinde uygulanabilir.

AngularJS'de, hızlı uygulama geliştirme için hazır olan yaklaşık 30000 modül vardır. Bir geliştirici mevcut bir uygulamayı özelleştirmek istediğinde, tüm uygulamayı sıfırdan oluşturmak yerine zaten mevcut olan modülleri kullanabilir ve kodu değiştirebilir.

Dahası, AngularJS'e katkıda bulunanlar ve uzmanların sayısı çoktur, bu nedenle tartışma forumlarına gönderdiğiniz tüm sorularınıza hızlı yanıtlar alırsınız.

AngularJS Kullanarak Tek Sayfalı Uygulama Nasıl Geliştirilir?

Aşağıda, AngularJS kullanarak bir SPA geliştirmenin çeşitli adımları listelenmiştir.

Aşama 1: Modül Oluşturun

Hepimiz AngularJS'nin MVC mimarisini takip ettiğini biliyoruz. Bu nedenle, her AngularJS uygulaması denetleyicilerden, hizmetlerden vb. Oluşan bir modül içerir.

var app = angular.module('myApp', ());

Adım 2: Basit Bir Denetleyici Tanımlayın

app.controller('FirstController', function($scope) { $scope.message = 'Hello from FirstController'; });

3. Adım: AngularJS komut dosyasını HTML koduna ekleyin

(1. adımda oluşturulan) modülü ng-uygulaması öznitelik ve denetleyici (2. adımda tanımlanmıştır) ng kontrolörü öznitelik.

{{message}}

First Second Third

(Angular, ng-şablon yönergeleri tarafından tanımlanan şablonları algıladığında, içeriğini şablon önbelleğine yükler ve içeriklerini almak için Ajax isteği gerçekleştirmez.)

HTML localhost'ta çalıştırıldıktan sonra aşağıdaki sayfa görüntülenir.

ilk web sayfası

Köprü bağlantılarının Birinci ikinci üçüncü sayfada yönlendiriciler bulunur ve üzerlerine tıkladığınızda, yenilenmeden karşılık gelen web sayfalarında gezinme gerçekleşir.

ikinci web sayfası

Üçüncü web sayfası

Bu kadar! Bu blogda gösterildiği gibi basit bir SPA oluşturabileceğinizi umuyoruz. Çıktıyı başarılı bir şekilde aldıktan sonra, aynı satırlarda karmaşık SPA'ları deneyebilirsiniz.

Sonuç

Tek Sayfa uygulamaları günümüzde çok popülerdir ve Netflix gibi markalar bunları tercih etmektedir.

SPA'lar geliştiriyorsanız, AngularJS bariz bir seçimdir. Bununla birlikte, AngularJS'nin yeni sürümü, yani Angular daha fazla işlev sunar. Aksi takdirde, Node JS uygulama geliştirme vb. Gibi çeşitli teknolojiler vardır.

Açısal Sürümü Yükseltme hakkında bilgi edinmek için yaklaşan öğreticimizi takip etmeye devam edin!

PREV Eğitimi | SONRAKİ Eğitici

Önerilen Kaynaklar

^