E─čer bir jQuery ge├žmi┼čim varsa ÔÇťAngularJS'de D├╝┼č├╝nmekÔÇŁ? [kapal─▒]


Al─▒nan cevaba git


Ben geli┼čen istemci taraf─▒ uygulamalar─▒ a┼čina oldu─čum varsayal─▒m jQuery , ama ┼čimdi kullanmaya ba┼člamak istiyorum angularjs . Gerekli olan paradigma de─či┼čimini tarif edebilir misiniz? ─░┼čte bir cevab─▒ ├žer├ževelemenize yard─▒mc─▒ olabilecek birka├ž soru:

  • ─░stemci taraf─▒ web uygulamalar─▒n─▒ farkl─▒ ┼čekilde nas─▒l tasarlar─▒m ve tasarlar─▒m? En b├╝y├╝k fark nedir?
  • Yapmay─▒ / kullanmay─▒ b─▒rakmal─▒ m─▒y─▒m; Bunun yerine ne yapmaya / kullanmaya ba┼člamal─▒y─▒m?
  • Sunucu taraf─▒nda herhangi bir kayg─▒ / k─▒s─▒tlama var m─▒?

Ben aras─▒na ayr─▒nt─▒l─▒ bir kar┼č─▒la┼čt─▒rma aram─▒yorum jQuery ve AngularJS .


4519









Cevap say─▒s─▒n─▒ say: 15






1. Sayfan─▒z─▒ tasarlamay─▒n ve ard─▒ndan DOM manip├╝lasyonlar─▒yla de─či┼čtirin

JQuery'de, bir sayfa tasarlar ve sonra onu dinamik yapars─▒n─▒z. Bunun sebebi, jQueryÔÇÖ├╝n b├╝y├╝tmek i├žin tasarland─▒─č─▒ndan ve bu basit ├Ânc├╝lden inan─▒lmaz bir ┼čekilde b├╝y├╝d├╝─č├╝ndendir.

Fakat AngularJS'de, mimarl─▒─č─▒n─▒z─▒ d├╝┼č├╝nerek s─▒f─▒rdan ba┼člamal─▒s─▒n─▒z. "DOM'nin bu par├žas─▒na sahibim ve bunu X yapmak istiyorum" d├╝┼č├╝nerek ba┼člamak yerine, ba┼čarmak istediklerinizle ba┼člamal─▒s─▒n─▒z, ard─▒ndan uygulaman─▒z─▒ tasarlamaya ve sonra nihayet g├Âr├╝┼č├╝n├╝z├╝ tasarlamaya devam etmelisiniz.

2. AngularJS ile jQuery'i b├╝y├╝tmeyin

Benzer ┼čekilde, jQuery'nin X, Y ve Z yapt─▒─č─▒ d├╝┼č├╝ncesiyle ba┼člama, bu y├╝zden sadece modeller ve denetleyiciler i├žin bunun ├╝zerine AngularJS ekleyece─čim. Yeni ba┼člad─▒─č─▒n─▒zda bu ger├žekten caziptir, bu y├╝zden her zaman yeni AngularJS geli┼čtiricilerine jQuery kullanmamalar─▒n─▒, en az─▒ndan "A├ž─▒sal Yol" yapmaya al─▒┼č─▒ncaya kadar tavsiye ediyorum.

Burada ve e-posta listesinde bir├žok geli┼čtirici g├Ârd├╝m ve bu karma┼č─▒k ├ž├Âz├╝mleri 150 veya 200 sat─▒rl─▒k kod jQuery eklentileriyle olu┼čturdular. Sonralar─▒ bir geri ├ža─čr─▒ ve $apply kafa kar─▒┼čt─▒r─▒c─▒ ve toplanm─▒┼č olan AngularJS'e yap─▒┼čt─▒rd─▒lar ; ama sonunda i┼če yar─▒yorlar! Sorun, ├žo─ču durumda, jQuery eklentisinin AngularJS'de kodun bir k─▒sm─▒nda yeniden yaz─▒lmas─▒ olabilir, burada aniden her ┼čey anla┼č─▒l─▒r ve anla┼č─▒l─▒r hale gelir.

Alt sat─▒rda bu: ├ž├Âzelti, ilk "AngularJS d├╝┼č├╝n├╝n"; Bir ├ž├Âz├╝m d├╝┼č├╝nemiyorsan─▒z, toplulu─ča sorun; T├╝m bunlardan sonra kolay bir ├ž├Âz├╝m yoksa, o zaman jQuery'e ula┼čmaktan ├žekinmeyin. Fakat jQuery'nin bir koltuk de─čne─či olmas─▒na izin vermeyin, yoksa asla AngularJS'de ustala┼čamazs─▒n─▒z.

3. Her zaman mimarl─▒k a├ž─▒s─▒ndan d├╝┼č├╝n├╝n

O Birinci biliyorum tek sayfal─▒k uygulamalar─▒ vard─▒r uygulamalar . Onlar web sayfas─▒ de─čil . Bu nedenle, bir istemci taraf─▒ geli┼čtiricisi gibi d├╝┼č├╝nmeye ek olarak bir sunucu taraf─▒ geli┼čtiricisi gibi d├╝┼č├╝nmemiz gerekir . Uygulamam─▒z─▒ bireysel, geni┼čletilebilir, test edilebilir bile┼čenlere nas─▒l ay─▒raca─č─▒m─▒z─▒ d├╝┼č├╝nmeliyiz.

O zaman bunu nas─▒l yap─▒yorsun? "AngularJS'de nas─▒l d├╝┼č├╝n├╝rs├╝n?" ─░┼čte jQuery ile z─▒t baz─▒ genel prensipler.

G├Âr├╝n├╝m "resmi kay─▒t" d─▒r.

JQuery'de g├Âr├╝n├╝m├╝ programl─▒ olarak de─či┼čtiririz. Bunun ul gibi 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, onu ┼č├Âyle bir ┼čeyle etkinle┼čtiririz:

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

Sadece manzaraya bakt─▒─č─▒m─▒zda, burada herhangi bir fonksiyonellik oldu─ču hemen belli de─čil. K├╝├ž├╝k uygulamalar i├žin sorun de─čil. Ancak ├Ânemsiz olmayan uygulamalar i├žin i┼čler ├žabucak kafa kar─▒┼čt─▒r─▒c─▒ ve bak─▒m─▒ zorla┼č─▒yor.

Bununla birlikte, AngularJS'de g├Âr├╝n├╝m, g├Âr├╝n├╝m temelli i┼člevselli─čin resmi kayd─▒d─▒r. Bizim ul beyan─▒ art─▒k ┼č├Âyle g├Âr├╝necektir:

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

