Ben gelişen istemci tarafı uygulamaları aşina olduğum varsayalım jQuery , ama şimdi kullanmaya başlamak istiyorum angularjs . Gerekli paradigma değişimini tarif edebilir misiniz? Bir yanıtı düzenlemenize yardımcı olabilecek birkaç soru:

• İstemci tarafı web uygulamalarını nasıl farklı şekilde tasarlar ve tasarlarım? En büyük fark nedir?
• Ne yapmayı / kullanmayı bırakmalıyım; Bunun yerine ne yapmaya / kullanmaya başlamalıyım?
• Sunucu tarafında dikkat edilmesi gereken noktalar / kısıtlamalar var mı?

Ben arasına ayrıntılı bir karşılaştırma aramıyorum jQueryve AngularJS.

1. Sayfanızı tasarlamayın ve ardından DOM manipülasyonları ile değiştirin

JQuery'de bir sayfa tasarlar ve ardından dinamik hale getirirsiniz. Bunun nedeni, jQuery'nin büyütme için tasarlandığı ve bu basit öncülden inanılmaz derecede büyüdüğü için.

Ancak AngularJS'de, baştan sona mimariniz düşünülerek başlamalısınız. "Bu DOM parçasına sahibim ve bunu X yapmak istiyorum" diye düşünerek başlamak yerine, başarmak istediğiniz şeyle başlamanız, daha sonra başvurunuzu tasarlamaya ve son olarak da görüşünüzü tasarlamaya devam etmeniz gerekir.

2. Açısal jS ile jQuery artırmayın

Benzer şekilde, jQuery'nin X, Y ve Z yaptığı fikriyle başlamayın, bu yüzden modeller ve kontrolörler için AngularJS'yi ekleyeceğim. Bu, yeni başladığınızda gerçekten caziptir, bu yüzden her zaman yeni AngularJS geliştiricilerinin en azından "Açısal Yol" yapmaya alışana kadar jQuery kullanmamalarını tavsiye ederim.

Burada ve posta listesinde birçok geliştirici gördüm bu karmaşık çözümler daha sonra $applykafa karıştırıcı ve kıvrık bir dizi geri çağrılar ve s ile AngularJS yapıştırmak 150 veya 200 satır kod jQuery eklentileri ile oluşturmak ; ama sonunda işe koyuyorlar! Sorun, çoğu durumda jQuery eklentisinin AngularJS'de kodun bir kısmında yeniden yazılabilmesidir, burada aniden her şey anlaşılabilir ve anlaşılır hale gelir.

Sonuç olarak şudur: çözüm yaparken önce "AngularJS'de düşünün"; bir çözüm düşünemiyorsanız, topluluğa sorun; tüm bunlardan sonra kolay bir çözüm yoksa, o zaman jQuery ulaşmak için çekinmeyin. Ama jQuery'nin koltuk değneği olmasına izin vermeyin, aksi takdirde AngularJS'de asla ustalaşmazsınız.

3. Daima mimarlık açısından düşünün

O Birinci biliyorum tek sayfalık uygulamaları vardır uygulamalar . Onlar konum değil web sayfaları. Bu yüzden bir istemci tarafı geliştirici gibi düşünmenin yanı sıra bir sunucu tarafı geliştirici gibi düşünmemiz gerekiyor . Uygulamamızı bireysel, genişletilebilir, test edilebilir bileşenlere nasıl ayıracağımızı düşünmeliyiz.

Öyleyse bunu nasıl yapıyorsun? "AngularJS'de nasıl düşünüyorsunuz?" İşte jQuery ile çelişen bazı genel ilkeler.

Görünüm "resmi kayıttır"

JQuery'de, görünümü programlı olarak değiştiriyoruz. ulBenzer şekilde tanımlanmış bir açılır menümüz olabilir :

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

JQuery'de, uygulama mantığımızda, bunu aşağıdaki gibi bir şeyle etkinleştiririz:

$('.main-menu').dropdownMenu();

Sadece görünüme baktığımızda, burada herhangi bir işlevsellik olduğu hemen belli değil. Küçük uygulamalar için sorun değil. Ancak önemsiz olmayan uygulamalar için işler hızla kafa karıştırıcı ve bakımı zorlaşır.

Yine de AngularJS'de görünüm, görünüme dayalı işlevselliğin resmi kaydıdır. Bizim ulbeyanı artık şöyle görünecektir:

<ul class="main-menu" dropdown-menu>
    ...
</ul>

Bu ikisi aynı şeyi yapar, ancak AngularJS sürümünde şablona bakan herkes ne olması gerektiğini bilir. Ne zaman geliştirme ekibinin yeni bir üyesi devreye girerse, buna bakabilir ve daha sonra üzerinde işlem adı verilen bir direktif olduğunu bilirdropdownMenu ; doğru cevabı sindirmesi veya herhangi bir kodu gözden geçirmesi gerekmez. Görüş bize ne olması gerektiğini anlattı. Çok daha temiz.

AngularJS'de yeni olan geliştiriciler genellikle aşağıdaki gibi bir soru sorar: Belirli bir türdeki tüm bağlantıları nasıl bulurum ve bunlara bir yönerge eklerim. Geliştirici, cevap verdiğimizde her zaman şaşkına dönüyor: Yapmıyorsunuz. Ama bunu yapmamanızın sebebi, bu yarı jQuery, yarım AngularJS gibi ve iyi değil. Burada sorun geliştirici AngularJS bağlamında "jQuery" yapmaya çalışıyor olmasıdır. Bu asla işe yaramayacak. Görünümü ise resmi kayıt. Bir direktifin dışında (bu konuda daha fazlası aşağıdadır), DOM'yi asla değiştiremezsiniz. Ve direktifler görünümde uygulanır , bu yüzden niyet açıktır.

Unutmayın: tasarlamayın ve işaretleyin. Mimar ve sonra tasarım yapmalısınız.

Bağlanma verileri

Bu, AngularJS'nin en müthiş özelliklerinden biridir ve önceki bölümde bahsettiğim DOM manipülasyonlarının türlerini yapma ihtiyacını ortadan kaldırmaktadır. AngularJS, görünümünüzü otomatik olarak güncelleyecektir, böylece gerek kalmaz! JQuery'de olaylara yanıt veriyoruz ve ardından içeriği güncelliyoruz. Gibi bir şey:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

Şuna benzer bir görünüm için:

<ul class="messages" id="log">
</ul>

Endişeleri karıştırmanın yanı sıra, daha önce bahsettiğim amacı belirtmekle aynı problemlere sahibiz. Ancak daha da önemlisi, bir DOM düğümüne manuel olarak başvurmamız ve güncellememiz gerekti. Bir günlük girişini silmek istiyorsak, bunun için DOM'a kod yazmamız gerekiyor. Mantığı DOM dışında nasıl test ederiz? Ya sunumu değiştirmek istersek?

Bu biraz dağınık ve önemsiz bir zayıflık. Ancak AngularJS'de bunu yapabiliriz:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

Ve görüşümüz şöyle görünebilir:

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

Ancak bu konuda görüşümüz şöyle görünebilir:

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

Şimdi sıralanmamış bir liste kullanmak yerine Bootstrap uyarı kutuları kullanıyoruz. Ve asla kontrolör kodunu değiştirmek zorunda kalmadık! Ancak daha da önemlisi, kütük nerede veya nasıl güncellenir olursa olsun , görünüm de değişir. Otomatik olarak. Temiz!

Burada göstermeme rağmen veri bağlama iki yönlüdür. Bu kayıt mesajları da sadece bunu yaparak görünümünde düzenlenebilir olabilir Yani: <input ng-model="entry.msg" />. Ve çok sevindi.

Farklı model katmanı

JQuery'de, DOM bir çeşit modele benzer. Ancak AngularJS'de, görünümden tamamen bağımsız olarak istediğimiz şekilde yönetebileceğimiz ayrı bir model katmanımız var. Bu, yukarıdaki veri bağlanmasına yardımcı olur , endişelerin ayrılmasını sağlar ve çok daha fazla test edilebilirlik sağlar. Diğer cevaplar bu noktadan bahsetti, ben de onu bırakacağım.

