ilk AngularJS uygulamanızı oluşturmak o kadar zor görünmüyor, ancak nereden başlayacağınızı bilmiyorsunuz. Bu kılavuzda, başlamayı mümkün olduğunca basit hale getireceğim.


İlk olarak, web uygulamaları oluşturmanın zorluklarını ve bu sorunları çözmek için AngularJS’yi nasıl kullanabileceğimizi tartışacağım, Sonra AngularJS projesinin nasıl sıfırdan oluşturulacağına bakacağız.

Web Uygulaması Zorlukları

genel web sitesinde bir istemci-sunucu mimarisi kullanılır. yani iki ana bölüm var

  • cihazınız veya web tarayıcınız.
  •  web sitesinin barındırıldığı sunucu.

Tarayıcıya bir URL yazarsınız ve sunucu, tarayıcınıza istenen web sayfasını görüntülemek için HTML, CSS ve Javascript gönderir.

Sayfadaki düğmelere ve bağlantılara tıklayarak sayfayla etkileşimde bulunabilirsiniz. temelde her tıkladığınızda tamamen yeni bir sayfa istersiniz.

Web sayfaları statik olduğunda bu iyiydi. Artık, web sayfaları etkileşimli kullanıcı arabirimleriyle ve geleneksel modelin sorunlara girdiği tam uygulamalar olabilir. Her tıkladığınızda, tüm sayfa yeniden yüklendi. Bu, bir sayfayı yavaş ve yanıt vermez hale getirir, çünkü değiştirilmesi gerekmeyen parçalar olduğundan, burada ihtiyacımız olan sadece sunucumuzdan yeni bilgiler istenmesidir. Gerisi statik kaldı.

Tek Sayfalı Web Uygulamaları

bu, tek bir sayfa uygulaması oluşturmakla ilgilidir, bu nedenle ziyaret ettiğinizde tarayıcınız yalnızca tek bir sayfa gönderir, bu daha hızlı ve daha güzel bir web uygulamasıyla sonuçlanır, ayrıca birçok işletme bu yaklaşımı büyük şirketler ve girişimler dahil olmak üzere web uygulaması projeleri için kullanır.

AngularJS Kimlere Uyuyor?

AngularJS, Tek Sayfa Uygulamaları oluşturmak için bir ön uç çerçevedir. HTML’nin daha dinamik olmasına yardımcı olur ve bu tür uygulamalar oluşturmak için uygundur. Google’ın desteğiyle açık kaynak kodlu.

Açısal, daha iyi web uygulamaları geliştirmemize yardımcı olacak bir araç çerçevesi.

Bu Eğitim İçin Bilmeniz Gerekenler

Kodlamadan önce, hakkında biraz bilgi sahibi olmalısınız.

-1) HTML -2) CSS -3) Javascript Çerçeveleri -4) jQuery

AngularJS Önemli Kavramlar

kendi AngularJS uygulamanızı oluşturmadan önce bilmeniz gereken birkaç kavram:.

MVC, kullanıcı arayüzlerini uygulamak için bir tasarım modelidir. Kodumuzdaki mantığı görüntülenme biçiminden ayırır. Bunu yaparak, çok zarif ve test edilebilir bir uygulama elde ederiz..

2 Yönlü Veri Bağlama

JQuery ile, diğer bilgiler değiştirildiğinde ama daha karmaşık olduğunda sayfamızın bazı bölümlerini otomatik olarak güncellemek mümkündür. AngularJS, 2 yönlü veri bağlama adı verilen harika bir özelliğe sahiptir. Bir şeyi birbirine bağlamanızı sağlar, böylece bir şey değiştiğinde diğeri de aynı anda yapar.

Direktifleri

Daha önce bahsetmiştim ki AngularJS HTML’yi genişletiyor. yani bitti direktifler, AngularJS yönergeleri ng- ile başlayan HTML özellikleridir. Bunlar Angular’a belirli bir davranışı bir HTML öğesine bağlamasını söyler.