Bu ikisi de ayn─▒ ┼čeyi yapar, ancak AngularJS s├╝r├╝m├╝nde ┼čablona bakan herkes ne olmas─▒ gerekti─čini bilir. Geli┼čtirme ekibine yeni bir ├╝ye geldi─činde, buna bakabilir ve daha sonra ├╝zerinde ├žal─▒┼čan bir direktif oldu─čunu bilir dropdownMenu ; do─čru cevab─▒ vermesi ya da herhangi bir kod yazmas─▒ gerekmiyor. G├Âr├╝┼č bize ne olmas─▒ gerekti─čini anlatt─▒. ├çok daha temiz.

AngularJS'de yeni olan geli┼čtiriciler genellikle ┼ču gibi bir soru soruyor: belirli bir t├╝rdeki t├╝m ba─člant─▒lar─▒ nas─▒l bulurum ve bunlara bir y├Ânerge eklerim. Geli┼čtirici biz cevaplarken her zaman flabbergasted oldu─čunu: sen yapmazs─▒n. Ama bunu yapmaman─▒n nedeni, bunun yar─▒ jQuery, yar─▒-AngularJS gibi olmas─▒ ve hi├ž iyi olmamas─▒d─▒r. Buradaki sorun, geli┼čtiricinin AngularJS ba─člam─▒nda "jQuery" yapmaya ├žal─▒┼čt─▒─č─▒d─▒r. Bu asla i┼če yaramayacak. G├Âr├╝n├╝m├╝ ise resmi kay─▒t. Bir direktifin d─▒┼č─▒nda (a┼ča─č─▒da bununla ilgili daha fazlas─▒), hi├žbir zaman, asla DOM'yi de─či┼čtirmezsiniz. Ve direktifler g├Âr├╝n├╝mde uygulan─▒r , yani niyet a├ž─▒kt─▒r.

Unutma: tasarlamay─▒n ve i┼čaretleyin. Mimar olmal─▒ ve sonra tasarlamal─▒s─▒n─▒z.

Ba─članma verileri

Bu, AngularJS'in en harika ├Âzelliklerinden biridir ve ├Ânceki b├Âl├╝mde bahsetti─čim DOM manip├╝lasyon t├╝rlerini yapma ihtiyac─▒n─▒ b├╝y├╝k ├Âl├ž├╝de azalt─▒r. AngularJS g├Âr├╝n├╝m├╝n├╝z├╝ otomatik olarak g├╝nceller, b├Âylece zorunda kalmazs─▒n─▒z! JQuery'de olaylara cevap 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 benzeyen bir g├Âr├╝n├╝m i├žin:

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

Endi┼čelerin kar─▒┼čt─▒r─▒lmas─▒n─▒n yan─▒ s─▒ra, daha ├Ânce bahsetti─čim belirtme niyetinde de ayn─▒ problemlerimiz var. Fakat daha da ├Ânemlisi, bir DOM d├╝─č├╝m├╝ne manuel olarak referans vermek ve g├╝ncellemek zorunda kald─▒k. Bir g├╝nl├╝k giri┼čini silmek istiyorsak, bunun i├žin DOM'a da kod yazmam─▒z gerekir. Mant─▒─č─▒ DOM'dan ayr─▒ nas─▒l test ederiz? Peki ya sunumu de─či┼čtirmek istiyorsak?

Bu biraz da─č─▒n─▒k ve ├Ânemsemeyen bir k─▒r─▒lgan. Ancak AngularJS'de bunu yapabiliriz:

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

Ve bizim g├Âr├╝┼č├╝m├╝z ┼čuna benzeyebilir:

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

Ancak bu konuda bizim g├Âr├╝┼č├╝m├╝z ┼č├Âyle olabilir:

 <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─▒n─▒ kullan─▒yoruz. Ve asla denetleyici kodunu de─či┼čtirmek zorunda kalmad─▒k! Fakat daha ├Ânemlisi, g├╝nl├╝─č├╝n nerede veya nas─▒l g├╝ncellendi─čine bak─▒lmaks─▒z─▒n , g├Âr├╝n├╝m de de─či┼čecektir. Otomatik olarak. Temiz!

Burada g├Âstermedim, veri ba─člama iki y├Ânl├╝. B├Âylece, bu g├╝nl├╝k mesajlar─▒ g├Âr├╝n├╝mde yaln─▒zca bu i┼člemi yaparak d├╝zenlenebilir <input ng-model="entry.msg" /> . Ve ├žok sevindi.

Farkl─▒ model katman─▒

JQuery'de DOM bir nevi model gibidir. Ancak AngularJS'de istedi─čimiz ┼čekilde y├Ânetebildi─čimiz ayr─▒ bir model katman─▒na sahibiz, tamamen bak─▒┼č a├ž─▒s─▒ndan. Bu, yukar─▒daki veri ba─člama i├žin yard─▒mc─▒ olur , endi┼čelerin ayr─▒lmas─▒n─▒ sa─člar ve ├žok daha fazla test edilebilirlik sunar. Bu noktadan bahseden di─čer cevaplar, bu y├╝zden sadece onu b─▒rakaca─č─▒m.

Endi┼čelerin ayr─▒lmas─▒

Ve yukar─▒dakilerin hepsi bu a┼č─▒r─▒ temal─▒ temaya ba─član─▒r: endi┼čelerinizi ayr─▒ tutun. G├Âr├╝┼č├╝n├╝z, olmas─▒ gerekenlerin resmi kayd─▒ olarak hareket eder (├žo─čunlukla); Modeliniz verilerinizi temsil eder; yeniden kullan─▒labilir g├Ârevleri ger├žekle┼čtirmek i├žin bir servis katman─▒n─▒z var; DOM manip├╝lasyonu yapars─▒n─▒z ve g├Âr├╝┼člerinizi direktiflerle g├╝├žlendirirsiniz; ve hepsini kontrol cihazlar─▒yla birle┼čtiriyorsun. Bu, di─čer cevaplarda da belirtilmi┼čtir ve ekleyece─čim tek ┼čey, a┼ča─č─▒da ba┼čka bir b├Âl├╝mde tart─▒┼čaca─č─▒m test edilebilirlik ile 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. :-)

DI, geni┼č bir perspektiften, bile┼čenleri ├žok ├Âzg├╝rce ve daha sonra herhangi bir di─čer bile┼čenden ilan edebilece─činiz anlam─▒na gelir, bunun bir ├Ârne─čini isteyin ve verilecektir. Y├╝kleme s─▒ras─▒n─▒, dosya konumlar─▒n─▒ veya buna benzer ┼čeyleri bilmek zorunda de─čilsin. G├╝├ž hemen g├Âr├╝nmeyebilir, ancak yaln─▒zca bir (ortak) ├Ârnek verece─čim: test.