Endişelerin ayrılması

Yukarıdakilerin hepsi bu aşırı kemerli temaya bağlanır: endişelerinizi ayrı tutun. Görüşünüz, ne olması gerektiğinin resmi kaydı olarak hareket eder (çoğunlukla); modeliniz verilerinizi temsil eder; yeniden kullanılabilir görevleri gerçekleştirmek için bir hizmet katmanınız var; DOM manipülasyonu yaparsınız ve direktiflerle görüşünüzü artırırsınız; ve hepsini kontrolörlerle birlikte yapıştırıyorsunuz. Bu, diğer cevaplarda da belirtildi ve ekleyeceğim tek şey, aşağıdaki başka bir bölümde tartıştığım test edilebilirlikle ilgilidir.

Bağımlılık enjeksiyonu

Endişelerin ayrılmasında bize yardımcı olmak için bağımlılık enjeksiyonu (DI). Eğer bir sunucu tarafı dil (dan geliyorsa Java için PHP ) Zaten bu kavramına aşina muhtemelen, ama sen jQuery gelen bir istemci tarafı adamsın, bu kavram hipster için gereksiz saçma bir şey görünebilir . Ama değil. :-)

Geniş bir perspektiften, DI, bileşenleri çok özgürce ve daha sonra başka bir bileşenden bildirebileceğiniz anlamına gelir, sadece bir örneğini isteyin ve verilecektir. Yükleme sırası, dosya konumları veya bunun gibi bir şey hakkında bilgi sahibi olmanız gerekmez. Güç hemen görünmeyebilir, ancak sadece bir (ortak) örnek vereceğim: test.

Uygulamamızda, bir REST API ve sunucu durumuna göre yerel depolama da sunucu tarafı depolaması yapan bir hizmete ihtiyacımız olduğunu varsayalım . Denetleyicilerimizde testler yaparken, sunucuyla iletişim kurmak zorunda değiliz - sonuçta denetleyiciyi test ediyoruz . Orijinal bileşenimizle aynı ada sahip bir sahte hizmet ekleyebiliriz ve enjektör, denetleyicimizin sahte olanı otomatik olarak almasını sağlar - denetleyicimiz farkı bilmez ve gerekmez.

Testten bahsetmişken ...

4. Test odaklı geliştirme - her zaman

Bu, mimarlık hakkındaki 3. bölümün bir parçası, ancak onu kendi üst düzey bölümü olarak koymam çok önemlidir.

Gördüğünüz, kullandığınız veya yazdığınız birçok jQuery eklentisinden kaç tanesinde eşlik eden bir test paketi vardı? Çok fazla değil çünkü jQuery buna pek uygun değil. Ama AngularJS öyle.

JQuery'de test etmenin tek yolu, bileşeni testlerimizin DOM manipülasyonu gerçekleştirebileceği bir örnek / demo sayfasıyla bağımsız olarak oluşturmaktır. Bu yüzden bir bileşeni ayrı olarak geliştirmeli ve daha sonra uygulamamıza entegre etmeliyiz. Ne kadar elverişsiz! Çoğu zaman, jQuery ile geliştirirken, test odaklı geliştirme yerine yinelemeyi tercih ediyoruz. Bizi kim suçlayabilir ki?

Ancak, endişelerin ayrılması nedeniyle AngularJS'de test odaklı geliştirmeyi tekrar tekrar yapabiliriz! Örneğin, menümüzde mevcut rotanızın ne olduğunu belirtmek için çok basit bir yönerge istediğimizi varsayalım. Başvurumuz doğrultusunda ne istediğimizi beyan edebiliriz:

<a href="/hello" when-active>Hello</a>

Tamam, şimdi varolmayan when-activedirektif için bir test yazabiliriz :

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="https://stackoverflow.com/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

Ve testimizi yürüttüğümüzde başarısız olduğunu doğrulayabiliriz. Direktifimizi ancak şimdi oluşturmalıyız:

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

Testimiz şimdi geçiyor ve menümüz istendiği gibi çalışıyor. Bizim gelişmedir hem iteratif ve test odaklı. Wicked-serin.

5. Kavramsal olarak, direktifler edilir değildir jQuery paketlenmiş

Sık sık "yalnızca bir yönergede DOM manipülasyonu yapın" ifadesini duyarsınız. Bu bir zorunluluktur. Gerekli saygıyla davranın!

Ama biraz daha derine dalalım ...

Bazı direktifler sadece görünümde olanları dekore eder (düşünür ngClass) ve bu nedenle bazen DOM manipülasyonunu hemen yapar ve temel olarak yapılır. Ancak bir yönerge "widget" ise ve bir şablonu varsa, endişelerin ayrılmasına da saygı göstermelidir. Yani, şablon da bağlantı ve denetleyici işlevlerindeki uygulamasından büyük ölçüde bağımsız kalmalıdır.

AngularJS, bunu çok kolay hale getirmek için bir dizi araçla birlikte gelir; ile ngClasssınıfı dinamik olarak güncelleyebiliriz; ngModeliki yönlü veri bağlanmasına izin verir; ngShowve ngHidebir elemanı programlı olarak gösterme veya gizleme; ve çok daha fazlası - kendimiz yazdıklarımız dahil. Başka bir deyişle, DOM manipülasyonu olmadan her türlü mükemmelliği yapabiliriz . DOM manipülasyonu ne kadar az olursa, test etmek ne kadar kolay olur, stilleri o kadar kolay olur, gelecekte değişmeleri o kadar kolay olur ve yeniden kullanılabilir ve dağıtılabilir olurlar.

AngularJS için yeni geliştiricilerin bir sürü jQuery atma yeri olarak direktifleri kullandığını görüyorum. Başka bir deyişle, "denetleyicide DOM manipülasyonu yapamadığım için, bu kodu bir direktife koyacağım" diye düşünüyorlar. Bu kesinlikle çok daha iyi olsa da, genellikle yanlıştır .

Bölüm 3'te programladığımız kaydediciyi düşünün. Bunu bir yönergeye koysak bile, yine de "Açısal Yol" yapmak istiyoruz. Bu hala herhangi DOM işlemleri almaz! DOM manipülasyonunun gerekli olduğu birçok zaman vardır, ancak düşündüğünüzden çok daha nadirdir! Uygulamanızın herhangi bir yerinde DOM manipülasyonu yapmadan önce , gerçekten ihtiyacınız olup olmadığını kendinize sorun. Daha iyi bir yol olabilir.

İşte en sık gördüğüm modeli gösteren hızlı bir örnek. Değiştirilebilir bir düğme istiyoruz. (Not: Bu örnek biraz aynıdır ve tam olarak aynı şekilde çözülen daha karmaşık vakaları temsil eden bir skosh ayrıntısıdır.)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

Bunda yanlış olan birkaç şey var:

1. İlk olarak, jQuery hiçbir zaman gerekli değildi. Burada jQuery'ye ihtiyaç duyduğumuz hiçbir şey yok!
2. İkinci olarak, sayfamızda zaten jQuery olsa bile, burada kullanmak için bir neden yoktur; sadece kullanabiliriz angular.elementve bileşenimiz jQuery olmayan bir projeye düştüğünde çalışmaya devam eder.
3. Üçüncü olarak, hatta varsayarak jQuery edildi çalışmalarına bu direktif için gerekli, jqLite ( angular.element) olacak hep o yüklenmesi halinde jQuery kullanmak! Yani kullanmaya ihtiyacımız yok $- sadece kullanabiliriz angular.element.
4. Dördüncüsü, üçüncüyle yakından ilgili olan, jqLite öğelerinin sarılması gerekmemesidir $- işleve elementaktarılan zaten bir jQuery öğesi olacaktır!link
5. Ve beşincisi, önceki bölümlerde bahsettiğimiz gibi, neden şablon şeyleri mantığımıza karıştırıyoruz?

Bu yönerge çok daha basit bir şekilde yeniden yazılabilir (çok karmaşık durumlar için bile!):

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

Yine, şablon öğeleri şablondadır, böylece siz (veya kullanıcılarınız) gerekli herhangi bir stili karşılayan bir şablonla kolayca değiştirebilirsiniz ve mantığa asla dokunulmak zorunda kalmazsınız. Yeniden kullanılabilirlik - patlama!

