AngularJS'de Kapsamı Anlama

ile çalıştığımızda AngularJS ve belgeleri okumaya başlarız, gördüğümüz ilk şey kelimedir. DürbünBu, bir kapsam olarak İspanyolca'ya çevrilebilir, ancak bu çerçevede kullanım çok daha geniştir.

Bu nedenle, bunun gerçekten olduğunu anlamalıyız. Dürbün ve uygulamalarımızda nasıl davrandığını, bu şekilde kullanmaya çalışmak arasında bir adım atabiliriz. AngularJS ve sadece kodu tekrarlayarak değil, temel, inançla kullanın.

En ilginç şey şu ki, AngularJS tamamen yerleşik JavaScript, dilin kavramlarını alabilir ve bunları çerçeve araçlarının incelenmesinde ve anlaşılmasında uygulayabiliriz, böylece uygulamalarımız için düşündüğümüz mantığı geliştirebilmemiz için bize ek bir beceri düzeyi verebiliriz.

Gereksinimler


1- Bu öğreticiyi yerine getirmek için aşağıdaki gibi bir web sunucusuna ihtiyacımız var: bataklıkveya gibi ortamlarda bulunuyorsak Linux bir yapılandırma Lamba Bizim için yeterli olacak, fikir içeren dosyalarımıza hizmet edebilmektir. AngularJS ve sadece bir belge açmayın HTML.

2- Örneklerimiz için gerekli kodu yazabilmemizi sağlayan zengin bir metin düzenleyicimiz de olmalı, bu olabilir Yüce metin veya Not defteri ++.

3- Son olarak, AngularJS'nin CDN'si aracılığıyla dahil edilmesini kullanmak için İnternet'e erişimimiz olmalı veya yerel olarak hizmet etmek için çerçeveyi içeren dosyayı indirmiş olmalıyız.

Kapsam nedir?


Basit bir nesneden başka bir şey değil JavaScript özellikleri saklayabilmenin yanı sıra, bir anahtar değer yapısını saklama yeteneğine sahiptir. Bu bize çok yardımcı oluyor çünkü bu açıdan bakarsak programlama dilinin temel kavramlarını uygulayabiliriz.

O nasıl çalışır?AngularJS bu nesneyi otomatik olarak oluşturmaktan ve uygulama yürütmemize gömmekten sorumludur, bu nedenle adı kapsamdır, çünkü modellerin değerlerini değiştirmemize ve bunlara erişmemize izin verir ve ayrıca görünümle iletişim kurmak için bir arayüz görevi görür. Bu yapı, kullanmamıza izin veren şeydir. Dürbün denetleyicilerimizin içinde ve doğrudan görünüm içinde arayabileceğimiz özellikler ekler ve böylece uygulamamız içinde her şeyin bağlı ve ilgili olduğu bir döngü gerçekleştiririz.

Aşağıdaki resimde ölçeğin nasıl olduğunu veya nasıl olduğunu görüyoruz. AngularJS farklı üretiyor Kapsamlar, hepsi türetilmiş olsa da Dürbün dışında bunları içeren öğenin Kök Kapsamı hangi ilk oluşturulacak. Tabii ki, kök kapsamı içinde aynı düzeyde iki öğe varsa, ikisi de ondan miras alacaktır.

BÜYÜT

Prototip nasıl çalışır?


gibi dillerin aksine Java, C++ ve diğerleri, JavaScript kalıtım kavramını farklı şekilde ele alır, bu yüzden ne işe yaradığını öğrenmeliyiz. prototip bu, kodumuza yeni özellikler eklememize izin veren, sınıf oluşturucuları içinde var olan bir yöntemden başka bir şey değildir.

Bu tipik bir şey olmasına rağmen JavaScript bazı sonuçları nasıl elde edebileceğimizi biraz daha anlamamızı sağlarken, Dürbün içinde AngularJS.

Aşağıdaki örnekte, belirli özelliklere veya niteliklere sahip bir sınıfı nasıl oluşturduğumuzu göreceğiz, ardından prototip Sınıfımıza ek bir özellik ekleyebiliriz ve böylece instance'ı yaparak ona erişebiliriz.

İlginç olan, herhangi bir özniteliğin sınıfa özgü olup olmadığını doğrulamamıza yardımcı olan bir yöntem olmasıdır, eğer bu yöntem yanlış bir değer döndürürse, bunun bir kalıtımdan kaynaklanan bir öznitelik olduğunu bileceğiz. prototip. Tüm bunları temsil eden kodu görelim:

 Belge 
Şimdi konsolda nasıl görelim JavaScript aradığımız sonuçları elde ederiz:

Daha sonra yöntemin nasıl olduğunu fark ederiz. hasOWnProperty Sınıfın orijinal niteliklerini veya özelliklerini belirlememize yardımcı olur. Böylece bir sınıfın öznitelik kapasitesini nasıl genişlettiğimizi fark edebildiğimiz için etkin bir kalıtım yaratıp yaratmadığımızı anlayabiliriz.