Bizim uygulamada diyelim ki, REST API ├╝zerinden sunucu taraf─▒nda depolamay─▒ uygulayan bir hizmete ve uygulama durumuna ba─čl─▒ olarak yerel depolamaya da ihtiyac─▒m─▒z var. Denetleyicilerimiz ├╝zerinde testler yaparken, sunucu ile ileti┼čim kurmak istemiyoruz - sonu├žta denetleyiciyi test ediyoruz . Orijinal bile┼čenimizle ayn─▒ adda bir sahte servis ekleyebiliriz ve enjekt├Âr, denetleyicimizin sahte olan─▒ otomatik olarak almas─▒n─▒ sa─člar - denetleyicimiz fark─▒ g├Ârmez ve bilmez.

Testten bahsetmi┼čken ...

4. Test odakl─▒ geli┼čim - her zaman

Bu ger├žekten mimarl─▒─č─▒n 3. b├Âl├╝m├╝n├╝n bir par├žas─▒, ancak o kadar ├Ânemli ki onu kendi ├╝st d├╝zey b├Âl├╝m├╝ olarak koyuyorum.

G├Ârd├╝─č├╝n├╝z, kulland─▒─č─▒n─▒z veya yazd─▒─č─▒n─▒z bir├žok jQuery eklentisinin d─▒┼č─▒nda, bunlardan ka├ž tanesinde e┼člik eden bir test paketi vard─▒? ├çok fazla de─čil, ├ž├╝nk├╝ jQuery buna pek uygun de─čil. Ama Angular JS.

JQuery'de test etmenin tek yolu, genellikle testlerimizin DOM manip├╝lasyonu ger├žekle┼čtirebilece─či bir ├Ârnek / demo sayfas─▒yla ba─č─▒ms─▒z olarak bile┼čen olu┼čturmakt─▒r. O zaman ayr─▒ bir bile┼čen geli┼čtirmeliyiz ve sonra onu uygulamam─▒zla b├╝t├╝nle┼čtirmeliyiz. Ne kadar rahats─▒z edici! ├ço─ču zaman, jQuery ile geli┼čtirirken, test odakl─▒ geli┼čtirme yerine yinelemeyi tercih ediyoruz. Ve kim bizi su├žlayabilir?

Ancak endi┼čelerden ayr─▒ld─▒─č─▒m─▒z i├žin, AngularJS'de yinelemeli bir ┼čekilde test odakl─▒ geli┼čtirme yapabiliriz! Mesela, m├Ân├╝s├╝m├╝zde mevcut rotan─▒z─▒n ne oldu─čunu belirten ├žok basit bir y├Ânerge istedi─čimizi varsayal─▒m. Ba┼čvurumuz ─▒┼č─▒─č─▒nda ne istedi─čimizi beyan edebiliriz:

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

Tamam, ┼čimdi var olmayan when-active direktif i├žin bir test yazabiliriz :

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

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

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

Testimizi yapt─▒─č─▒m─▒zda, ba┼čar─▒s─▒z oldu─čunu onaylayabiliriz. Direktifi 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 istenildi─či gibi ├žal─▒┼č─▒yor. Bizim geli┼čmedir hem iteratif ve test odakl─▒. Wicked-serin.

5. Kavramsal olarak, direktifler paketlenmi┼č de─čildir jQuery

S─▒k s─▒k "yaln─▒zca bir y├Ânergede DOM manip├╝lasyonu yapar" ifadesini duyars─▒n─▒z. Bu bir zorunluluktur. Uygun bir ├Âzenle davran─▒n!

Ama biraz daha derine dalal─▒m ...

Baz─▒ direktifler zaten g├Âr├╝┼č alan─▒nda olan─▒ (d├╝┼č├╝n├╝r ngClass ) dekore eder ve bu nedenle bazen DOM manip├╝lasyonunu hemen yapar ve temel olarak yap─▒l─▒r. Ancak bir direktif bir "widget" gibiyse ve bir ┼čablona sahipse , endi┼čelerin ayr─▒lmas─▒na da sayg─▒ g├Âstermelidir. Yani, ┼čablon da link ve kontrol├Âr fonksiyonlar─▒ndaki uygulamas─▒ndan b├╝y├╝k ├Âl├ž├╝de ba─č─▒ms─▒z kalmal─▒d─▒r.

AngularJS bunu ├žok kolayla┼čt─▒rmak i├žin bir dizi ara├žla birlikte gelir; ile ngClass dinamik olarak s─▒n─▒f g├╝ncelleyebilir; ngModel iki y├Ânl├╝ veri ba─članmas─▒na izin verir; ngShow ve ngHide programl─▒ olarak bir ├Â─čeyi g├Âsterme veya gizleme; ve daha pek ├žo─ču - kendimizi yazd─▒klar─▒m─▒z dahil. Ba┼čka bir deyi┼čle, DOM manip├╝lasyonu olmadan her t├╝rl├╝ tuhafl─▒─č─▒ yapabiliriz . DOM manip├╝lasyonu ne kadar az olursa, direktifler ne kadar kolay test edilirse, stilleri o kadar kolay olur, gelecekte ne kadar kolay de─či┼čtirilirse ve o kadar kullan─▒labilir ve da─č─▒t─▒labilir olurlar.

AngularJSÔÇÖde yeni olan bir├žok geli┼čtiriciyi bir s├╝r├╝ jQuery atmak i├žin direktifler olarak g├Âr├╝yorum. Ba┼čka bir deyi┼čle, "denetleyicide DOM manip├╝lasyonu yapamad─▒─č─▒m i├žin o kodu bir y├Ânergeye koyaca─č─▒m" diye d├╝┼č├╝n├╝yorlar. Bu kesinlikle ├žok daha iyi olsa da, genellikle hala yanl─▒┼č .

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 deseni g├Âsteren h─▒zl─▒ bir ├Ârnek. De─či┼čtirilebilir bir d├╝─čme istiyoruz. (Not: bu ├Ârnek biraz tart─▒┼čmal─▒ ve ayn─▒ ┼čekilde ├ž├Âz├╝lm├╝┼č daha karma┼č─▒k vakalar─▒ temsil eden bir skosh).

 .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 asla gerekli olmad─▒. Burada yapt─▒─č─▒m─▒z hi├žbir ┼čey yok.
  2. ─░kincisi, zaten sayfam─▒zdaki jQuery olsa bile, burada kullanmak i├žin hi├žbir sebep yoktur; Basit├že kullanabiliriz angular.element ve bile┼čenimiz hala jQuery olmayan bir projeye girdi─činde ├žal─▒┼čacakt─▒r.
  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 kullanmam─▒za gerek yok $ - sadece kullanabiliriz angular.element .
  4. D├Ârd├╝nc├╝s├╝, ├╝├ž├╝nc├╝yle yak─▒ndan ilgili, jqLite ├Â─čelerinin sar─▒lmas─▒na gerek olmamas─▒ $ - fonksiyona element ge├žirilen zaten bir jQuery ├Â─česi olacak! link
  5. Ve ├Ânceki b├Âl├╝mlerde bahsetti─čimiz be┼čincisi, neden ┼čablon olaylar─▒n─▒ mant─▒─č─▒m─▒za kar─▒┼čt─▒r─▒yoruz?