Ve test etme gibi diğer tüm faydaları hala var - bu kolay! Şablonda ne olursa olsun, direktifin dahili API'sine asla dokunulmaz, bu nedenle yeniden düzenleme kolaydır. Yönerge dokunmadan şablonu istediğiniz kadar değiştirebilirsiniz. Ve ne değiştirirseniz değiştirin, testleriniz hala geçiyor.

w00t!

Eğer direktifler sadece jQuery benzeri fonksiyonların koleksiyonları değilse, bunlar nedir? Yönergeler aslında HTML'nin uzantılarıdır . HTML yapmanız gereken bir şey yapmazsa, bunu sizin için yapmak için bir yönerge yazarsınız ve bunu tıpkı HTML'nin bir parçasıymış gibi kullanırsınız.

Angularjs kutunun dışında bir şey yapmazsa, başka bir deyişle, takım sağ uyması için bunu başarmak nasıl düşünmek ngClick, ngClassvd.

özet

JQuery bile kullanmayın. Eklemeyin bile. Seni geri tutacak. Ve zaten jQuery'de nasıl çözeceğinizi bildiğinizi düşündüğünüz bir soruna geldiğinizde, ulaşmadan önce $, AngularJS sınırları içinde nasıl yapılacağını düşünmeye çalışın. Eğer bilmiyorsan sor! 20 üzerinden 19 kez, bunu yapmanın en iyi yolu jQuery gerekmez ve jQuery ile çözmeye çalışmak sizin için daha fazla iş sonuçları sağlar.

Emir → → beyan

JQuery'de, seçiciler DOM öğelerini bulmak ve daha sonra olay işleyicilerini bunlara bağlamak / kaydetmek için kullanılır. Bir olay tetiklendiğinde, bu (zorunlu) kod DOM'u güncellemek / değiştirmek için yürütülür.

AngularJS'de DOM öğeleri yerine görünümler hakkında düşünmek istersiniz . Görünümler (bildirimsel) AngularJS yönergelerini içeren HTML'dir . Yönergeler, olay işleyicilerini bizim için perde arkasına yerleştirdi ve bize dinamik veri bağlama sağladı. Seçiciler nadiren kullanılır, bu nedenle kimliklere (ve bazı sınıf türlerine) olan ihtiyaç büyük ölçüde azalır. Görünümler modellere bağlıdır (kapsamlar aracılığıyla). Görünümler modelin bir yansımasıdır. Olaylar modelleri değiştirir (yani veri, kapsam özellikleri) ve bu modellerin yansıtıldığı görünümler "otomatik olarak" güncellenir.

AngularJS'de, verilerinizi tutan jQuery tarafından seçilen DOM öğeleri yerine modelleri düşünün. Kullanıcının gördüklerini değiştirmek için geri çağrıları kaydetmek yerine görünümleri bu modellerin projeksiyonları olarak düşünün.

Endişelerin ayrılması

jQuery göze batmayan JavaScript kullanır - davranış (JavaScript) yapıdan (HTML) ayrılır.

AngularJS , görünümü / yapıdan (HTML) davranışı kaldırmak için denetleyicileri ve yönergeleri (her biri kendi denetleyicisine sahip olabilen ve / veya derleme ve bağlama işlevleri) kullanır. Angular ayrıca uygulamanızı ayırmanıza / düzenlemenize yardımcı olacak hizmetler ve filtrelere sahiptir .

Ayrıca bkz. Https://stackoverflow.com/a/14346528/215945

Uygulama tasarımı

Bir AngularJS uygulaması tasarlamak için bir yaklaşım:

1. Modellerinizi düşünün. Bu modeller için hizmetler veya kendi JavaScript nesnelerinizi oluşturun.
2. Modellerinizi nasıl sunmak istediğinizi düşünün - görüşlerinizi. Dinamik veri elde etmek için gerekli yönergeleri kullanarak her görünüm için HTML şablonları oluşturun.
3. Her görünüme bir denetleyici takın (ng görünümü ve yönlendirmesi veya ng denetleyicisi kullanarak). Denetleyiciye yalnızca görünümün işini yapmak için ihtiyaç duyduğu model verilerini bulmasını / almasını sağlayın. Denetleyicileri mümkün olduğunca ince hale getirin.

Prototip palet mirası

JavaScript prototypal mirasının nasıl çalıştığını bilmeden jQuery ile çok şey yapabilirsiniz. AngularJS uygulamaları geliştirirken, JavaScript mirasını iyi biliyorsanız, bazı yaygın tuzaklardan kaçınacaksınız. Önerilen okuma: AngularJS'de prototip / prototip kalıtım kapsamının nüansları nelerdir?

AngularJS ve jQuery karşılaştırması

Açısal JS ve jQuery çok farklı ideolojiler benimser. JQuery'den geliyorsanız, bazı farklılıkları şaşırtıcı bulabilirsiniz. Açısal sizi kızdırır.

Bu normal, zorlamalısın. Açısal buna değer.

Büyük fark (TLDR)

jQuery, DOM'un rastgele bitlerini seçmek ve bunlarda geçici değişiklikler yapmak için bir araç seti sunar. İstediğiniz her şeyi parça parça yapabilirsiniz.

Bunun yerine AngularJS size bir derleyici verir .

Bunun anlamı, AngularJS'nin tüm DOM'nizi yukarıdan aşağıya okuduğu ve tam anlamıyla derleyiciye talimat olarak kod olarak ele aldığıdır. DOM'dan geçerken, AngularJS derleyicisine nasıl davranacağını ve ne yapılacağını söyleyen belirli yönergeleri (derleyici yönergeleri) arar . Yönergeler, niteliklerle, etiketlerle, sınıflarla veya hatta yorumlarla eşleşebilen JavaScript ile dolu küçük nesnelerdir.

Açısal derleyici, bir DOM parçasının belirli bir yönerge ile eşleştiğini belirlediğinde, yönlendirme işlevini çağırır, DOM öğesini, tüm öznitelikleri, geçerli $ kapsamını (yerel değişken deposu olan) ve diğer bazı yararlı bitleri iletir. Bu öznitelikler, Direktif tarafından yorumlanabilen ve nasıl oluşturulacağını ve ne zaman kendini yeniden çizmesi gerektiğini söyleyen ifadeler içerebilir.

Direktifler daha sonra kontrolörler, servisler, vb. Gibi ek Açısal bileşenleri çekebilir. Derleyicinin alt kısmı çıkan, tamamen oluşturulmuş bir web uygulamasıdır, kablolu ve kullanıma hazırdır.

Bu, Açısal Şablon Sürmeli olduğu anlamına gelir . Şablonunuz JavaScript'i kullanıyor, tersi değil. Bu, rollerin radikal bir şekilde tersine çevrilmesi ve son 10 yıldır yazdığımız göze batmayan JavaScript'in tam tersidir. Bu alışmak biraz zaman alabilir.

Eğer bu aşırı kuralcı ve sınırlayıcı olabilir gibi görünüyorsa, hiçbir şey gerçeklerden daha uzak olamaz. AngularJS HTML'nizi kod olarak ele aldığından , web uygulamanızda HTML düzeyinde ayrıntı elde edersiniz . Her şey mümkündür ve birkaç kavramsal sıçrama yaptıktan sonra çoğu şey şaşırtıcı derecede kolaydır.

Şimdi altmış cesurlara 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 esas olarak DOM'u değiştirmek için araçlar sağlar. Sayfanızda jQuery varsa, AngularJS bunu otomatik olarak kullanacaktır. Değilse, AngularJS, jQuery'nin kesilmiş, ancak yine de mükemmel şekilde kullanılabilir bir sürümü olan jQuery Lite ile birlikte gelir.

Misko jQuery'den hoşlanır ve bunu kullanarak size itiraz etmez. Bununla birlikte, ilerledikçe, kapsamınızın, şablonların ve yönergelerin bir kombinasyonunu kullanarak tüm işlerinizin neredeyse tamamını yapabileceğinizi göreceksiniz ve kodunuz daha ayrık, daha yapılandırılabilir ve daha fazlası olacağı için mümkün olduğunda bu iş akışını tercih etmelisiniz. Açısal.