ÖnemliBu tür kalıtım yoluyla prototip geçerli olan nedir AngularJS farklı yaratırken Kapsamlar ağaçta hareket ettiği bir uygulamadaki bir belgenin GÜNEŞ özelliğin var olup olmadığını ilk nerede tanımlar ng-app, o anda inan $ rootScope, ardından bir denetleyici bulmak bir değişken oluşturur $ kapsam yöntemin uygulanmasından kaynaklanan $ rootScope.new ().
Ve böylece, hemen önceki yapıdan miras kalan, ondan türetilen işlevselliklerini alarak iç unsurları birbiri içinde buldukça yükselir. $ rootScope ve kendi işlevleri.

Aşağıdaki örnekte iki denetleyiciye sahip olduğumuz bir uygulama geliştirdik, bu şekilde kalıtım yoluyla nasıl olduğunu görüyoruz. dürbün aynının farklı özellikleri veya nitelikleri, ebeveynlerin özelliklerine erişebilen ve uygulamanın işlevlerini bu şekilde genişletebilen iç içe geçmiş bir yapı ile sonuçlanana kadar miras alınır. Kodu görelim:

 {{editors}}, {{category}} alanından kitaplara sahip

{{editors}}'ın en popüler kitapları şunlardır:

  • {{kitap}}
Burada örnek, yukarıda anlattıklarımızı, İkinci Kontrolör Editors özelliğini çağırıyoruz ve yazdırdığımızda ana öğenin atanmış değerini taşıdığını görüyoruz. İlk Kontrolör. Son olarak, listede olmayan bir öznitelik veya özellik kitapları ekliyoruz. Dürbün root ve biz yinelemeyi başardık $ kapsam söz konusu denetleyicinin Bir başka ilginç yönü ise, özelliklerin Dürbün root, var olmalarına rağmen, onlara erişebileceğimiz bir kapsamda onları çağırmadık, bu yüzden örneği gördüğümüzde onları tarayıcı ekranında görmeyeceğiz.

Bu biraz abartılı görünebilir, ancak değişkenin nasıl değiştiğini anlamanın en iyi yolu budur. $ kapsam uygulamalarımız içinde çalışır ve böylece çerçeve araçlarından en iyi şekilde yararlanmak için bunu mantığımız içinde uygulayabiliriz. Bir önceki uygulamamızın nasıl göründüğünü ve açıklanan noktaların nasıl yerine getirildiğini aşağıdaki görselde görelim:

Daha sonra kitap listesinin nesneye nasıl ait olduğunu fark ederiz. Dürbün daha içseldir, ancak editoryal özniteliği tanımlamadığımız için ana denetleyicide tanımladığımız özniteliği kullanabiliriz ve kullanımını öngördüğümüz sonucuna varabiliriz. prototip tarafından AngulaJS.

Gelişmiş bir kavram olarak izleyici


Devam etmek ve bir şekilde belirli bir durumu izlemek istediğimiz zamanlar vardır, nesnenin geldiği yer burasıdır. $ izle, bu da tam olarak açıkladığımız şeyi yapmamızı sağlar.

O nasıl çalışır?olarak ekleyerek dinleyici Uygulamamızdaki bazı öğelerden, bu nesne her değişiklik olduğunda kaydedilecektir. Bu şekilde belirlediğimiz bir olay her gerçekleştiğinde koşulları uygulayabiliriz. Örneğin, bir alışveriş sepeti oluşturduğumuzda, kullanıcı birden fazla ürün eklerse bir mesaj gösterebiliriz veya birkaç kez satın almaya çalışırsa bir sorunu olup olmadığını sorarız.

Bu ilk bakışta çok gelişmiş bir şey gibi görünebilir, ancak AngularJS fazla karmaşıklaştırmadan elimize alıyor. Nesne $ izle Sadece belirli bir değeri gözlemlemekle kalmaz, aynı zamanda birden fazla değeri aynı anda dikkate alma ve böylece önceki forma göre daha karmaşık sonuçlar elde etme imkanı veren bir koleksiyon ile bunu yapmasını sağlayabiliriz. .

Bununla bu öğreticiyi bitirdik, neyin ne olduğunu anlamayı öğrendik. Dürbün içinde AngularJS ve bunun için en soyut kavramlara güvendik. JavaScript, böylece bu dilin bize bahsettiğimiz aynı çerçeve kadar gelişmiş işler elde etmek için tüm araçları sağladığını, ancak kavramlarına hakim olursak araçları daha üstün bir şey kullanabileceğimizi gösteriyor.

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.

Arkadaşlarınızla sayfasını paylaşan sitenin gelişimine yardımcı olacak

wave wave wave wave wave