Bu y├Ânerge tekrar yaz─▒labilir (├žok karma┼č─▒k durumlarda 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 ┼čablonu ┼čablondad─▒r, b├Âylece siz (veya kullan─▒c─▒lar─▒n─▒z) gerekli herhangi bir stili kar┼č─▒layan biri i├žin kolayca de─či┼čtirebilir ve mant─▒─ča asla dokunulmak zorunda kalmazs─▒n─▒z. Yeniden kullan─▒labilirlik - bom!

Ve hala test etmek gibi di─čer t├╝m avantajlar var - bu kolay! ┼×ablonda ne olursa olsun, direktifin i├ž API'sine hi├žbir zaman dokunulmaz, bu nedenle yeniden d├╝zenleme kolayd─▒r. Y├Ânetmeli─če dokunmadan ┼čablonu istedi─činiz kadar de─či┼čtirebilirsiniz. Ve neyi de─či┼čtirdi─činiz ├Ânemli de─čil, testleriniz hala ba┼čar─▒l─▒.

w00t!

├ľyleyse, direktifler sadece jQuery benzeri fonksiyonlar─▒n koleksiyonlar─▒ de─čilse, bunlar nedir? Direktifler asl─▒nda HTML'in uzant─▒lar─▒d─▒r . HTML yapman─▒z gereken bir ┼čeyi yapmazsa, sizin i├žin yapmas─▒ i├žin bir y├Ânerge yazars─▒n─▒z ve daha sonra bunu HTML'in bir par├žas─▒ 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 , ngClass vd.

├Âzet

JQuery bile kullanmay─▒n. Onu bile ekleme. Seni geri tutacak. Ve jQuery'de nas─▒l ├ž├Âzece─činizi bildi─činizi d├╝┼č├╝nd├╝─č├╝n├╝z bir problemle kar┼č─▒la┼čt─▒─č─▒n─▒zda, bunu elde etmeden ├Ânce $ , AngularJS'nin s─▒n─▒rlar─▒ i├žinde nas─▒l yapaca─č─▒n─▒z─▒ d├╝┼č├╝nmeye ├žal─▒┼č─▒n. Bilmiyorsan sor! 20'den 19 kez, bunu yapman─▒n en iyi yolu jQuery'e ihtiya├ž duymaz ve jQuery ile ├ž├Âzmeyi denemek sizin i├žin daha fazla ├žal─▒┼čmayla sonu├žlan─▒r.


7181







Zorunlu Ôćĺ bildirimsel

JQuery'de se├žiciler DOM ├Â─čelerini bulmak ve ard─▒ndan olay i┼čleyicilerini kendilerine ba─člamak / kaydetmek i├žin kullan─▒l─▒r. Bir etkinlik tetiklendi─činde, bu (zorunlu) kod DOM'yi 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, AngularJS y├Ânergelerini i├žeren (bildirimsel) HTML'dir . Direktifler, olay i┼čleyicileri bizim i├žin perde arkas─▒nda kurar ve bize dinamik veri taban─▒ sa─člar. Se├žiciler nadiren kullan─▒l─▒r, bu y├╝zden kimliklere (ve baz─▒ s─▒n─▒f t├╝rlerine) duyulan ihtiya├ž b├╝y├╝k ├Âl├ž├╝de azal─▒r. G├Âr├╝n├╝mler modellere ba─član─▒r (kapsamlar arac─▒l─▒─č─▒yla). G├Âr├╝n├╝mler modelin bir yans─▒mas─▒d─▒r. Olaylar modelleri de─či┼čtirir (yani veriler, kapsam ├Âzellikleri) ve bu modelleri yans─▒tan g├Âr├╝n├╝mler "otomatik olarak" g├╝ncellenir.

AngularJS'de, verilerinizi tutan jQuery-select DOM ├Â─čeleri yerine modeller hakk─▒nda d├╝┼č├╝n├╝n. Kullan─▒c─▒lar─▒n g├Ârd├╝klerini manip├╝le etmek i├žin geri aramalar─▒ kaydetmek yerine, bu modellerin projeksiyonlar─▒ olarak g├Ârmeyi d├╝┼č├╝n├╝n.

Endi┼čelerin ayr─▒lmas─▒

jQuery g├Âze ├žarpmayan JavaScript kullan─▒yor - davran─▒┼č (JavaScript) yap─▒dan (HTML) ayr─▒l─▒yor.

AngularJS, davran─▒┼č─▒ g├Âr├╝n├╝m / yap─▒dan (HTML) kald─▒rmak i├žin denetleyicileri ve y├Ânergeleri (her biri kendi denetleyicisine sahip olabilir 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 filtreler i├žerir .

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

Uygulama tasar─▒m─▒

AngularJS uygulamas─▒ tasarlamada bir yakla┼č─▒m:

  1. Modellerini d├╝┼č├╝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 ba─člama almak 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├Ânlendirmeyi kullanarak veya ng denetleyicisini kullanarak). Denetleyiciye, g├Âr├╝n├╝m├╝n i┼čini yapmas─▒ i├žin gereken her veri modelini bulmas─▒n─▒ / almas─▒n─▒ sa─člay─▒n. Kontrol cihazlar─▒n─▒ m├╝mk├╝n oldu─čunca ince yap─▒n.

Prototip devralma

JavaScript prototip kal─▒t─▒m─▒n nas─▒l ├žal─▒┼čt─▒─č─▒n─▒ bilmeden jQuery ile ├žok ┼čey yapabilirsiniz. AngularJS uygulamalar─▒n─▒ geli┼čtirirken, JavaScript'i devralma konusunda iyi bir anlay─▒┼č─▒n─▒z varsa, baz─▒ yayg─▒n tuzaklardan ka├ž─▒nacaks─▒n─▒z. Tavsiye edilen okuma: AngularJS'de kapsam prototip / prototipik kal─▒t─▒m─▒n farkl─▒l─▒klar─▒ nelerdir?


408







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:

  1. HTML - Anlamsal anlam. HTML tek ba┼č─▒na durmal─▒.
  2. CSS - Styling, CSS olmadan sayfa hala okunabilir.
  3. 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:

  1. 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.
  2. 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.
  3. 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.

Ba─č─▒ml─▒l─▒k enjeksiyonu (DI) - ├ľrnekleme - aka de-spaghettification

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.


184







Gerekli olan paradigma de─či┼čimini tarif edebilir misiniz?

Zorunlu ve Beyanname

JQuery ile DOM'a ne olmas─▒ gerekti─čini, ad─▒m ad─▒m anlat─▒rs─▒n─▒z. AngularJS ile hangi sonu├žlar─▒ istedi─činizi ancak nas─▒l yapaca─č─▒n─▒z─▒ tan─▒mlamazs─▒n─▒z. Daha bu konuda burada . Ayr─▒ca, Mark Rajcok'un cevab─▒n─▒ kontrol edin.

─░stemci taraf─▒ web uygulamalar─▒n─▒ farkl─▒ ┼čekilde nas─▒l tasarlar─▒m ve tasarlar─▒m?

AngularJS, MVC desenini kullanan t├╝m istemci taraf─▒ bir ├žer├ževedir ( grafiksel g├Âsterimlerini inceleyin ). B├╝y├╝k ├Âl├ž├╝de endi┼čelerin ayr─▒lmas─▒na odaklanmaktad─▒r.

En b├╝y├╝k fark nedir? Yapmay─▒ / kullanmay─▒ b─▒rakmal─▒ m─▒y─▒m; Bunun 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 pek ├žok harika ├Âzelli─či birle┼čtiren son derece test edilebilir, g├╝zel bir m├╝┼čteri taraf─▒ ├žer├ževedir .

Test odakl─▒ geli┼čmeyi kolayla┼čt─▒ran endi┼čelerin ve testlerin ayr─▒┼čt─▒r─▒lmas─▒na ( ├╝nite testi ve u├žtan uca test) odaklan─▒r .

Ba┼člaman─▒n en iyi yolu m├╝thi┼č e─čitmenlerinden ge├žmek . Birka├ž saat i├žinde basamaklardan ge├žebilirsiniz; Bununla birlikte, sahnelerin arkas─▒ndaki kavramlar─▒ anlamak istemeniz durumunda, daha fazla okuma i├žin say─▒s─▒z referans i├žerirler.

Sunucu taraf─▒nda herhangi bir kayg─▒ / k─▒s─▒tlama var m─▒?

Zaten saf jQuery kulland─▒─č─▒n─▒z mevcut uygulamalarda kullanabilirsiniz. Ancak, AngularJS ├Âzelliklerinden tam olarak yararlanmak istiyorsan─▒z, bir RESTful yakla┼č─▒m─▒ 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.


152







"Paradigma de─či┼čimini" tan─▒mlamak i├žin k─▒sa bir cevab─▒n yeterli olabilece─čini d├╝┼č├╝n├╝yorum.

AngularJS elementleri 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 elemanlar─▒ bulman─▒za gerek duymaz (veya istemez) - AngularJS'in jqLite'sine kar┼č─▒ tam geli┼čmi┼č jQuery aras─▒ndaki temel fark , jqLite'─▒n se├žicileri desteklememesidir .

Bu y├╝zden insanlar "hi├ž jQuery dahil etme" deyince, bunun nedeni se├žicileri kullanman─▒ istemedikleridir; bunun yerine y├Ânergeleri kullanmay─▒ ├Â─črenmenizi istiyorlar. Direkt, se├žme!


84







jQuery

jQuery, getElementByHerpDerp k─▒sa ve ├žapraz taray─▒c─▒ gibi g├╝l├╝n├ž derecede uzun JavaScript komutlar─▒ yapar .

angularjs

AngularJS (HTML, statik sayfalar i├žin tasarland─▒─č─▒ndan beri) dinamik web uygulamalar─▒yla iyi ├žal─▒┼čan ┼čeyleri yapan kendi HTML etiketlerinizi / niteliklerinizi olu┼čturman─▒za olanak sa─člar.

D├╝zenle:

"Bir jQuery ge├žmi┼čim var, AngularJS'de nas─▒l d├╝┼č├╝n├╝r├╝m?" "HTML ge├žmi┼čim var, JavaScriptÔÇÖte nas─▒l d├╝┼č├╝n├╝r├╝m?" Soruyu sordu─čunuz ger├že─či, muhtemelen bu iki kayna─č─▒n temel ama├žlar─▒n─▒ anlamad─▒─č─▒n─▒z─▒ g├Âstermektedir. Bu y├╝zden soruyu cevaplamay─▒ se├žtim, "AngularJS y├Ânergeleri kullan─▒yor, jQuery ise CSS se├žicileri kullanarak bunu yapan bir jQuery nesnesi yapmak i├žin CSS se├žicilerini kullan─▒yor." . 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┼čletti─či i├žin <div> sadece bir uygulama yapmak i├žin her yere koyman─▒z gerekmez . HTML'yi asl─▒nda tasarland─▒─č─▒ ┼čeyden ziyade uygulamalar i├žin ├žal─▒┼č─▒r hale getirir, bu statik, e─čitimsel web sayfalar─▒d─▒r. Bunu JavaScript kullanarak dolamba├žl─▒ bir ┼čekilde ger├žekle┼čtirir, ancak temel olarak JavaScript'in de─čil HTML'nin bir uzant─▒s─▒d─▒r.


69







jQuery: E─čer 'sorgulama hakk─▒nda ├žok ┼čey d├╝┼č├╝nmek DOM DOM elemanlar─▒' ve bir ┼čey yap─▒yor.

AngularJS: Model ger├žek, ve siz her zaman bu ANGLE'den d├╝┼č├╝n├╝rs├╝n├╝z.

├ľrne─čin, DOMÔÇÖda, jQueryÔÇÖde, bir bi├žimde g├Âr├╝nt├╝lemek istedi─činiz THE serverÔÇÖdan veri ald─▒─č─▒n─▒zda, '1' e ihtiyac─▒n─▒z vard─▒r. BUL: 'DOM'da bu verileri yerle┼čtirmek istedi─činiz' 2. G├ťNCELLEME / EKLE 'orada yeni bir d├╝─č├╝m olu┼čturarak veya sadece innerHTML ayarlayarak . Sonra bu g├Âr├╝n├╝m├╝ g├╝ncellemek istedi─činizde, o zaman '3. 'Yer ve' 4 BUL. G├ťNCELLE┼×T─░RME'. Sunucudan veri alma ve bi├žimlendirme ba─člam─▒nda yap─▒lan t├╝m bu bulma ve g├╝ncelleme d├Âng├╝s├╝ AngularJS'de ger├žekle┼čtirildi.

AngularJS ile modelinize sahipsiniz (zaten kulland─▒─č─▒n─▒z JavaScript nesneleri) ve modelin de─čeri size modelden (a├ž─▒k├ža) ve g├Âr├╝n├╝mden bahseder ve model ├╝zerinde yap─▒lan bir i┼člem otomatik olarak g├Âr├╝n├╝me ge├žer, d├╝┼č├╝nmek zorunda de─čilsin. Kendinizi AngularJS'te bulacaks─▒n─▒z, art─▒k DOM'da bir ┼čeyler bulam─▒yorsunuz.

Ba┼čka bir ifadeyle, jQuery'de CSS se├žicileri hakk─▒nda d├╝┼č├╝nmelisiniz , yani, HTML veya renk veya de─čerlerini alabilmem i├žin bir s─▒n─▒f veya ├Âzniteli─čin oldu─ču div veya nerede oldu─ču td , yani AngularJS, Kendinizi bu ┼čekilde d├╝┼č├╝nerek bulacaks─▒n─▒z: Hangi modelle u─čra┼č─▒yorum, modelin de─čerini true olarak ayarlayaca─č─▒m. Bu de─čeri yans─▒tan g├Âr├╝n├╝m├╝n i┼čaretli bir kutu mu yoksa bir td elementte mi bulundu─čunu kendiniz rahats─▒z etmiyorsunuzdur (detaylar jQuery'de d├╝┼č├╝nmeniz gereken detaylard─▒).