JQuery kullanıyorsanız, her yere serpiştirmemelisiniz. AngularJS'de DOM manipülasyonu için doğru yer bir direktifte. Bunlar hakkında daha sonra.

Seçici ve Bildirici Şablonlar ile göze batmayan JavaScript

jQuery tipik olarak dikkat çekmeden uygulanır. JavaScript kodunuz üstbilgi (veya altbilgi) ile bağlantılıdır ve burada tek yer belirtilmiştir. Sayfanın bitlerini seçmek için seçicileri kullanırız ve bu parçaları değiştirmek için eklentiler yazarız.

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 fark edeceğiniz ilk şeylerden biri, özel özelliklerin her yerde olmasıdır . HTML'niz temel olarak onClick özelliklerine sahip ng özellikleriyle dolu olacaktır. Bunlar direktiflerdir (derleyici direktifleri) ve şablonun modele bağlandığı ana yollardan biridir.

Bunu ilk gördüğünüzde AngularJS'yi eski okul müdahaleci JavaScript olarak yazmak cazip gelebilir (ilk başta yaptığım gibi). Aslında, AngularJS bu kurallara uymaz. AngularJS'de HTML5'iniz bir şablondur. Web sayfanızı üretmek için AngularJS tarafından derlenmiştir.

Bu ilk büyük fark. JQuery için, web sayfanız manipüle edilecek bir DOM'dir. AngularJS için HTML'niz derlenecek koddur. AngularJS tüm web sayfanızda okur ve dahili derleyicisini kullanarak kelimenin tam anlamıyla yeni bir web sayfasına derler.

Şablonunuz açıklayıcı olmalıdır; anlamı basitçe okunarak açık olmalıdır. Anlamlı adlara sahip özel özellikler kullanıyoruz. Yine anlamlı adlarla yeni HTML öğeleri oluşturuyoruz. Minimum HTML bilgisi olan ve kodlama becerisi olmayan bir tasarımcı AngularJS şablonunuzu okuyabilir ve ne yaptığını anlayabilir. Değişiklik yapabilir. Bu Açısal yol.

Şablon sürüş koltuğunda.

AngularJS'yi başlatırken ve öğreticilerden geçerken kendime sorduğum ilk sorulardan biri " Kodum nerede?" . JavaScript yazmadım ve yine de tüm bu davranışlara sahibim. Cevap açıktır. AngularJS DOM'yi derlediğinden, AngularJS HTML'nizi kod olarak ele alır. Birçok basit durumda genellikle bir şablon yazmak ve AngularJS'nin sizin için bir uygulamada derlemesine izin vermek yeterlidir.

Şablonunuz uygulamanızı yönlendirir. Bir DSL gibi muamele görür . AngularJS bileşenlerini yazarsınız ve AngularJS, bunları şablonunuzun yapısına bağlı olarak içeri çekmeye ve doğru zamanda kullanılabilir hale getirmeye özen gösterir. Bu, şablonun yalnızca çıktı için olduğu standart bir MVC modelinden çok farklıdır .

Örneğin XSLT'ye Ruby on Rails'den daha çok benziyor .

Bu, bazılarının alışması gereken radikal bir kontrol tersidir.

Uygulamanızı JavaScript'inizden almaya çalışmayı bırakın. Şablonun uygulamayı sürmesine izin verin ve AngularJS'nin bileşenleri birbirine bağlamaya özen gösterin. Bu aynı zamanda Açısal yoldur.

Anlamsal HTML ve Anlambilimsel Modeller

JQuery ile HTML sayfanızda anlamsal anlamlı içerik bulunmalıdır. JavaScript kapalıysa (bir kullanıcı veya arama motoru tarafından) içeriğiniz erişilebilir durumda kalır.

Çünkü AngularJS HTML sayfanızı şablon olarak değerlendirir. İçeriğinizin tipik olarak modelinizde, sonuçta API'nızdan geldiği için saklandığı için şablonun anlamsal olması gerekmez. AngularJS, anlamsal bir web sayfası oluşturmak için DOM'nizi modelle derler.

HTML kaynağınız artık anlamsal değildir, bunun yerine API'niz ve derlenen DOM'unuz anlamsaldır.

AngularJS'de, yani modelde yaşayan HTML, yalnızca görüntüleme için sadece bir şablondur.

Bu noktada, muhtemelen SEO ve erişilebilirlik ile ilgili her türlü sorunuz var ve haklı olarak. Burada açık konular var. Çoğu ekran okuyucu artık JavaScript'i ayrıştıracaktır. Arama motorları AJAXed içeriğini de dizine ekleyebilir . Bununla birlikte, pushstate URL'leri kullandığınızdan ve iyi bir site haritanız olduğundan emin olmak istersiniz. Sorunun tartışması 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 dahil olmak üzere çeşitli nedenlerle web geliştirme yıllarca büyüyen bir modeldir. Şöyle görünüyor:

1. HTML - Anlamsal anlam. HTML tek başına olmalıdır.
2. CSS - Stil oluşturma, CSS olmadan sayfa hala okunabilir durumda.
3. JavaScript - Davranış, komut dosyası olmadan içerik kalır.

Yine, AngularJS kurallarına göre oynamaz. Bir vuruşta, AngularJS, alınan on yıllık bilgeliği ortadan kaldırır ve bunun yerine, şablonun artık semantik olmadığı, hatta biraz bile olmadığı bir MVC deseni uygular.

Şöyle görünüyor:

1. Model - modelleriniz semantik verilerinizi içerir. Modeller genellikle JSON nesneleridir. Modeller $ scope adlı bir nesnenin nitelikleri olarak bulunur. Ayrıca, kullanışlı yardımcı program işlevlerini, şablonlarınızın daha sonra erişebileceği $ scope'da saklayabilirsiniz.
2. Görünüm - Görünümleriniz HTML ile yazılmıştır. Görünüm genellikle semantik değildir, çünkü verileriniz modelde yaşar.
3. Denetleyici - Denetleyiciniz, görünümü modele bağlayan bir JavaScript işlevidir. İşlevi $ kapsamını 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ğil, tamamen farklı eksenlerde. SOC, AngularJS bağlamında bir anlam ifade etmiyor. Unutmalı ve 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ğecek, söz veriyorum.

Eklentiler ve Yönergeler

Eklentiler jQuery'yi genişletir. AngularJS Direktifleri tarayıcınızın yeteneklerini artırır.

JQuery'de, jQuery.prototype işlevlerini ekleyerek eklentileri tanımlarız. Ardından, öğeleri seçip sonuçtaki eklentiyi çağırarak bunları DOM'a bağlarız. Fikir, jQuery'nin yeteneklerini genişletmektir.

Örneğin, sayfanızda bir atlıkarınca istiyorsanız, belki de bir gezinme öğesine sarılmış sıralanmamış bir şekil listesi tanımlayabilirsiniz. Daha sonra sayfadaki listeyi seçmek için bazı jQuery yazabilir ve kayan animasyonu yapmak için zaman aşımı olan bir galeri olarak yeniden boyutlandırabilirsiniz.

AngularJS'de direktifleri tanımlarız. Yönerge, bir JSON nesnesi döndüren bir işlevdir. Bu nesne AngularJS'ye hangi DOM öğelerini arayacağını ve bunlarda ne gibi değişiklikler yapılacağını söyler. Yönergeler, icat ettiğiniz öznitelikler veya öğeler kullanılarak şablona bağlanır. Buradaki fikir, HTML'nin yeteneklerini yeni özellikler ve öğelerle genişletmektir.

AngularJS yöntemi, 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 />öğe kullanın , sonra bir şablon çekmek için bir yönerge tanımlayın ve o enayi çalışmasını sağlayın.

Pek çok küçük yönerge ve yapılandırma anahtarları ile büyük eklentiler

JQuery ile eğilim, daha sonra çok sayıda değer ve seçenek ileterek yapılandırdığımız ışık kutusu gibi büyük büyük eklentiler yazmaktır.

