Menü

İlk AngularJS Örneğimizle birlikte AngularJS Direktifi

  • Ana
  • Diğer
  • İlk AngularJS Örneğimizle birlikte AngularJS Direktifi

angularjs directive with our first angularjs example

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

First AngularJS Örneğiyle AngularJS Direktifi:

Biz vardı AngularJS'ye kısa bir giriş önceki eğitimimizde. Bu eğitim, size AngularJS hakkında bilmeniz gereken önemli gerçekleri açıklayacaktır.

AngularJS JavaScript tabanlı açık kaynaklı bir web uygulama çerçevesidir.

Google Corporation ve büyük bir topluluk tarafından sürdürülmektedir. AngularJS, tek sayfalı uygulamaları formüle etmek için karşılaşılan çeşitli dezavantajlara bir cevaptır.

Baştan sona okuyun Tüm AngularJS serisi AngularJS konsepti hakkında derinlemesine bilgi için.

c ++ 1 ile 3 arasında rastgele sayı

AngularJS Direktifi ve Örneği

AngularJS uygulama çerçevesi bir şablon görevi görür ve web uygulamalarının geliştirilmesi sırasında karşılaşılan zorlukları azaltabilir.

Ne öğreneceksin:

AngularJS'ye Genel Bakış

AngularJS, Google tarafından 20'de yayınlandıinciEkim 2010 ve bugün çeşitli tek sayfalı arayüz uygulamaları için önemli bir çerçeve haline geldi.

Bu, AngularJS'nin çığır açan bir hızla teknolojik gelişmeye rağmen zeminini korumasının nedenidir. Çapraz platform arayüz tabanlı sistem, onu daha verimli hale getirir.

AngularJS, platformlar arası mobil uygulamalar için kullanılan bir çerçeve olan Apache Cordova'yı tamamlar ve ona fayda sağlar. Deneyimi iyileştirme ve web uygulamalarının test edilmesini ve geliştirilmesini basitleştirme vizyonuna sahiptir ve AngularJS uygulama geliştirmeleri için sağlam bir çerçeve sağlar.

Neden AngularJS Kullanmalı?

Aşağıda, web uygulaması geliştirmede AngularJS'nin kullanılması gereken çeşitli özellikler ve nedenler listelenmiştir.

  1. Bağlanma verileri: Platform, model ve görünüm içerikleri arasında otomatik veri senkronizasyonunu sağlar ve sonuç olarak zamandan ve emekten büyük ölçüde tasarruf sağlar.
  2. Denetleyici: Bunlar, belirli bir kapsama bağlı JavaScript'tir.
  3. Hizmetler: AngularJS birçok yerleşik hizmete sahiptir. Örneğin $ https
  4. Filtreler: Bu, bir diziden bir öğe alt kümesi seçmeye yardımcı olur ve onu yeni bir diziye döndürür.
  5. Direktifler: Özellikler, CSS öğeleri, vb. Gibi DOM öğeleri üzerindeki işaretçilerdir. Bunlar özel HTML etiketleri olarak kullanılabilir.
  6. Yönlendirme: Tek sayfalı uygulamalar oluşturmaya yardımcı olur. URL'de # işaretinden sonra belirtilir ve uygulamanızdaki farklı içerik için farklı URL'ler oluşturmanıza olanak sağlar.
  7. MVC: Model, Görünüm ve Denetleyici anlamına gelir. Bu bir tasarım modelidir ve bir uygulamanın Model, Görünüm ve Denetleyici gibi farklı bölümlere ayrılması için kullanılır.
  8. Derin bağlantı: Uygulama çerçevesinin bu özelliği, uygulamanın durumunu yer imi için URL'de kodlamanıza yardımcı olur. Daha sonra uygulama, aynı durumdaki URL'den de geri yüklenebilir.
  9. Bağımlılık Enjeksiyonu: AngularJS ayrıca, geliştiricinin geliştirme ve test sürecini daha kolay, uyumlu ve anlaşılır hale getirmesine yardımcı olabilecek yerleşik bir bağımlılık enjeksiyon alt sistemine sahiptir.
  10. Dürbün: Bunlar, denetleyici ve görünüm arasında tutkal görevi gören nesnelerdir.

AngularJS Nasıl Kullanılır?

Kişisel olarak, bugün piyasada AngularJS'den daha iyi bir ön uç web uygulaması geliştirme çerçevesi olmadığına inanıyorum.

AngularJS'nin nasıl kullanılacağına dair öğreticiler sinir bozucu derecede karmaşık değil ve gerçekten de onları takip etmeyi oldukça kolay buldum. İki yönlü bir bağlama sistemi, şablon oluşturma olanakları, modülerleştirme, bağımlılık enjeksiyon sistemi, AJAX İşleme işlevi ve bu çerçevenin diğer özelliklerinden de yararlanabilirsiniz.

Kodlamaya başlamadan önce, MVC kavramı (Model, View ve Controller), 'Hello World' komut dosyası ve AngularJS'nin çeşitli özellikleri hakkında bilgi sahibi olmalısınız.

AngularJS Direktifleri

AngularJS size çok sayıda direktifler çeşitli HTML öğelerini uygulama verileriyle ilişkilendirmenize olanak tanır. Anahtar kelime ile başlayan temel özelliklerdir. ng- .