Ve AngularJS'deki DOM manip├╝lasyonuyla, kendinizi ge├žerli HTML uzant─▒lar─▒ olarak d├╝┼č├╝nebilece─činiz y├Ânergeler ve filtreler eklerken bulabilirsiniz.

AngularJS'de deneyimleyece─činiz bir ┼čey daha: jQuery'de jQuery i┼člevlerini ├žok ├ža─č─▒r─▒yorsunuz, AngularJS'de, AngularJS i┼člevlerinizi arayacak, bu y├╝zden AngularJS 'size nas─▒l bir ┼čeyler yap─▒laca─č─▒n─▒ s├Âyleyecektir' ancak faydalar─▒ buna de─čer, bu y├╝zden AngularJS'i ├Â─črenmek genellikle AngularJS'nin ne istedi─čini veya AngularJS'nin i┼člevlerinizi sunman─▒z─▒ istedi─či ┼čekilde ├Â─črenmek anlam─▒na gelir ve buna g├Âre onu arayacakt─▒r. Bu, AngularJS'i bir k├╝t├╝phaneden ziyade bir ├žer├ževe yapan ┼čeylerden biridir.


61







Bunlar ├žok g├╝zel ama uzun cevaplar.

Deneyimlerimi ├Âzetlemek i├žin:

  1. Kontrol├Ârler ve sa─člay─▒c─▒lar (hizmetler, fabrikalar vb.) HTML'yi de─čil veri modelini de─či┼čtirmek i├žindir.
  2. HTML ve y├Ânergeler, d├╝zeni ve modele ba─člamay─▒ tan─▒mlar.
  3. Denetleyiciler aras─▒nda veri payla┼čman─▒z gerekirse, bir hizmet veya fabrika olu┼čturun - bunlar uygulama genelinde payla┼č─▒lan tektonlard─▒r.
  4. Bir HTML gerecine 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.