Bu yönerge Angular’a HTML sayfamızı bir uygulama olarak ele almasını söylüyor.

Örnek Bir AngularJS Projesi Oluşturma

Şimdi, ilk AngularJS uygulamasını oluşturacağız. Bu basit uygulama adınızı soracak, aynı zamanda farklı bir satırda görüntülenecek, daha önce bahsettiğimiz iki kavramı kullanacağız 2 yönlü veri bağlama ve direktifler.

Kurulum

Projemiz bir dosyaya sahip olacak index.html.

index.html

.
.
.
.
Ad: .

.

Merhaba! Adınız

.
.

Ardından, AngularJS kullanarak bazı işlevler ekleyeceğiz.

AngularJS’ye ekleme

Öncelikle AngularJS çerçevesini projemize dahil etmemiz gerekecek, bunu yapmanın en kolay yolu barındırılan sürümü kullanmaktır. bu komut dosyası etiketlerini başlık etiketlerine ekleyerek .

.
.

AngularJS şimdi uygulamamıza yüklendi, bazılarını eklemeye başlayacağız Direktifleri ng – etiketlerini kullanarak ne yapılacağını bilmek .

Direktif Ekleme

Etikette ng-app eklememiz gerekiyor.

bu AngularJS’ye html sayfamızın bu bölümünde etkin olmasını söyler.

Verileri Birlikte Bağlama

Biz istiyoruz “Merhaba! Adınız” yazdığımız adı görüntülemek için aynı anda yazıyoruz. JQuery ile bu işlevler ve dinleyicilerle karmaşık olacaktır. Ama bu AngularJS’nin gücüdür, işleri basitleştirir, tek yapmamız gereken bağlamak metin giriş alanımızdan “Merhaba! Adınız ”alanına girdiğinizde, bu ikinci gösterimi ilk alana yazdığımız metnin aynısını yapar.

Önce ng-modelini ekliyoruz ="Adınız" etiketimize.

ardından, “Adınız” metnini

{{adınız}} olan etiketler.

Merhaba! {{Adınız}}!

Test Et

Ad alanına yazdıklarınız aşağıda otomatik olarak görüntülenmelidir.

Sonunda kodun tamamı burada.

.
.
.
.
.
.
.
Ad: .
.
.

Merhaba! {{Adınız}}!

.
.
.

Bu en iyi 3 web barındırma hizmetlerine göz atın

FastComet

Başlangıç ​​fiyatı:
$ 2.95


Güvenilirlik
9.7


Fiyatlandırma
9.5


Kullanıcı dostu
9.7


Destek
9.7


Özellikleri
9.6

Yorumları oku

FastComet’i ziyaret edin

A2 Hosting

Başlangıç ​​fiyatı:
$ 3,92


Güvenilirlik
9.3


Fiyatlandırma
9.0


Kullanıcı dostu
9.3


Destek
9.3


Özellikleri
9.3

Yorumları oku

A2 Hosting’i ziyaret edin

ChemiCloud

Başlangıç ​​fiyatı:
$ 2.76


Güvenilirlik
10


Fiyatlandırma
9.9


Kullanıcı dostu
9.9


Destek
10


Özellikleri
9.9

Yorumları oku

ChemiCloud’u ziyaret edin

İlgili Nasıl Yapılır Makaleleri

  • Statik Kaynaklardan Sorgu Dizelerini kaldırarak Web Sitesi Hızını Artırma
    orta düzey
  • Linux VPS veya Dedicated Sunucunuza Node.js Kurulumu
    orta düzey
  • Node.js ve Express Kullanarak Basit Bir Web Sunucusu Nasıl Oluşturulur
    orta düzey
  • WordPress Temasının JavaScript’ini Daha İyi Performans İçin Altbilgiye Taşıma
    uzman
  • Drupal 8’de Hareketli Slayt Gösterisi Nasıl Oluşturulur
    orta düzey
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me