AngularJS'i kullanırken herhangi bir sayfaya eklemeniz gereken en önemli yönerge aşağıda verilmiştir.

ng-app -

Bu, AngularJS uygulamasının başlangıç ​​noktasıdır ve gövde bölümü öğesi gibi sayfanın geri kalan kısmını saran herhangi bir öğeye eklenmelidir. AngularJS, sayfa her yüklendiğinde bu yönü arar ve koddaki tüm çeşitli yönergeleri otomatik olarak değerlendirme eğiliminde olur.

AngularJS direktifleri şunları içerir:

# 1) ng-uygulaması :Bu, AngularJS uygulamasını başlatmak için kullanılır. AngularJS uygulamasını içeren web sayfası yüklendiğinde, kök öğesini tanımlayarak uygulamayı otomatik olarak önyükler. HTML kodunuzda yalnızca bir ng-app yönergesi kullanılmalıdır.

Ancak, HTML kodunda birden fazla ng-app yönergesi bulunursa, o zaman ilk görünüm kullanılacaktır.

Sözdizimi:

{body of the HTML code}

# 2) ısı :Bu, uygulamayı başlatmak için kullanılır.

Başlatma amacıyla değişkenlerle ilişkilendirilmesi gereken bir dizi değer sağlar. Değişkenlerin başlatılması genellikle proje içindeki belirli işlevler aracılığıyla gerçekleştiğinden, bu yönerge sıklıkla kullanılmaz.

Sözdizimi:

# 3) ng-denetleyici: Değişkenlerin başlatılmasının bir işleve dayalı olarak yapılması gerektiğinde kullanılır; yani, değişkenlerin her birinin fonksiyon mantığına göre başlatılması gerekir. AngularJS, ng-controller direktifinde belirtilen fonksiyonu bir nesneyle çağırır.

Sözdizimi:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng modeli :Bu, AngularJS değerlerini uygulama tarafından sağlanan kontrollere bağlamak için kullanılır. Spesifik olmak gerekirse, kontrolör ve model aracılığıyla giriş tarafından getirilen veriler, kullanıcıya sunulacak görünüme (w.r.t. MVC modeli) bağlanacaktır.

Sözdizimi:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show ve ng-hide: Bu komutlar, CSS görüntüleme stilini ayarlayarak elde edilen öğeleri gizler ve gösterir.

AngularJS ayrıca Özel yönergeler tanımlamanıza izin verir. HTML'nin işlevselliğini genişletmek için kullanılırlar ve 'yönerge' işlevi kullanılarak tanımlanırlar. Sadece etkinleştirildikleri elemanı değiştirirler.

AngularJS Cheat Sheet benim için hayat kurtarıcı oldu. Hile Sayfasında kontrol edebileceğiniz birkaç başka yönerge vardır. AngularJS kullanarak özel yönergeleri nasıl oluşturacağınızı bile öğrenebilirsiniz. Birçok sorunu basitleştirmek için AngularJS platformunun tüm talimatlarını ve yönergelerini Cheat Sheet üzerinde buldum.

AngularJS Örneği

Basit bir AngularJS örneği şu şekilde yazılabilir:

Bir HTML dosyası oluşturmanız gerekiyor, Örneğin , açısaljsexample.html Aşağıda gösterildiği gibi.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

Yukarıdaki Örnekte, komut dosyası şunları temsil eder: AngularJS JavaScript.

AngularJS platformunda günlük kullandığınız kaç uygulamanın geliştirildiğini öğrenince şaşıracaksınız.

İşte birkaç isim:

  • Gardiyan
  • PayPal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Serbest çalışan
  • iStock

Bu çerçeveyi kullanmayı öğrenerek hangi yüksekliğe ulaşabileceğiniz yukarıdaki isimlerden anlaşılmaktadır. Bu siteler, oyunlarının en üstündedir ve başarılarının büyük bir kısmı, AngularJS'de geliştirildikleri için kesinlikle sitelerin verimliliğine gider.

Sonuç

Mobil ve hatta web siteleri için tek sayfalı uygulamalar oluşturmak ve geliştirmek istiyorsanız, bir zamanlar olduğum gibi - o zaman başka yere bakmanıza gerek yok.

AngularJS, bu site uygulamaların geliştirilmesine çok daha rahat ve uyumlu hale gelmesine yardımcı olduğu için sizin için tek durak noktasıdır. Sadece yeni başlayanlar için harika değil, aynı zamanda daha derinlere indikçe, deneyimle öğrenme ve harika uygulamalar geliştirme eğiliminde olacaksınız.

Bu arada, daha yeni sürümlere geçmeniz durumunda, çok fazla çaba harcamanıza gerek kalmaz. Yalnızca birkaç yeni komut öğrenerek ve yeni ince ayarları anlayarak, yeni sürümlerde de uygulama geliştirmeye başlayabilirsiniz.

AngularJS kullanarak tek sayfalı web uygulamaları geliştirme hakkında daha fazla bilgi edinmek için yaklaşan öğreticimizi izleyin.

PREV Eğitimi | SONRAKİ Eğitici

Önerilen Kaynaklar

^