AngularJS vs. jQuery
AngularJS ve jQuery çok farklı ideolojileri benimsiyorlar. Eğer jQuery'den geliyorsanız şaşırtıcı olan bazı farkları bulabilirsiniz. Açısal seni kızdırabilir.
Bu normal, zorla girmelisin. Açısal buna değer.
Büyük fark (TLDR)
jQuery, DOM’in isteğe bağlı bitlerini seçmek ve bunlara geçici değişiklikler yapmak için bir araç takımı sunar. Tek tek sevdiğin her şeyi yapabilirsin.
AngularJS bunun yerine size bir derleyici verir .
Bunun anlamı, AngularJS'nin DOM'unuzun tamamını yukarıdan aşağıya okur ve tam anlamıyla derleyicinin talimatları olarak kod gibi davranmasıdır. DOM'yi geçerken, AngularJS derleyicisine nasıl davranacağını ve ne yapacağını söyleyen belirli yönergeleri (derleyici yönergelerini) arar . Yönergeler, niteliklerle, etiketlerle, sınıflarla ve hatta yorumlarla eşleşebilecek küçük JavaScript nesneleridir.
Açısal derleyici, bir DOM parçasının belirli bir yönergeyle eşleştiğini belirlediğinde, yönlendirme işlevini çağırır, onu DOM öğesini, herhangi bir niteliği, geçerli $ kapsamını (yerel değişken deposu olan) ve diğer bazı yararlı bitleri iletir. Bu nitelikler, Yönerge tarafından yorumlanabilen, nasıl yapılacağını ve ne zaman yeniden çizilmesi gerektiğini söyleyen ifadeler içerebilir.
Direktifler daha sonra kontrolörler, servisler, vb. Gibi ek Açısal bileşenleri çekebilir. Derleyicinin altından çıkan, tamamen şekillendirilmiş bir web uygulamasıdır, kablolu ve kullanıma hazırdır.
Bu, Açısal'ın Şablonla Çalışan olduğu anlamına gelir . Şablonunuz JavaScript'i kullanıyor, tam tersi değil. Bu, rollerin köklü bir tersine çevrilmesi ve son 10 yıldır yazdığımız göze çarpmayan JavaScript'in tam tersi. Bu alışmak biraz zaman alabilir.
Bu, kulağa aşırı reçeteli ve sınırlayıcı gibi geliyorsa, hiçbir şey gerçeklerden daha uzak olamaz. AngularJS, HTML kodunuzu kod olarak kabul ettiğinden , web uygulamanızda HTML düzeyinde ayrıntı düzeyi elde edersiniz . Her şey mümkün ve birkaç kavramsal adım attığınızda çoğu şey şaşırtıcı derecede kolaydır.
Nitty gritty'ye inelim.
İlk olarak, Angular jQuery'nin yerini almaz
Açısal ve jQuery farklı şeyler yapar. AngularJS size web uygulamaları üretmek için bir dizi araç sunar. jQuery temel olarak size DOM'yi değiştirmek için araçlar sunar. Sayfanızda jQuery varsa, AngularJS bunu otomatik olarak kullanır. Değilse, AngularJS, kesilmiş, ancak hala mükemmel bir jQuery sürümü olan jQuery Lite ile birlikte gelir.
Misko, jQuery'yi sever ve onu kullanmanıza itiraz etmez. Bununla birlikte, ilerledikçe kapsamınızın, şablonların ve yönergelerin bir birleşimini kullanarak yaptığınız işin neredeyse tamamını elde edebileceğinizi göreceksiniz ve mümkün olduğunda bu iş akışını tercih etmelisiniz, çünkü kodunuz daha ayrık, daha yapılandırılabilir ve daha fazlası olacaktır. Açısal.
Eğer jQuery kullanıyorsanız, her yere serpmemelisiniz. AngularJS'de DOM manipülasyonu için doğru yer bir yönergededir. Bunlara daha sonra.
Seçicilere Karşı Bilgilendirici Şablonlarla Karşılaşılmaz JavaScript
jQuery tipik olarak dikkatsizce uygulanır. JavaScript kodunuz üstbilgiye (veya altbilgiye) bağlıdır ve bu belirtildiği tek yer burasıdır. Sayfanın parçalarını seçmek için seçiciler kullanıyoruz ve bu parçaları değiştirmek için eklentiler yazıyoruz.
JavaScript kontrol altında. HTML'nin tamamen bağımsız bir varlığı vardır. HTML'niz, JavaScript olmadan bile anlamsal kalır. Onclick özellikleri çok kötü bir uygulamadır.
AngularJS hakkında farkedeceğiniz ilk şeylerden biri, özel niteliklerin her yerde olmasıdır . HTML’niz, esasen steroidler üzerindeClick öznitelikleri olan ng öznitelikleriyle doludur. Bunlar direktiflerdir (derleyici direktifleri) ve şablonun modele bağlı olduğu ana yollardan biridir.
Bunu ilk gördüğünüzde, AngularJS'i eski okul müdahaleci JavaScript'i (başlangıçta yaptığım gibi) olarak yazmak isteyebilirsiniz. Aslında, AngularJS bu kurallara uymuyor. AngularJS'de HTML5'iniz bir şablondur. Web sayfanızı oluşturmak için AngularJS tarafından derlenmiştir.
Bu ilk büyük fark. JQuery için web sayfanız manipüle edilecek bir DOM. AngularJS'e göre, HTML kodunuz derlenecek koddur. AngularJS tüm web sayfanızı okur ve kelimenin tam anlamıyla yerleşik derleyicisini kullanarak yeni bir web sayfasına derler.
Şablonunuz bildirici olmalıdır; anlamı basitçe onu okuyarak net olmalıdır. Anlamlı adları olan özel özellikler kullanıyoruz. Yine anlamlı isimlerle yeni HTML elemanları oluşturduk. Minimum HTML bilgisine sahip ve kodlama yeteneği olmayan bir tasarımcı AngularJS şablonunuzu okuyabilir ve ne yaptığını anlayabilir. Değişiklik yapabilir. Bu Açısal yoldur.
Şablon sürüş koltuğundadır.
AngularJS'i başlatırken ve öğreticilerden geçerken kendime sorduğum ilk sorulardan biri " Kodum nerede?" . JavaScript yazmadım, ama yine de bu davranışa sahibim. Cevap açıktır. AngularJS DOM'yi derlediğinden, AngularJS HTML'nizi kod olarak değerlendirir. Birçok basit durum için, sadece bir şablon yazmak ve AngularJS'nin sizin için bir uygulamada derlemesine izin vermek çoğu zaman yeterlidir.
Şablonunuz uygulamanızı yönetir. DSL olarak kabul edilir . AngularJS bileşenlerini yazarsınız ve AngularJS şablonunuzu yapısına bağlı olarak bunları doğru şekilde çekip doğru zamanda hazır bulundurmaya özen gösterir. Bu, şablonun yalnızca çıktı için olduğu standart bir MVC şablonundan çok farklıdır .
Örneğin XSLT'ye Ruby on Rails'den daha çok benziyor .http://en.wikipedia.org/wiki/Ruby_on_Rails
Bu, alışması gereken radikal bir kontrolün tersidir.
Uygulamanızı JavaScript’ten kaldırmaya çalışmayı bırakın. Şablonun uygulamayı sürmesine izin verin ve AngularJS'nin bileşenlerin birbirine bağlanması ile ilgilenmesine izin verin. Bu aynı zamanda Açısal yoldur.
Anlamsal HTML ve Anlamsal Modeller
JQuery ile HTML sayfanızın anlamsal anlamlı bir içerik içermesi gerekir. JavaScript kapalıysa (bir kullanıcı veya arama motoru tarafından) içeriğiniz erişilebilir durumda kalır.
Çünkü AngularJS, HTML sayfanızı bir şablon olarak ele alır. Şablonun, içeriğinizin tipik olarak API’nizden gelen modelinde saklanması nedeniyle anlamsal olması gerekmiyor. AngularJS, DOM'unuzu semantik bir web sayfası oluşturmak için modelle derler.
HTML kaynağınız artık anlamsal değil, API ve derlenmiş DOM'niz anlamlıdır.
AngularJS'de anlam, modelde yaşar, HTML, yalnızca görüntülemek için sadece bir şablondur.
Bu noktada muhtemelen SEO ve erişilebilirlikle ilgili her türlü sorunuz olur ve haklısınız. Burada açık sorunlar var. Çoğu ekran okuyucu şimdi JavaScript'i ayrıştırır. Arama motorları ayrıca AJAXed içeriğini de indeksleyebilir . Bununla birlikte, pushstate URL'leri kullandığınızdan ve iyi bir site haritanız olduğundan emin olmak isteyeceksiniz. Konuyla ilgili bir tartışma için buraya bakın: https://stackoverflow.com/a/23245379/687677
Endişelerin ayrılması (SOC) ve MVC
Endişelerin ayrılması (SOC), SEO, erişilebilirlik ve tarayıcı uyumsuzluğu da dahil olmak üzere çeşitli nedenlerle yıllarca süren web geliştirme süreci boyunca gelişen bir kalıptır. Bu gibi görünüyor:
- HTML - Anlamsal anlam. HTML tek başına durmalı.
- CSS - Styling, CSS olmadan sayfa hala okunabilir.
- JavaScript - Davranış, komut dosyası olmadan içerik kalır.
Yine, AngularJS kurallarına göre oynamıyor. Bir vuruşta, AngularJS, on yıllık bir bilgeliği ortadan kaldırır ve bunun yerine, şablonun artık biraz anlam ifade etmeyen bir anlam ifade ettiği MVC modelini uygular.
Bu gibi görünüyor:
- Model - Modelleriniz semantik verilerinizi içerir. Modeller genellikle JSON nesneleridir. Modeller $ kapsam denilen bir nesnenin öznitelikleri olarak var. Ayrıca kullanışlı yardımcı program işlevlerini, şablonlarınızın erişebileceği $ kapsamı üzerinde de saklayabilirsiniz.
- Görünüm - Görünümleriniz HTML ile yazılmıştır. Görünüm genellikle anlamlıdır, çünkü verileriniz modelde yaşar.
- Denetleyici - Denetleyiciniz, görünümü modele bağlayan bir JavaScript işlevidir. İşlevi $ kapsamı başlatmaktır. Uygulamanıza bağlı olarak, bir denetleyici oluşturmanız gerekebilir veya gerekmeyebilir. Bir sayfada birçok denetleyiciniz olabilir.
MVC ve SOC aynı ölçeğin zıt uçlarında değildir, tamamen farklı eksenlerdedirler. SOC, AngularJS bağlamında bir anlam ifade etmiyor. Onu unutup devam etmelisin.
Benim gibi, tarayıcı savaşlarında yaşadıysanız, bu fikri oldukça rahatsız edici bulabilirsiniz. Üstesinden gel, buna değer, söz veriyorum.
Eklentiler ve Direktifler
Eklentiler jQuery'yi uzatır. AngularJS Direktifleri tarayıcınızın yeteneklerini genişletir.
JQuery'de, eklentileri jQuery.prototype işlevlerini ekleyerek tanımlarız. Sonra bunları eleman seçerek ve sonuçtaki eklentiyi çağırarak DOM'a bağladık. Fikir, jQuery'nin yeteneklerini genişletmektir.
Örneğin, sayfanızda bir atlıkarınca istiyorsanız, belki bir nav öğesine sarılmış sıralanmamış bir rakam listesi tanımlayabilirsiniz. Sayfadaki listeyi seçmek için biraz jQuery yazabilir ve sürgülü animasyonu yapmak için zaman aşımına uğrayan bir galeri olarak kullanabilirsiniz.
AngularJS'de direktifleri tanımlarız. Yönerge, bir JSON nesnesi döndüren bir işlevdir. Bu nesne, AngularJS'e hangi DOM öğelerini arayacağını ve bunlarda ne gibi değişiklikler yapacağını söyler. Yönergeler, icat ettiğiniz nitelik veya unsurları kullanarak şablona bağlanır. Buradaki fikir, HTML'in yeteneklerini yeni özellikler ve unsurlarla genişletmektir.
AngularJS yolu, yerel görünümlü HTML'nin özelliklerini genişletmektir. Özel özelliklere ve öğelere sahip, HTML'ye benzeyen bir HTML yazmalısınız.
Bir atlıkarınca istiyorsanız, sadece bir
<carousel /> element kullanın , sonra bir şablon çekmek için bir direktif tanımlayın ve bu emicinin çalışmasını sağlayın.
Konfigürasyon anahtarlarına sahip büyük eklentilere karşı çok sayıda küçük yönerge
JQuery ile eğilim, daha sonra çok sayıda değer ve seçeneklerden geçerek yapılandırdığımız lightbox gibi büyük büyük eklentiler yazmaktır.
Bu AngularJS’de bir hatadır.
Bir açılan örnek alın. Bir açılır eklenti yazarken, tıklama işleyicilerinde kodlamaya, belki de yukarı veya aşağı bir chevron eklemek için bir işlev, belki de katlanmamış öğenin sınıfını değiştirmeye, menüyü gizlemeye yarayan şeylere yardımcı olabilir.
Küçük bir değişiklik yapmak istediğinize kadar.
Diyelim, vurgulu açmak istediğiniz bir menünüz var. Şimdi bir sorunumuz var. Eklentimiz, tıklama işleyicimiz için bize bağlandı, bu durumda farklı davranması için bir yapılandırma seçeneği eklememiz gerekecek.
AngularJS'de daha küçük yönergeler yazıyoruz. Açılan yönergemiz gülünç derecede küçük olurdu. Katlanmış durumu koruyabilir ve katlama (), açılma () veya değiştirme () yöntemlerini sağlayabilir. Bu yöntemler, devleti elinde tutan bir boolean olan $ kapsam.menu.visible dosyasını günceller.
Şimdi şablonumuzda bunu bağlayabiliriz:
<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
Mouseover güncellemeniz mi gerekiyor?
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
Şablon, uygulamayı yönlendirir, böylece HTML düzeyinde ayrıntı alanı elde ederiz. Durum istisnalarına göre vaka yapmak istiyorsak, şablon bunu kolaylaştırır.
Kapanış - $ kapsam
JQuery eklentileri bir kapanışta oluşturulur. Mahremiyet içinde gizlilik korunmaktadır. Bu zincirde kapsam zincirinizi korumak size kalmış. Sadece jQuery tarafından eklentiye iletilen DOM düğümleri kümesine, ayrıca kapanışta tanımlanan herhangi bir yerel değişkene ve tanımladığınız tüm kürelere erişebiliyorsunuz. Bu, eklentilerin tamamen kendi kendine yettiği anlamına gelir. Bu iyi bir şeydir, ancak tam bir uygulama oluştururken kısıtlayıcı olabilir. Dinamik bir sayfanın bölümleri arasında veri iletmeye çalışmak bir angarya haline gelir.
AngularJS $ kapsam nesnesine sahiptir. Bunlar, modelinizi sakladığınız AngularJS tarafından oluşturulan ve bakımı yapılan özel nesnelerdir. Bazı direktifler, varsayılan olarak JavaScript prototipik mirasını kullanarak varsayılan $ kapsamını devralan yeni bir $ kapsamı üretecektir. $ Kapsamı nesnesine denetleyicide ve görünümde erişilebilir.
Bu zeki kısım. $ Kapsamı devralma yapısı DOM'nin yapısını kabaca takip ettiğinden, öğeler genel kapsam kapsamına kadar olan (genel kapsam ile aynı olmayan) kendi kapsamlarına ve içeren tüm kapsamlara sorunsuz bir şekilde erişebilir.
Bu, verilerin etrafa aktarılmasını ve verilerin uygun bir seviyede depolanmasını çok daha kolaylaştırır. Bir açılır listenin açılması durumunda, yalnızca $ dropdown kapsamı bunu bilmesi gerekir. Kullanıcı tercihlerini güncellerse, global $ kapsamını güncellemek isteyebilirsiniz ve kullanıcı tercihlerini dinleyen iç içe kapsamlar otomatik olarak uyarılır.
Bu, kulağa karışık gelebilir, aslında, içine bir kez rahatladığınızda uçmak gibi. $ Kapsamı nesnesini oluşturmanıza gerek yok, AngularJS şablon hiyerarşinize göre onu doğru ve uygun şekilde başlatır ve yapılandırır. Ardından AngularJS, bağımlılık enjeksiyonunun büyüsünü kullanarak bileşeniniz için kullanılabilir kılar (bundan sonra daha fazlası).
Manuel DOM değişiklikleri ve Veri Bağlama
JQuery'de tüm DOM değişikliklerinizi elle yaparsınız. Programlama yoluyla yeni DOM öğelerini oluşturuyorsunuz. Bir JSON diziniz varsa ve onu DOM'ye koymak istiyorsanız, HTML'yi oluşturmak ve eklemek için bir işlev yazmalısınız.
AngularJS'de bunu da yapabilirsiniz, ancak veri bağlamadan yararlanmanız önerilir. Modelinizi değiştirin ve DOM, DOM'nuzun otomatik olarak güncelleyeceği bir şablon aracılığıyla bağlı olduğu için herhangi bir müdahale gerekmez.
Veri bağlama, bir öznitelik veya küme ayraç sözdizimini kullanarak şablondan yapıldığından, yapılması çok kolaydır. Bununla ilgili küçük bilişsel ek yükler vardır, böylece kendinizi her zaman yaparken bulabilirsiniz.
<input ng-model="user.name" />
Giriş elemanını ona bağlar
$scope.user.name . Girdiyi güncellemek, geçerli kapsamınızdaki değeri günceller ve bunun tersi de geçerlidir.
Aynı şekilde:
<p>
{{user.name}}
</p>
kullanıcı adını paragrafta yazacaktır. Bu canlı bir bağlayıcıdır, yani
$scope.user.name değer güncellendiyse şablon da güncellenir.
Her zaman Ajax
JQuery'de Ajax araması yapmak oldukça basittir, ancak yine de iki kez düşünebileceğiniz bir şey. Düşünmek için ek bir karmaşıklık ve sürdürülmesi gereken bir senaryo parçası var.
AngularJS'de, Ajax varsayılan go-to-go çözümünüzdür ve neredeyse hiç farketmeden, her zaman olur. Ng-include ile şablonlar ekleyebilirsiniz. En basit özel yönergeye sahip bir şablon uygulayabilirsiniz. Bir Ajax aramasını bir servise sarabilir ve kendinize bir GitHub servisi veya şaşırtıcı bir şekilde erişebileceğiniz bir Flickr servisi oluşturabilirsiniz.
Hizmet Amaçları ve Yardımcı İşlevler
JQuery'de, bir API'den bir yayın çekmek gibi dom ile ilgili olmayan küçük bir görevi başarmak istiyorsak, bunu yapmak için küçük bir işlev yazabiliriz. Bu geçerli bir çözüm, ancak ya bu beslemeye sık sık erişmek istiyorsak? Ya bu kodu başka bir uygulamada tekrar kullanmak istiyorsak?
AngularJS bize servis objeleri veriyor.
Servisler, fonksiyonları ve verileri içeren basit nesnelerdir. Onlar her zaman tekildirler, yani hiçbir zaman onlardan daha fazlası olamaz. Yığın Taşması API'sine erişmek istediğimizi varsayalım, bunu
StackOverflowService yapmak için bir yöntem tanımlayan birini yazabiliriz .
Diyelim ki bir alışveriş sepetimiz var. Alışveriş sepetimizi tutan ve eşya ekleme ve çıkarma yöntemleri içeren bir ShoppingCartService tanımlayabiliriz. Hizmet bir singleton olduğundan ve diğer tüm bileşenler tarafından paylaşıldığından, alışveriş sepetine yazması ve veri alması gereken tüm nesneler tarafından paylaşılması gerekir. Her zaman aynı araba.
Servis nesneleri, uygun gördüğümüzde tekrar kullanabileceğimiz ve kullanabileceğimiz bağımsız AngularJS bileşenleridir. İşlev ve Veri içeren basit JSON nesneleridir. Her zaman tekildirler, bu nedenle bir servisteki verileri bir yerde saklarsanız, aynı servisi talep ederek bu verileri başka bir yerde alabilirsiniz.
AngularJS bağımlılıklarınızı sizin için yönetir. Bir nesne istiyorsanız, sadece ona bakın ve AngularJS sizin için onu alacaktır.
Bunu kullanmaya başlayana kadar, bunun ne kadar büyük bir nimet olduğunu açıklamak zor. AngularJS DI gibi bir şey jQuery içinde yok.
DI, uygulamanızı yazmak ve birlikte kablolamak yerine, her biri bir dize ile tanımlanan bir bileşen kitaplığı tanımladığınız anlamına gelir.
Diyelim ki JSON yayınlarını Flickr'dan çekmeye yönelik yöntemleri tanımlayan 'FlickrService' adlı bir bileşenim var. Şimdi, Flickr'a erişebilecek bir denetleyici yazmak istersem, denetleyiciyi bildirirken yalnızca adıyla 'FlickrService'e başvurmam gerekir. AngularJS, bileşenin somutlaştırılmasına ve kontrol cihazım için kullanılabilir duruma getirilmesine dikkat edecektir.
Örneğin, burada bir hizmet tanımlarım:
myApp.service('FlickrService', function() {
return {
getFeed: function() { // do something here }
}
});
Şimdi, bu servisi kullanmak istediğimde, sadece buna benzer bir adla başvuruyorum:
myApp.controller('myController', ['FlickrService', function(FlickrService) {
FlickrService.getFeed()
}]);
AngularJS, denetleyiciyi başlatmak için bir FlickrService nesnesinin gerekli olduğunu görecek ve bizim için bir tane sağlayacaktır.
Bu, kablo döşemeyi çok kolay hale getirir ve yayılmaya karşı herhangi bir eğilimi ortadan kaldırır. Düz bir bileşen listemiz var ve AngularJS onlara ihtiyacımız olduğunda bunları birer birer veriyor.
Modüler servis mimarisi
jQuery, kodunuzu nasıl organize etmeniz gerektiği hakkında çok az şey söylüyor. AngularJS'nin görüşleri var.
AngularJS size kodunuzu yerleştirebileceğiniz modüller verir. Örneğin, Flickr ile konuşan bir senaryo yazıyorsanız, Flickr ile ilgili tüm işlevlerinizi içine sarmak için bir Flickr modülü oluşturmak isteyebilirsiniz. Modüller diğer modülleri içerebilir (DI). Ana uygulamanız genellikle bir modüldür ve uygulamanızın bağlı olacağı diğer tüm modülleri içermelidir.
Basit bir kod yeniden kullanımı elde edersiniz, Flickr'a dayalı başka bir uygulama yazmak istiyorsanız, sadece Flickr modülünü ve voila'yı ekleyebilirsiniz, yeni uygulamanızdaki Flickr ile ilgili tüm işlevlerinize erişebilirsiniz.
Modüller AngularJS bileşenlerini içerir. Bir modül eklediğimizde, bu modüldeki tüm bileşenler, kendi benzersiz dizeleri tarafından tanımlanan basit bir liste olarak kullanılabilir hale gelir . Ardından, AngularJS'nin bağımlılık enjeksiyon mekanizmasını kullanarak bu bileşenleri birbirine enjekte edebiliriz.
Sonuç olarak
AngularJS ve jQuery düşman değildir. JQuery'i AngularJS içinde çok iyi kullanmak mümkündür. AngularJS kuyularını kullanıyorsanız (şablonlar, veri bağlama, $ kapsamı, direktifler vb.), Aksi takdirde gerekenden çok daha az jQuery'e ihtiyacınız olduğunu göreceksiniz .
Gerçekleşmesi gereken ana şey, şablonunuzun uygulamanızı sürdüğüdür. Her şeyi yapan büyük eklentiler yazmaya çalışmayı bırak. Bunun yerine, tek bir şey yapan küçük yönergeler yazın, sonra bunları birbirine bağlamak için basit bir şablon yazın.
Göze çarpmayan JavaScript hakkında daha az düşünün ve bunun yerine HTML uzantıları açısından düşünün.
Benim küçük kitabım
AngularJS için çok heyecanlandım, çevrimiçi olarak okumak için çok hoş geldiniz diye kısa bir kitap yazdım http://nicholasjohnson.com/angular-book/ . Umarım yardımcı olur.