46


2014-05-16





jQuery bir DOM manip├╝lasyon k├╝t├╝phanesidir.

AngularJS bir MV * ├žer├ževesidir.

Asl─▒nda, AngularJS az say─▒da 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 ve ne zaman arayaca─č─▒n─▒zla ilgili kararlar─▒n sahibi olur!

AngularJS'in kendisi i├žinde bir jQuery-lite s├╝r├╝m├╝ bulunur. Bu nedenle, baz─▒ temel DOM se├žim / manip├╝lasyonlar─▒ i├žin, ger├žekten jQuery k├╝t├╝phanesini dahil etmeniz gerekmez (a─čda ├žal─▒┼čmak i├žin bir├žok bayt tasarrufu sa─člar).

AngularJS, DOM manip├╝lasyonu ve yeniden kullan─▒labilir UI bile┼čenlerini tasarlamak i├žin "Y├Ânergeler" kavram─▒na sahiptir, bu nedenle DOM manip├╝lasyonuyla ilgili ┼čeyler yapma ihtiyac─▒ duydu─čunuzda bunu kullanmal─▒s─▒n─▒z (y├Ânergeler yaln─▒zca AngularJS kullan─▒rken jQuery kodunu yazman─▒z gereken yerdir).

AngularJS baz─▒ ├Â─črenme e─črileri i├žerir (jQuery'den daha fazla :-).

-> jQuery arkaplan─▒ndan gelen herhangi bir geli┼čtirici i├žin ilk tavsiyem "AngularJS gibi zengin bir ├žer├ževeye ge├žmeden ├Ânce JavaScript'i birinci s─▒n─▒f bir dil olarak ├Â─črenmek!" Yukar─▒daki ger├že─či zor yoldan ├Â─črendim.

─░yi ┼čanslar.


45







Onlar elma ve portakal. Onlar─▒ kar┼č─▒la┼čt─▒rmak istemezsin. Onlar iki farkl─▒ ┼čey. AngularJs, halihaz─▒rda ┼či┼čirilmi┼č jQuery s├╝r├╝m├╝n├╝ bile eklemeden temel DOM manip├╝lasyonu yapman─▒z─▒ sa─člayan yerle┼čik jQuery lite'a sahiptir.

jQuery, DOM manip├╝lasyonuyla 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 / yal─▒tman─▒za izin vermesidir. Ng-click gibi kullanmaya haz─▒r dahili 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 denetleyicilerde veya hizmetlerde DOM manip├╝lasyon kodunu kar─▒┼čt─▒rmazs─▒n─▒z.

A├ž─▒sal, uygulaman─▒z─▒ par├žalara ay─▒r─▒r - Denetleyiciler - Hizmetler - G├Âr├╝n├╝mler - vb.

ve bir ┼čey daha var, direktif bu. Herhangi bir DOM ├Â─česine ekleyebilece─činiz bir ├Âzelliktir ve jQuery'nizin AngularJs bile┼čenleriyle ├žak─▒┼čt─▒─č─▒ veya mimarisiyle u─čra┼čt─▒─č─▒ i├žin endi┼čelenmeden jQuery ile ├ž─▒lg─▒na d├Ânebilirsiniz.

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─▒, bu y├╝zden onlar─▒ tekrar dahil etmeye ├žal─▒┼čmad─▒klar─▒n─▒ s├Âyledi.


34


2013-08-14





Podcast'i izleyin Javber: Jabber: B├Âl├╝m 32 , AngularJS: Misko Hevery ve Igor Minar'─▒n ├Âzg├╝n yarat─▒c─▒lar─▒n─▒ i├žeren b├Âl├╝m. ├ľzellikle jQuery gibi di─čer JavaScript arkaplanlar─▒ndan AngularJS'e gelmenin nas─▒l bir ┼čey oldu─ču hakk─▒nda ├žok konu┼čuyorlar.

Podcast'te yay─▒nlanan noktalardan biri, sorunuzla ilgili olarak benim i├žin bir ├žok ┼čeyi t─▒klatt─▒:

MISKO : [...] Angular'da ├žok zor d├╝┼č├╝nd├╝─č├╝m├╝z ┼čeylerden biri, ka├žabilmek i├žin nas─▒l bir├žok ka├ž─▒┼č ├Ârt├╝leri sa─člar─▒z ki d─▒┼čar─▒ ├ž─▒kabilmek ve temelde bunun d─▒┼č─▒nda bir yol bulmak. Yani bizim i├žin cevap, ÔÇťDirektiflerÔÇŁ olarak adland─▒r─▒lan ┼čudur. Ve direktiflerle, asl─▒nda k├╝├ž├╝k bir jQuery JavaScript'i olu┼čturabilirsiniz, istedi─činiz ┼čeyi yapabilirsiniz.

IGOR : Yani, ┼čablonda bu belirli ├Â─čeye veya bu CSS'ye ne zaman rastlad─▒─č─▒n─▒z─▒ s├Âyleyen derleyiciye talimat olarak y├Ânergeyi d├╝┼č├╝n├╝n ve bu t├╝r bir kodu ve bu kod, ├Â─čenin sorumlusu ve bu ├Â─čenin alt─▒ndaki her ┼čeyden sorumludur. DOM a─čac─▒nda.

T├╝m b├Âl├╝m├╝n bir kopyas─▒ yukar─▒da verilen ba─člant─▒da mevcuttur.

Yani, do─črudan sorunuzu cevaplamak i├žin: AngularJS ├žok y├Ânl├╝ ve ger├žek bir MV * ├žer├ževesidir. Ancak, hala bildi─činiz ve y├Ânergelerin i├žindeki jQuery ile sevdi─činiz ger├žekten harika ┼čeyler yapabilirsiniz. Bu, "jQuery'de eskiden yapt─▒─č─▒m ┼čeyi nas─▒l yapar─▒m?" Meselesi de─čil. "AngularJSÔÇÖe jQueryÔÇÖde yapt─▒─č─▒m ┼čeylerin hepsini nas─▒l ekleyebilirim?" meselesi oldu─ču kadar.

Bu ger├žekten iki ├žok farkl─▒ zihin durumu.


31







Bu soruyu ilgin├ž buluyorum ├ž├╝nk├╝ JavaScript programlamaya ilk ciddi maruz kalmam Node.js ve AngularJS idi. JQuery'i hi├ž ├Â─črenmedim ve san─▒r─▒m bu iyi bir ┼čey ├ž├╝nk├╝ hi├žbir ┼čeyi ├Â─črenmem gerekmiyor. Asl─▒nda, problemlerimin jQuery ├ž├Âz├╝mlerinden aktif olarak ka├ž─▒n─▒yorum ve bunun yerine, sadece bunlar─▒ ├ž├Âzmek i├žin bir "AngularJS yolu" arad─▒m. Bu nedenle, bu soruya verdi─čim cevab─▒n temelde ÔÇťjQuery'i hi├ž ├Â─črenmemi┼č biri gibi d├╝┼č├╝nÔÇŁ ve do─črudan jQuery'yi dahil etme e─čiliminden ka├ž─▒naca─č─▒n─▒ tahmin ediyorum (a├ž─▒k├ža AngularJS bunu sahnelerin arkas─▒nda bir ├Âl├ž├╝de kullan─▒yor).


30







AngularJS ve jQuery:

AngularJs ve JQuery, JQLite i┼člevselli─či hari├ž her seviyede tamamen farkl─▒d─▒r ve AngularJs'in temel ├Âzelliklerini ├Â─črenmeye ba┼člad─▒─č─▒n─▒zda bunu g├Âreceksiniz (a┼ča─č─▒da a├ž─▒klad─▒m).

AngularJs, ba─č─▒ms─▒z m├╝┼čteri taraf─▒ uygulamas─▒n─▒ olu┼čturmay─▒ teklif eden bir m├╝┼čteri taraf─▒ ├žer├ževesidir. JQuery, DOM etraf─▒nda oynayan bir istemci taraf─▒ k├╝t├╝phanesidir.

AngularJs Cool Principle - 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├╝ yeniden olu┼čturulur. Zorunda gerekmedik├že ve ayn─▒ zamanda A├ž─▒sal Y├Ânergeler arac─▒l─▒─č─▒yla 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 yerde sa─člad─▒─č─▒ en harika ├Âzelliklerdir ve Angular'─▒ k├╝t├╝phane yerine bir ├žer├ževe gibi elde ederiz.

─░ki y├Ânl├╝ veri ba─člama ┼ča┼č─▒rt─▒c─▒: T├╝m i┼člevsellikler UPDATE, DELTE, INSERT olan bir ┼čebekem vard─▒. Ng-repeat kullanarak ─▒zgara modelini ba─člayan bir veri nesnesine sahibim. Sadece silmek ve eklemek i├žin tek bir sat─▒r basit JavaScript kodu yazman─▒z yeterlidir. ─▒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 bir yere yaz─▒n ve uygulama boyunca kullan─▒n. AMAN TANRIM!!! Bu y├Ânergeyi sayfalama, regex, validasyon vb. ─░├žin kulland─▒m. Ger├žekten harika!

Y├Ânlendirme g├╝├žl├╝: Nas─▒l kullanmak istedi─činiz uygulaman─▒za ba─čl─▒, ancak HTML ve denetleyici belirtme iste─čini y├Ânlendirmek i├žin ├žok az say─▒da kod sat─▒r─▒ gerektiriyor (JavaScript)

Denetleyiciler harika: Denetleyiciler kendi HTML'leriyle ilgilenirler, ancak bu ayr─▒lma, ortak i┼člevsellik i├žin de iyi ├žal─▒┼č─▒r. Ana HTML'deki bir d├╝─čmeyi t─▒klatarak ayn─▒ i┼člevi ├ža─č─▒rmak istiyorsan─▒z, her denetleyiciye ayn─▒ i┼člev ad─▒n─▒ yazman─▒z ve tek tek kod yazman─▒z yeterlidir.

Eklentiler: Uygulaman─▒zda bir bindirme g├Âsterme gibi ba┼čka bir├žok benzer ├Âzellik var. Bunun i├žin kod yazman─▒za gerek yoktur, sadece wc-overlay olarak kullan─▒labilen bir bindirme eklentisini kullan─▒n ve bu otomatik olarak t├╝m XMLHttpRequest (XHR) isteklerini yerine getirecektir .

RESTful mimarisi i├žin idealdir : Eksiksiz bir ├žer├ževeye sahip olmak, AngularJS'yi RESTful mimarisi ile ├žal─▒┼čmak i├žin m├╝kemmel k─▒lar. REST CRUD API'lerini ├ža─č─▒rmak ├žok kolayd─▒r ve

Servisler : Servisleri kullanarak ortak kodlar yaz ve kontrol cihazlar─▒nda daha az kod yaz. Kontrol cihazlar─▒ aras─▒nda ortak i┼člevleri payla┼čmak i├žin servisler kullan─▒labilir.

Geni┼čletilebilirlik : Angular, HTML direktiflerini a├ž─▒sal y├Ânergeleri kullanarak geni┼čletmi┼čtir. ─░fadeleri html i├žine yaz─▒n ve ├žal─▒┼čma zaman─▒nda de─čerlendirin. Kendi direktiflerinizi ve hizmetlerinizi olu┼čturun ve ilave bir ├žaba g├Âstermeden ba┼čka bir projede kullan─▒n.


23







Bir JavaScript MV * acemi olarak ve tamamen uygulama mimarisine odaklan─▒rken (sunucu / m├╝┼čteri taraf─▒ ile ilgili de─čil), kesinlikle ┼ču kaynaklardan bahsederim (hen├╝z ┼ča┼č─▒rmam─▒┼čt─▒m): JavaScript Tasar─▒m Modelleri , Addy Osmani , farkl─▒ JavaScript Tasar─▒m Desenlerine giri┼č olarak . Bu cevapta kullan─▒lan terimler yukar─▒daki ba─člant─▒l─▒ belgeden al─▒nm─▒┼čt─▒r. Kabul edilen cevab─▒n ger├žekte iyi yaz─▒lm─▒┼č olanlar─▒n─▒ tekrarlamayaca─č─▒m. Bunun yerine, bu cevap AngularJS'e (ve di─čer k├╝t├╝phanelere) g├╝├ž veren teorik arkaplanlara dayanmaktad─▒r .

Benim gibi, AngularJS'in (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 .

Ben teste, kolay da buldum (1) yerli JavaScript kodu ve (2) bu desenlerin her biri i├žin k├╝├ž├╝k k├╝t├╝phanelerden ayr─▒ bir genel ├žer├ževe dalmadan ├Ânce. Bu, bir ├žer├ževenin hangi ├Ânemli konulara de─čindi─čini daha iyi anlamam─▒ sa─člad─▒ (├ž├╝nk├╝ sorunla ki┼čisel olarak kar┼č─▒ kar┼č─▒ya kal─▒yorsunuz).

├ľrne─čin:

  • JavaScript Nesneye Y├Ânelik Programlama (bu bir Google arama ba─člant─▒s─▒d─▒r). Bu bir k├╝t├╝phane de─čildir, ancak herhangi bir uygulama programlamas─▒n─▒n kesinlikle bir ├Ân ┼čart─▒d─▒r. Bana prototip, yap─▒c─▒, singleton ve dekorat├Âr kal─▒plar─▒n─▒n do─čal uygulamalar─▒n─▒ ├Â─čretti.
  • http://jquery.comCephe d├╝zeni i├žin jQuery / Undercore (DOM'u manip├╝le eden WYSIWYG'ler gibi)
  • Prototip / constructor / mixin kal─▒b─▒ i├žin prototip.js
  • http://requirejs.org/ AMD mod├╝l kal─▒b─▒ i├žin RequireJS / Curl.js
  • KnockoutJS i├žin g├Âzlenebilir, desen Yay─▒n / abonelik

Not: Bu liste tam de─čildir, ne de 'en iyi k├╝t├╝phaneler'; onlar sadece benim kulland─▒─č─▒m k├╝t├╝phaneler. Bu k├╝t├╝phaneler ayr─▒ca daha fazla desen i├žerir, bahsedilenler sadece ana odaklar─▒ veya orijinal ama├žlar─▒d─▒r. Bu listeden bir ┼čey eksik oldu─čunu d├╝┼č├╝n├╝yorsan─▒z, l├╝tfen yorumlarda belirtin, ben de eklemekten memnuniyet duyar─▒m.


20







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 "de─či┼čtirme" olan ba─člay─▒c─▒ ve y├Ânergeye sahiptir.

Genellikle AngularJS ve Cordova kullanarak mobil uygulamalar geli┼čtiririm . JQuery'den ihtiyac─▒m olan SADECE, Selector.

Googling ile d─▒┼čar─▒da ba─č─▒ms─▒z bir jQuery se├žici mod├╝l oldu─čunu g├Âr├╝yorum. Sizzle.

Ve h─▒zl─▒ bir ┼čekilde jQuery Selector (Sizzle kullanarak) kullanarak AngularJS kullanarak bir web sitesini ba┼člatmama yard─▒mc─▒ olan k├╝├ž├╝k bir kod pasaj─▒ yapmaya karar verdim.

Kodumu burada payla┼čt─▒m: https://github.com/huytd/Sizzular


12



─░lgili yay─▒nlar


AngularJS ┼čablonlar─▒nda else ifadesi

CSS kullanarak birden fazla arka plan g├Âr├╝nt├╝s├╝ alabilir miyim?

AngularJS'de bir y├Ânerge yazarken, yeni bir kapsam, yeni bir ├žocuk kapsam─▒ veya yeni bir yal─▒t─▒lm─▒┼č kapsam gerekip gerekmedi─čine nas─▒l karar verebilirim?

AngularJS'e jQuery eklentilerini entegre etmenin do─čru yolu

Veritabanlar─▒ yerine veri depolar─▒nda nas─▒l d├╝┼č├╝n├╝l├╝r?

Angularjs rotalar─▒nda iste─če ba─čl─▒ parametre de─čerleri olabilir mi?

Windows zamanlanm─▒┼č bir g├Ârevi arka planda ├žal─▒┼čacak ┼čekilde nas─▒l ayarlar─▒m? [kapal─▒]

ÔÇťOlmas─▒ gerekenÔÇŁ jQuery eklentileri nelerdir? [kapal─▒]

Jquery $ jquery.data () olan t├╝m elemanlar─▒ se├ž

AngularJS + JQuery: Angularjs'te ├žal─▒┼čan dinamik i├žerik nas─▒l elde edilir

Etiketle ilgili di─čer sorular [javascript]


Git bir kula─ča kar┼č─▒ fark

Ajax iste─či 200 OK d├Ând├╝r├╝yor, ancak ba┼čar─▒ yerine bir hata olay─▒ ba┼člat─▒ld─▒

Bir sorgu dizesinin maksimum uzunlu─ču nedir?

Heroku + node.js hatas─▒ (Web i┼člemi, 60 saniye i├žinde $ PORT'a ba─članamad─▒)

WPF resim kaynaklar─▒

Semafor nedir?

CoffeeScript'te global de─či┼čkenleri nas─▒l tan─▒mlar─▒m?

GitHub: ge├žersiz kullan─▒c─▒ ad─▒ veya ┼čifre

Oryantasyon de─či┼čikli─čini Android'de nas─▒l devre d─▒┼č─▒ b─▒rak─▒r─▒m?

Linux'ta mutlak yollar─▒yla dosyalar─▒n listesini nas─▒l olu┼čturabilirim?