Bu AngularJS'de bir hatadır.

Bir açılır menü örneğini ele alalım. Bir açılır menü eklentisi yazarken, tıklama işleyicilerinde kodlamaya cazip gelebilirsiniz, belki de yukarı veya aşağı bir chevron eklemek için bir işlev olabilir, belki katlanmamış öğenin sınıfını değiştirebilir, menüyü gizlemeyi gösterebilir, tüm yararlı şeyler.

Küçük bir değişiklik yapmak isteyene kadar.

Fareyle üzerine gelmek istediğiniz bir menünüz olduğunu varsayalım. Şimdi bir sorunumuz var. Eklentimiz bizim için tıklama işleyicimize bağlandı, bu özel durumda farklı davranması için bir yapılandırma seçeneği eklememiz gerekecek.

AngularJS'de daha küçük yönergeler yazıyoruz. Açılır yönergemiz gülünç derecede küçük olacaktır. Katlanmış durumu koruyabilir ve katlamak (), açmak () veya geçiş yapmak () için yöntemler sağlayabilir. Bu yöntemler, durumu tutan bir boole olan $ scope.menu.visible dosyasını güncelleyecektir.

Şimdi şablonumuzda bunu bağlayabiliriz:

<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

Fareyle üzerine gelindiğinde güncelleme 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ı elde ederiz. Büyük / küçük harf istisnaları yapmak istiyorsanız, şablon bunu kolaylaştırır.

Kapanış ve $ kapsam

JQuery eklentileri bir kapanışta oluşturulur. Gizlilik bu kapanış içerisinde korunur. Kapsam zincirinizi bu kapak içinde tutmak size kalmış. Sadece jQuery tarafından eklentiye iletilen DOM düğümleri kümesine, ayrıca kapakta tanımlanan tüm yerel değişkenlere ve tanımladığınız globallere erişebilirsiniz. Bu, eklentilerin oldukça bağımsız olduğu anlamına gelir. Bu iyi bir şey, ancak bütün bir uygulama oluştururken kısıtlayıcı olabilir. Dinamik bir sayfanın bölümleri arasında veri aktarmaya çalışmak bir angarya haline gelir.

AngularJS $ kapsam nesneleri içerir. Bunlar, modelinizi sakladığınız AngularJS tarafından oluşturulan ve korunan özel nesnelerdir. Belirli yönergeler, varsayılan olarak JavaScript prototipsel miras kullanarak $ kapsamını sarmadan devralan yeni bir $ kapsamı oluşturur. $ Scope nesnesine denetleyiciden ve görünümden erişilebilir.

Bu akıllı kısım. $ Scope mirasının yapısı kabaca DOM'un yapısını takip ettiğinden, elemanlar kendi kapsamlarına ve küresel kapsamı (global kapsamla aynı değildir) sonuna kadar sorunsuz bir şekilde kapsamlara sahiptir.

Bu, verilerin etrafından aktarılmasını ve verilerin uygun bir düzeyde depolanmasını kolaylaştırır. Bir açılır liste açılırsa, yalnızca açılır $ kapsamının 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 karmaşık görünebilir, aslında, bir kez gevşediğinizde, uçmak gibidir. $ Scope nesnesini oluşturmanıza gerek yoktur; AngularJS, şablon hiyerarşinize dayanarak sizin için doğru ve uygun bir şekilde başlatır ve yapılandırır. AngularJS daha sonra bağımlılık enjeksiyonunun büyüsünü kullanarak bileşeniniz için kullanılabilir hale getirir (daha sonra bu konuda daha fazla bilgi).

Manuel DOM değişiklikleri ve Veri Bağlama karşılaştırması

JQuery'de tüm DOM değişikliklerinizi elle yaparsınız. Programlı olarak yeni DOM öğeleri oluşturursunuz. Bir JSON diziniz varsa ve bunu DOM'ye koymak istiyorsanız, HTML'yi oluşturmak ve eklemek için bir işlev yazmanız gerekir.

AngularJS'de bunu da yapabilirsiniz, ancak veri bağlamayı kullanmanız önerilir. Modelinizi değiştirin ve DOM bir şablon aracılığıyla ona bağlı olduğundan DOM'nuz otomatik olarak güncellenir, müdahale gerekmez.

Veri bağlama, bir öznitelik veya süslü ayraç sözdizimi kullanılarak şablondan yapıldığından, yapılması çok kolaydır. Bununla ilişkili küçük bir bilişsel yük vardır, böylece kendinizi her zaman yaparken bulacaksınız.

<input ng-model="user.name" />

Giriş elemanını konumuna bağlar $scope.user.name. Girişin güncellenmesi mevcut kapsamınızdaki değeri güncelleyecektir veya bunun tersi de geçerlidir.

Aynı şekilde:

<p>
  {{user.name}}
</p>

paragrafta kullanıcı adını çıktılar. Bu canlı bir ciltleme olduğundan, $scope.user.namedeğer güncellenirse şablon da güncellenir.

Ajax her zaman

JQuery'de bir Ajax çağrısı yapmak oldukça basittir, ancak yine de iki kez düşünebileceğiniz bir şeydir. Düşünülmesi gereken ek karmaşıklık ve sürdürülecek adil bir senaryo grubu var.

AngularJS'de, Ajax varsayılan go-to-çözümünüzdür ve neredeyse fark etmeden her zaman olur. Ng-include içeren şablonlar ekleyebilirsiniz. En basit özel yönergeye sahip bir şablon uygulayabilirsiniz. Bir Ajax çağrısını bir hizmete sarabilir ve kendinize bir GitHub hizmeti veya şaşırtıcı bir şekilde erişebileceğiniz bir Flickr hizmeti oluşturabilirsiniz.

Hizmet Nesneleri ve Yardımcı İşlevleri

JQuery'de, bir API'dan özet akışı çekmek gibi dom ile ilgili olmayan küçük bir görevi gerçekleştirmek istiyorsak, bunu kapatmamız için küçük bir işlev yazabiliriz. Bu geçerli bir çözüm, ancak bu feed'e sık sık erişmek istiyorsak? Bu kodu başka bir uygulamada yeniden kullanmak istersek ne olur?

AngularJS bize servis nesneleri veriyor.

Hizmetler, işlevler ve veriler içeren basit nesnelerdir. Onlar her zaman singletonlardır, yani hiçbir zaman birden fazla olamaz. Stack Overflow API'sına erişmek istediğimizi, bunun StackOverflowServiceiçin yöntemleri tanımlayan bir tane yazabileceğimizi varsayalım.

Diyelim ki bir alışveriş sepetimiz var. Sepetimizi koruyan ve öğe eklemek ve kaldırmak için yöntemler içeren bir ShoppingCartService tanımlayabiliriz. Hizmet tekil olduğu ve diğer tüm bileşenler tarafından paylaşıldığı için, alışveriş sepetine yazması gereken herhangi bir nesne alışveriş sepetinden veri alabilir. Her zaman aynı araba.

Hizmet nesneleri, uygun gördüğümüz şekilde kullanabileceğimiz ve yeniden kullanabileceğimiz bağımsız AngularJS bileşenleridir. Bunlar, işlevler ve Veri içeren basit JSON nesneleridir. Bunlar her zaman tekil öğelerdir, bu nedenle bir hizmetteki verileri tek bir yerde depolarsanız, aynı hizmeti talep ederek bu verileri başka bir yere alabilirsiniz.

Bağımlılık enjeksiyonu (DI) ve İnstiasyon - aka spagettikasyon

AngularJS bağımlılıklarınızı sizin için yönetir. Bir nesne istiyorsanız, ona bakın ve AngularJS sizin için alacaktır.

Bunu kullanmaya başlayana kadar, bunun ne kadar büyük bir nimet olduğunu açıklamak zor. JQuery içinde AngularJS DI gibi bir şey yoktur.

DI, uygulamanızı yazmak ve kablolamak yerine, her biri bir dize ile tanımlanan bir bileşen kitaplığı tanımladığınız anlamına gelir.

Diyelim 'FlickrService' adlı bir bileşenim var, bu JSON özet akışlarını Flickr'den çekme yöntemlerini tanımlar. Şimdi, Flickr'a erişebilen bir denetleyici yazmak istersem, denetleyiciyi bildirirken ada göre 'FlickrService'e başvurmam gerekiyor. AngularJS, bileşeni başlatmaya ve kontrol cihazımın kullanımına sunmaya özen gösterir.

Örneğin, burada bir hizmet tanımlarım:

myApp.service('FlickrService', function() {
  return {
    getFeed: function() { // do something here }
  }
});

Şimdi bu hizmeti kullanmak istediğinizde, sadece bu şekilde adıyla atıfta bulunuyorum:

myApp.controller('myController', ['FlickrService', function(FlickrService) {
  FlickrService.getFeed()
}]);

AngularJS, denetleyiciyi örneklemek için bir FlickrService nesnesinin gerekli olduğunu anlayacak ve bize bir tane sağlayacaktır.

Bu, kablolama işlerini birlikte çok kolay hale getirir ve spagettifikasyona olan eğilimi hemen hemen ortadan kaldırır. Düz bir bileşen listemiz var ve AngularJS bunları ihtiyaç duyduğumuzda ve teker teker bize 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 vardır.

AngularJS size kodunuzu yerleştirebileceğiniz modüller sağlar. Örneğin Flickr ile konuşan bir komut dosyası yazıyorsanız, Flickr ile ilgili tüm işlevlerinizi içine almak için bir Flickr modülü oluşturmak isteyebilirsiniz. Modüller diğer modülleri (DI) içerebilir. Ana uygulamanız genellikle bir modüldür ve bu, uygulamanızın bağlı olacağı diğer tüm modülleri içermelidir.

Basit bir kod kullanımı elde edersiniz, Flickr tabanlı başka bir uygulama yazmak istiyorsanız, Flickr modülünü ve voila'yı dahil edebilirsiniz, yeni uygulamanızdaki tüm Flickr ile ilgili işlevlere erişebilirsiniz.

Modüller AngularJS bileşenleri içerir. Bir modül eklediğimizde, o modüldeki tüm bileşenler, benzersiz dizeleriyle tanımlanan basit bir liste olarak kullanılabilir hale gelir . Daha sonra bu bileşenleri AngularJS'nin bağımlılık enjeksiyon mekanizmasını kullanarak birbirine enjekte edebiliriz.

Sonuç olarak

Açısal JS ve jQuery düşman değildir. AngularJS içinde jQuery kullanmak çok güzel. AngularJS'yi iyi kullanıyorsanız (şablonlar, veri bağlama, $ kapsam, yönergeler, vb.) Aksi halde ihtiyacınız olabileceklerden çok daha az jQuery'ye ihtiyacınız olduğunu göreceksiniz .

Gerçekleştirilecek en önemli şey, şablonunuzun uygulamanızı yönlendirmesidir. Her şeyi yapan büyük eklentiler yazmaya çalışmayı bırakın. Bunun yerine, bir şey yapan küçük yönergeler yazın, sonra bunları birbirine bağlamak için basit bir şablon yazın.

Göze batmayan 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 hakkında çok heyecanlandım, üzerine çevrimiçi okumak için çok hoşunuza gidebileceğiniz kısa bir kitap yazdım http://nicholasjohnson.com/angular-book/ . Umarım faydalıdır.

Gerekli paradigma değişimini tarif edebilir misiniz?

Zorunlu ve Deklaratif

JQuery ile DOM'a ne olması gerektiğini adım adım anlatırsınız. AngularJS ile hangi sonuçları istediğinizi fakat nasıl yapacağınızı açıklamıyorsunuz. Burada daha fazlası . Ayrıca, Mark Rajcok'un cevabına bir göz atın.

İstemci tarafı web uygulamalarını nasıl farklı şekilde tasarlar ve tasarlarım?

AngularJS, MVC modelini kullanan ( grafiksel gösterimlerini kontrol edin ) tüm istemci tarafı bir çerçevedir . Endişelerin ayrılmasına büyük ölçüde odaklanmaktadır.

En büyük fark nedir? Ne yapmayı / kullanmayı bırakmalıyım; onun yerine ne yapmaya / kullanmaya başlamalıyım?

jQuery bir kütüphanedir

AngularJS , MVC, bağımlılık enjeksiyonu , veri bağlama ve çok daha fazlası gibi tonlarca harika şeyi birleştiren son derece test edilebilir güzel bir istemci tarafı çerçevesidir .

Endişelerin ayrılmasına ve test odaklı geliştirmeyi kolaylaştıran testlere ( birim test ve uçtan uca test) odaklanır .

Başlamanın en iyi yolu harika eğiticilerinden geçiyor . Birkaç saat içinde adımlardan geçebilirsiniz; ancak, sahne arkasındaki kavramlarda uzmanlaşmak istiyorsanız, daha fazla okuma için sayısız referans içerir.

Sunucu tarafında dikkat edilmesi gereken noktalar / kısıtlamalar var mı?

Zaten saf jQuery kullandığınız mevcut uygulamalarda kullanabilirsiniz. Ancak, AngularJS özelliklerinden tam olarak yararlanmak istiyorsanız, RESTful yaklaşımını kullanarak sunucu tarafını kodlamayı düşünebilirsiniz .

Aksi onların kaldıraç sağlayacak kaynak fabrikası sunucu tarafı RESTful bir soyutlama oluşturur API sunucu tarafı aramalar (vb silmek, almak kaydedin) inanılmaz kolay ve yapar.

"Paradigma değişimini" tanımlamak için kısa bir yanıtın yeterli olabileceğini düşünüyorum.

AngularJS, öğeleri bulma şeklinizi değiştirir

In jQuery , genellikle kullandığınız seçiciler unsurları bulmak ve sonra bunları bağlayabilirsiniz:
$('#id .class').click(doStuff);

Gelen angularjs , kullanmak direktifleri doğrudan öğeleri işaretlemek için, onları kadar Tel:
<a ng-click="doStuff()">

AngularJS, seçicileri kullanarak öğeleri bulmanızı gerektirmez (veya istemez) - AngularJS'nin jqLite ile tam gelişmiş jQuery arasındaki temel fark , jqLite'nin seçicileri desteklememesidir .

İnsanlar "jQuery'yi hiç dahil etme" dediğinde, bunun nedeni esas olarak seçicileri kullanmanızı istemez; bunun yerine yönergeleri kullanmayı öğrenmenizi istiyorlar. Doğrudan, seçmeyin!

jQuery

jQuery, getElementByHerpDerpdaha kısa ve çapraz tarayıcı gibi gülünç derecede uzun JavaScript komutları yapar .

angularjs

AngularJS, dinamik web uygulamalarıyla iyi çalışan şeyler yapan kendi HTML etiketlerinizi / niteliklerinizi oluşturmanıza olanak tanır (HTML statik sayfalar için tasarlandığından).

Düzenle:

"Bir jQuery arka plan var AngularJS nasıl düşünüyorum?" "HTML arka planım var, JavaScript'te nasıl düşünüyorum?" Soruyu sormanız, büyük olasılıkla bu iki kaynağın temel amaçlarını anlamadığınızı gösterir. Bu yüzden "AngularJS direktifleri kullanır, ancak jQuery bu ve bu yapan bir jQuery nesnesi yapmak için CSS seçicileri kullanarak söyleyerek listeden geçmektense temel farkı işaret ederek soruyu cevaplamak seçti. . Bu soru uzun bir cevap gerektirmez.

jQuery tarayıcıda JavaScript programlamayı kolaylaştırmanın bir yoludur. Daha kısa, çapraz tarayıcı komutları vb.

AngularJS HTML'yi genişletir, böylece <div>sadece bir uygulama yapmak için her yere koymanız gerekmez . HTML'nin aslında tasarlandığından ziyade uygulamalar için çalışmasını sağlar, bu da statik, eğitici web sayfalarıdır. Bunu JavaScript kullanarak dolambaçlı bir şekilde başarır, ancak temelde JavaScript'in değil HTML'nin bir uzantısıdır.

jQuery: Eğer 'sorgulama hakkında çok şey düşünmek DOM DOM elemanları' ve bir şey yapıyor.

AngularJS: Model gerçektir ve her zaman bu AÇIDAN düşünürsünüz.

Örneğin, DOM'da bir formatta görüntülemek istediğiniz sunucudan veri aldığınızda, jQuery'de '1. BULUN, DOM'a bu verileri yerleştirmek istediğiniz yere, '2. Yeni bir düğüm oluşturarak veya yalnızca innerHTML'sini ayarlayarak oraya GÜNCELLE / EKLE ' . Ardından bu görünümü güncellemek istediğinizde '3. 'Konumu ve' BULUN 4. GÜNCELLEME'. Sunucudan veri alma ve biçimlendirme ile aynı bağlamda yapılan bu bul ve güncelle döngüsü AngularJS'de geçer.

AngularJS ile modeliniz var (zaten alışkın olduğunuz JavaScript nesneleri) ve modelin değeri size model hakkında (açıkça) ve görünüm hakkında bilgi verir ve modeldeki bir işlem otomatik olarak görünüme yayılır. Bunu düşünmek zorunda değilim. Kendinizi artık DOM'da bir şey bulamadığınız AngularJS'de bulacaksınız.

Başka bir deyişle, jQuery'de, HTML veya renk veya değerlerini alabilirim, ancak AngularJS'de, CSS seçicileri, bir sınıf veya öznitelik nerede divveya nerede tdvb. kendinizi böyle düşünürken bulacaksınız: hangi modelle uğraşıyorum, modelin değerini doğru olarak ayarlayacağım. Bu değeri yansıtan görünümün işaretli bir kutu olup olmadığını veya bir tdöğenin içinde olup olmadığını ( jQuery'de sık sık düşünmeniz gereken ayrıntılar) rahatsız etmiyorsunuz .

AngularJS'deki DOM manipülasyonu ile kendinizi geçerli HTML uzantıları olarak düşünebileceğiniz yönergeler ve filtreler eklediğinizi göreceksiniz.

AngularJS'de yaşayacağınız bir şey daha: jQuery'de jQuery işlevlerini çok çağırıyorsunuz, AngularJS'de AngularJS işlevlerinizi çağıracaktır, bu yüzden AngularJS 'size bir şeyler nasıl yapacağınızı söyleyecektir', ancak faydaları buna değer, bu yüzden AngularJS öğrenmek genellikle AngularJS'in ne istediğini veya AngularJS'nin işlevlerinizi sunmanızı gerektirdiği yolu öğrenmek anlamına gelir ve buna göre çağırır. Bu, AngularJS'yi bir kütüphane yerine bir çerçeve yapan şeylerden biridir.

Bunlar çok güzel ama uzun cevaplar.

Deneyimlerimi özetlemek gerekirse:

1. Denetleyiciler ve sağlayıcılar (hizmetler, fabrikalar, vb.) HTML DEĞİL veri modelini değiştirmek içindir.
2. HTML ve yönergeler, mizanpajı ve modele bağlanmayı tanımlar.
3. Verileri denetleyiciler arasında paylaşmanız gerekiyorsa, bir hizmet veya fabrika oluşturun; bunlar uygulama genelinde paylaşılan tek düğmelerdir.
4. Bir HTML widget'ına ihtiyacınız varsa, bir yönerge oluşturun.
5. Bazı verileriniz varsa ve şimdi HTML'yi güncellemeye çalışıyorsanız ... DUR! modeli güncelleyin ve HTML'nizin modele bağlı olduğundan emin olun.

jQuery bir DOM manipülasyon kütüphanesidir.

AngularJS bir MV * çerçevesidir.

Aslında, AngularJS birkaç JavaScript MV * çerçevesinden biridir (birçok JavaScript MVC aracı hala kategori kütüphanesinin altındadır).

Bir çerçeve olarak, kodunuzu barındırır ve ne zaman ve ne zaman arayacağınıza dair kararların sahipliğini alır!

AngularJS, içinde bir jQuery-lite sürümü içerir. Bu nedenle, bazı temel DOM seçimi / manipülasyonu için, jQuery kitaplığını dahil etmek zorunda değilsiniz (ağda çalışmak için birçok bayt kaydeder.)

AngularJS, DOM manipülasyonu ve yeniden kullanılabilir UI bileşenleri tasarlamak için "Direktifler" kavramına sahiptir, bu nedenle DOM manipülasyonu ile ilgili şeyler yapma gereği duyduğunuzda kullanmalısınız (direktifler yalnızca AngularJS'yi kullanırken jQuery kodu yazmanız gereken yerdir).

AngularJS bazı öğrenme eğrileri içerir (jQuery'den daha fazla :-).

-> jQuery geçmişinden gelen herhangi bir geliştirici için ilk tavsiyem "AngularJS gibi zengin bir çerçeveye geçmeden önce birinci sınıf bir dil olarak JavaScript öğrenmek!" Yukarıdaki gerçeği zor yoldan öğrendim.

İyi şanslar.

Onlar elma ve portakal. Onları karşılaştırmak istemiyorsunuz. Bunlar iki farklı şey. AngularJs, tam üflemeli jQuery sürümünü dahil etmeden bile temel DOM manipülasyonunu gerçekleştirmenize izin veren yerleşik jQuery lite'ye sahiptir.

jQuery tamamen DOM manipülasyonu ile ilgilidir. Tüm çapraz tarayıcı ağrısını çözer, aksi takdirde uğraşmanız gerekir, ancak uygulamanızı AngularJS gibi bileşenlere bölmenize izin veren bir çerçeve değildir.

AngularJs hakkında güzel bir şey, direktiflerdeki DOM manipülasyonunu ayırmanıza / izole etmenize izin vermesidir. Kullanmak için ng-click gibi yerleşik yönergeler vardır. Tüm görünüm mantığınızı veya DOM manipülasyonunuzu içerecek kendi özel yönergelerinizi oluşturabilirsiniz, böylece iş mantığına dikkat etmesi gereken kontrolörlerde veya hizmetlerde DOM manipülasyon kodunu karıştırmazsınız.

Açısal uygulamanızı - Denetleyiciler - Hizmetler - Görünümler - vb.

ve bir şey daha var, bu direktif. Bu, herhangi bir DOM öğesine ekleyebileceğiniz bir özelliktir ve jQuery'nizin AngularJ bileşenleri ile çatışmasından veya mimarisiyle uğraşmasından endişe etmeden içindeki jQuery ile fındıklara gidebilirsiniz.

Katıldığım bir buluşmadan duydum, Angular'ın kurucularından biri, DOM manipülasyonunu ayırmak için gerçekten çok çalıştıklarını söyledi, bu yüzden onları tekrar dahil etmeye çalışmayın.

AngularJS: Misko Hevery ve Igor Minar'ın orijinal yaratıcılarını içeren podcast JavaScript Jabber: Episode # 32'yi dinleyin. Diğer JavaScript geçmişlerinden, özellikle jQuery'den AngularJS'ye gelmenin nasıl bir şey olduğu hakkında çok konuşuyorlar.

Podcast'de yapılan noktalardan biri, sorunuza saygı duymak için benim için tıkladığım birçok şey yaptı:

MISKO : [...] Angular'da çok zor düşündüğümüz şeylerden biri, dışarı çıkıp temelde bir çıkış yolu bulabilmeniz için çok sayıda kaçış kapağı nasıl sağlarız. Bizim için cevap “Yönergeler” denen şeydir. Ve direktiflerle, normalde küçük bir jQuery JavaScript haline gelirsiniz, istediğinizi yapabilirsiniz.

IGOR : Bu yüzden direktifi, derleyiciye şablonda bu belirli elemanla veya bu CSS ile karşılaştığınızda söyleyen talimat olarak düşünün ve bu tür bir kodu saklıyorsunuz ve bu kod elemandan ve elemanın altındaki her şeyden sorumlu. DOM ağacında.

Tüm bölümün bir metni yukarıda verilen bağlantıdan edinilebilir.

Yani, sorunuzu doğrudan cevaplamak için: AngularJS -çok- görüşlüdür ve gerçek bir MV * çerçevesidir. Ancak, hala yönergeler içinde jQuery ile bildiğiniz ve sevdiğiniz tüm gerçekten güzel şeyler yapabilirsiniz. Bu "jQuery'de alışkın olduğum şeyi nasıl yaparım?" "AngularJS'yi jQuery'de yaptığım tüm şeylerle nasıl destekleyebilirim?"

Gerçekten çok farklı iki zihin durumu.

Bu soruyu ilginç buluyorum, çünkü JavaScript programlamaya ilk ciddi maruz kaldığım Node.js ve AngularJS idi. Hiç jQuery öğrenmedim ve sanırım bu iyi bir şey, çünkü hiçbir şey öğrenmem gerekmiyor. Aslında, aktif olarak sorunlarıma jQuery çözümleri kaçının ve bunun yerine, onları çözmek için sadece bir "AngularJS yolu" arayın. Bu yüzden, bu soruya verdiğim cevabın temelde "jQuery'i hiç öğrenmemiş biri gibi düşün" ve jQuery'yi doğrudan dahil etmek için herhangi bir cazibeden kaçınacağını sanırım (açıkça AngularJS, sahne arkasında bir dereceye kadar kullanır).

Açısal JS ve jQuery:

AngularJ'ler ve JQuery, JQLite işlevselliği dışında her düzeyde tamamen farklıdır ve AngularJs temel özelliklerini öğrenmeye başladığınızda göreceksiniz (aşağıda açıkladım).

AngularJs, bağımsız istemci tarafı uygulaması oluşturmayı teklif eden bir istemci tarafı çerçevesidir. JQuery, DOM etrafında oynayan bir istemci tarafı kütüphanesidir.

AngularJs Cool Prensibi - Kullanıcı arayüzünüzde bazı değişiklikler yapmak istiyorsanız, model veri değişikliği perspektifinden düşünün. Verilerinizi değiştirin, kullanıcı arayüzü kendisini yeniden oluşturur. Zorunlu olmadıkça ve bu da Açısal Direktiflerle ele alınmadıkça her seferinde DOM etrafında oynamanız gerekmez.

Bu soruyu cevaplamak için ilk kurumsal uygulamadaki deneyimimi AngularJS ile paylaşmak istiyorum. Bunlar, Angular'ın jQuery zihniyetimizi değiştirmeye başladığımız ve Angular'ı kütüphane değil, bir çerçeve gibi elde ettiğimiz en müthiş özellikleridir.

İki yönlü veri bağlama şaşırtıcı: UPDATE, DELTE, INSERT gibi tüm işlevlere sahip bir kılavuzum vardı. Ng-yineleme kullanarak kılavuzun modelini bağlayan bir veri nesnesi var. Silme ve ekleme için yalnızca tek bir satır basit JavaScript kodu yazmanız yeterlidir ve hepsi bu kadar. ızgara modeli anında değiştikçe ızgara otomatik olarak güncellenir. Güncelleme işlevselliği gerçek zamanlıdır, kod yoktur. Harika hissediyorsun!!!

Yeniden kullanılabilir direktifler süper: Direktifleri tek bir yerde yazın ve uygulama boyunca kullanın. AMAN TANRIM!!! Bu yönergeyi disk belleği, normal ifade, doğrulamalar vb. İçin kullandım. Gerçekten harika!

Yönlendirme güçlü: Uygulamayı nasıl kullanmak istediğinize bağlıdır, ancak HTML ve denetleyici (JavaScript) belirtme isteğini yönlendirmek için çok az kod satırı gerektirir.

Denetleyiciler harika: Denetleyiciler kendi HTML'leriyle ilgilenir, ancak bu ayırma ortak işlevler için de iyi çalışır. Ana HTML üzerindeki bir düğmeyi tıklatarak aynı işlevi çağırmak istiyorsanız, her denetleyiciye aynı işlev adını yazın ve tek tek kod yazın.

Eklentiler: Uygulamanızda bir yer paylaşımı göstermek gibi birçok benzer özellik vardır. Bunun için kod yazmanız gerekmez, sadece wc-overlay olarak mevcut bir overlay eklentisi kullanın ve bu otomatik olarak tüm XMLHttpRequest (XHR) isteklerini halleder .

RESTful mimarisi için idealdir : Eksiksiz bir çerçeve olmak AngularJS'yi RESTful mimarisiyle çalışmak için mükemmel kılar. REST CRUD API'lerini aramak çok daha kolaydır ve

Hizmetler : Hizmetleri kullanarak ortak kodları ve denetleyicilere daha az kod yazın. Sevices, kontrolörler arasında ortak işlevleri paylaşmak için kullanılabilir.

Genişletilebilirlik : Angular, HTML direktiflerini açısal direktifler kullanarak genişletmiştir. HTML içinde ifadeler yazın ve çalışma zamanında değerlendirin. Kendi direktiflerinizi ve hizmetlerinizi oluşturun ve başka bir projede ekstra çaba harcamadan kullanın.

Bir JavaScript MV * yeni başlayan ve tamamen uygulama mimarisine (sunucu / istemci tarafı konularda değil) odaklanan olarak, kesinlikle aşağıdaki kaynağı tavsiye ederim (ki henüz şaşırmadım): Addy Osmani tarafından JavaScript Tasarım Desenleri , farklı JavaScript Tasarım Desenlerine giriş olarak . Bu cevapta kullanılan terimler yukarıdaki bağlantılı belgeden alınmıştır. Kabul edilen cevapta gerçekten iyi ifade edilen şeyleri tekrarlamayacağım. Bunun yerine, bu cevap AngularJS'ye (ve diğer kütüphanelere) güç veren teorik arka planlarla bağlantılıdır .

Benim gibi, AngularJS'nin (veya Ember.js , Durandal ve bu konudaki diğer MV * çerçevelerinin) farklı JavaScript tasarım modellerinin çoğunu birleştiren karmaşık bir çerçeve olduğunu hemen anlayacaksınız .

Ayrıca, küresel bir çerçeveye dalmadan önce bu kalıpların her biri için (1) yerel JavaScript kodunu ve (2) daha küçük kütüphaneleri ayrı ayrı test etmeyi daha kolay buldum . Bu, bir çerçevenin hangi önemli sorunları çözdüğünü daha iyi anlamamı sağladı (çünkü kişisel olarak sorunla karşı karşıyasınız).

Örneğin:

• JavaScript Nesneye Yönelik Programlama (bu bir Google arama bağlantısıdır). Bir kütüphane değil, kesinlikle herhangi bir uygulama programlaması için bir önkoşuldur. Bana prototip, yapıcı, singleton ve dekoratör kalıplarının doğal uygulamalarını öğretti
• Cephe kalıbı için jQuery / Alt Çizgi (DOM'u değiştirmek için WYSIWYG'ler gibi)
• Prototip / yapıcı / mixin modeli için prototype.js
• Modül modeli / AMD için RequireJS / Curl.js
• Gözlenebilir, yayınla / abone ol düzeni için KnockoutJS

Not: Bu liste tam değil, 'en iyi kütüphaneler'; sadece kullandığım kütüphaneler oldular. Bu kütüphaneler ayrıca daha fazla desen içerir, bahsedilenler sadece ana odakları veya orijinal amaçlarıdır. Bu listede bir şey eksik olduğunu düşünüyorsanız, lütfen yorumlarda belirtin, ve eklemekten memnuniyet duyarız.

Aslında, AngularJS kullanıyorsanız, artık jQuery'ye ihtiyacınız yok. AngularJS, jQuery ile yapabileceğiniz birçok şey için çok iyi bir "yedek" olan bağlama ve yönergelere sahiptir.

Genellikle AngularJS ve Cordova kullanarak mobil uygulamalar geliştiriyorum . Ihtiyacım olan jQuery gelen tek şey seçici olduğunu.

Google'a göre, orada bağımsız bir jQuery seçici modülü olduğunu görüyorum. Sizzle.

Ve jQuery Selector (Sizzle kullanarak) gücüyle AngularJS kullanarak bir web sitesini hızlı bir şekilde başlatmama yardımcı olan küçük bir kod snippet'i yapmaya karar verdim.

Kodumu burada paylaştım: https://github.com/huytd/Sizzular