Saya terutama menggunakan perpustakaan jQuery dan baru saja mulai menggunakan AngularJS. Saya telah membaca beberapa tutorial tentang cara menggunakan Angular, tetapi saya tidak jelas mengapa atau kapan menggunakannya, atau manfaat apa yang mungkin saya temukan dibandingkan dengan hanya menggunakan jQuery.

Menurut saya, Angular membuat Anda berpikir tentang MVC, yang mungkin berarti Anda melihat halaman web Anda sebagai kombinasi data + template. Anda menggunakan {{data bindings}}kapan pun Anda merasa memiliki data dinamis. Angular kemudian akan memberi Anda $ handler handler, yang dapat Anda isi secara statis atau melalui panggilan ke server web. Ini tampak mirip dengan cara JSP merancang laman web. Apakah saya perlu Angular untuk ini?

Untuk manipulasi DOM sederhana, yang tidak melibatkan manipulasi data (misalnya: perubahan warna pada mousehover, menyembunyikan / menampilkan elemen pada klik), jQuery atau vanilla JS sudah cukup dan lebih bersih. Ini mengasumsikan bahwa model dalam mvc sudut adalah segala sesuatu yang mencerminkan data pada halaman , dan karenanya, properti CSS seperti warna, tampilan / sembunyikan, dll perubahan tidak mempengaruhi model . Apakah Angular memiliki kelebihan dibandingkan jQuery atau vanilla JS untuk manipulasi DOM?

Apa yang dapat dilakukan Angular yang membuatnya berguna untuk pengembangan dibandingkan dengan apa yang dapat dilakukan jQuery bersama dengan plugin?

Mengikat Data

Anda berkeliling membuat halaman web Anda, dan terus menempatkan {{binding data}} setiap kali Anda merasa Anda akan memiliki data dinamis. Angular kemudian akan memberi Anda $ handler handler, yang dapat Anda isi (secara statis atau melalui panggilan ke server web).

Ini adalah pemahaman yang baik tentang pengikatan data. Saya pikir Anda sudah mengerti.

Manipulasi DOM

Untuk manipulasi DOM sederhana, yang tidak melibatkan manipulasi data (misalnya: perubahan warna pada mousehover, menyembunyikan / menampilkan elemen pada klik), jQuery atau old-school js sudah cukup dan lebih bersih. Ini mengasumsikan bahwa model dalam mvc sudut adalah segala sesuatu yang mencerminkan data pada halaman, dan karenanya, properti css seperti warna, tampilan / sembunyikan, dll perubahan tidak mempengaruhi model.

Saya dapat melihat poin Anda di sini tentang manipulasi DOM "sederhana" menjadi lebih bersih, tetapi jarang dan itu harus benar-benar "sederhana". Saya pikir manipulasi DOM adalah salah satu bidang, sama seperti pengikatan data, di mana Angular benar-benar bersinar. Memahami ini juga akan membantu Anda melihat bagaimana Angular mempertimbangkan pandangannya.

Saya akan mulai dengan membandingkan cara Angular dengan pendekatan vanilla js untuk manipulasi DOM. Secara tradisional, kami menganggap HTML tidak "melakukan" apa pun dan menulisnya seperti itu. Jadi, sebaris js, seperti "onclick", dll adalah praktik buruk karena mereka menempatkan "melakukan" dalam konteks HTML, yang tidak "melakukan". Sudut membalik konsep itu di atas kepalanya. Saat Anda menulis pandangan Anda, Anda menganggap HTML mampu "melakukan" banyak hal. Kemampuan ini disarikan dalam arahan sudut, tetapi jika sudah ada atau Anda telah menulisnya, Anda tidak harus mempertimbangkan "bagaimana" itu dilakukan, Anda hanya menggunakan kekuatan yang tersedia untuk Anda dalam "augmented" HTML ini yang sudut memungkinkan Anda untuk menggunakan. Ini juga berarti bahwa SEMUA logika tampilan Anda benar-benar terkandung dalam tampilan, tidak ada dalam file javascript Anda. Sekali lagi, alasannya adalah bahwa arahan yang ditulis dalam file javascript Anda dapat dianggap meningkatkan kemampuan HTML, sehingga Anda membiarkan DOM khawatir tentang memanipulasi dirinya sendiri (sehingga untuk berbicara). Saya akan menunjukkan dengan contoh sederhana.

Ini adalah markup yang ingin kita gunakan. Saya memberinya nama yang intuitif.

<div rotate-on-click="45"></div>

Pertama, saya hanya ingin berkomentar bahwa jika kami telah memberikan fungsionalitas HTML ini kepada kami melalui Arahan Angular khusus, kami telah selesai . Itu menghirup udara segar. Lebih jauh tentang itu sebentar lagi.

Implementasi dengan jQuery

demo langsung di sini (klik).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Implementasi dengan Angular

demo langsung di sini (klik).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

Cukup ringan, SANGAT bersih dan itu hanya manipulasi sederhana! Menurut pendapat saya, pendekatan sudut menang dalam semua hal, terutama bagaimana fungsi disarikan dan manipulasi dom dinyatakan dalam DOM. Fungsionalitas terhubung ke elemen melalui atribut html, sehingga tidak perlu untuk menanyakan DOM melalui pemilih, dan kami punya dua penutupan yang bagus - satu penutupan untuk pabrik direktif di mana variabel dibagi di semua penggunaan direktif , dan satu penutupan untuk setiap penggunaan arahan dalam linkfungsi (atau compilefungsi).

Pengikatan data dua arah dan arahan untuk manipulasi DOM hanyalah awal dari apa yang membuat Angular luar biasa. Angular mempromosikan semua kode menjadi modular, dapat digunakan kembali, dan mudah diuji dan juga mencakup sistem perutean aplikasi satu halaman. Penting untuk dicatat bahwa jQuery adalah pustaka metode kenyamanan / lintas-peramban yang umum dibutuhkan, tetapi Angular adalah kerangka kerja berfitur lengkap untuk membuat aplikasi halaman tunggal. Script sudut sebenarnya menyertakan versi "lite" sendiri dari jQuery sehingga beberapa metode yang paling penting tersedia. Oleh karena itu, Anda dapat berargumen bahwa menggunakan Angular IS menggunakan jQuery (ringan), tetapi Angular memberikan lebih banyak "keajaiban" untuk membantu Anda dalam proses pembuatan aplikasi.

Ini adalah pos yang bagus untuk informasi terkait: Bagaimana cara "berpikir dalam AngularJS" jika saya memiliki latar belakang jQuery?

Perbedaan umum.

Poin-poin di atas ditujukan untuk keprihatinan khusus OP. Saya juga akan memberikan gambaran tentang perbedaan penting lainnya. Saya sarankan melakukan bacaan tambahan tentang setiap topik juga.

Sudut dan jQuery tidak dapat dibandingkan secara wajar.

Angular adalah framework, jQuery adalah library. Kerangka kerja memiliki tempat mereka dan perpustakaan memiliki tempat mereka. Namun, tidak ada pertanyaan bahwa kerangka kerja yang baik memiliki kekuatan lebih dalam menulis aplikasi daripada perpustakaan. Itulah titik dari suatu kerangka kerja. Anda boleh menulis kode Anda di JS biasa, atau Anda dapat menambahkan di perpustakaan fungsi umum, atau Anda dapat menambahkan kerangka kerja untuk secara drastis mengurangi kode yang Anda butuhkan untuk mencapai sebagian besar hal. Karena itu, pertanyaan yang lebih tepat adalah:

Mengapa menggunakan framework?

Kerangka kerja yang baik dapat membantu arsitek kode Anda sehingga menjadi modular (karena itu dapat digunakan kembali), KERING, mudah dibaca, berkinerja, dan aman. jQuery bukan framework, jadi tidak membantu dalam hal ini. Kita semua telah melihat dinding khas kode spaghetti jQuery. Ini bukan kesalahan jQuery - ini adalah kesalahan pengembang yang tidak tahu cara membuat kode arsitek. Namun, jika para pengembang tahu bagaimana membuat kode arsitek, mereka akhirnya akan menulis semacam "kerangka kerja" minimal untuk memberikan fondasi (arsitektur, dll.) Yang saya bahas beberapa saat yang lalu, atau mereka akan menambahkan sesuatu. Misalnya, Anda mungkin menambahkan RequireJS untuk bertindak sebagai bagian dari kerangka kerja Anda untuk menulis kode yang baik.

Berikut adalah beberapa hal yang disediakan kerangka kerja modern:

• Templating
• Pengikatan data
• perutean (aplikasi satu halaman)
• arsitektur bersih, modular, dapat digunakan kembali
• keamanan
• fungsi / fitur tambahan untuk kenyamanan

Sebelum saya membahas Angular lebih lanjut, saya ingin menunjukkan bahwa Angular bukan satu-satunya dari jenisnya. Durandal, misalnya, adalah kerangka kerja yang dibangun di atas jQuery, Knockout, dan RequireJS. Sekali lagi, jQuery tidak dapat, dengan sendirinya, memberikan apa yang Knockout, RequireJS, dan seluruh kerangka kerja yang dibangun di atas mereka dapat. Hanya saja tidak sebanding.

Jika Anda perlu menghancurkan planet dan Anda memiliki Bintang Kematian, gunakan bintang Kematian.

Sudut (ditinjau kembali).

Membangun pada poin saya sebelumnya tentang kerangka apa yang menyediakan, saya ingin memuji cara Angular menyediakannya dan mencoba untuk menjelaskan mengapa ini sebenarnya lebih baik daripada jQuery saja.

Referensi DOM.

Dalam contoh saya di atas, sama sekali tidak dapat dihindari bahwa jQuery harus terhubung ke DOM untuk menyediakan fungsionalitas. Itu berarti bahwa tampilan (html) prihatin dengan fungsionalitas (karena dilabeli dengan semacam pengidentifikasi - seperti "slider gambar") dan JavaScript khawatir tentang menyediakan fungsionalitas itu. Angular menghilangkan konsep itu melalui abstraksi. Kode yang ditulis dengan benar dengan Angular berarti bahwa pandangan dapat menyatakan perilakunya sendiri. Jika saya ingin menampilkan jam:

<clock></clock>

Selesai

Ya, kita harus pergi ke JavaScript untuk membuat itu berarti, tapi kami melakukan ini dengan cara yang berlawanan dari pendekatan jQuery. Arahan sudut kami (yang ada di dunia kecilnya sendiri) telah "menambah" html dan html mengaitkan fungsionalitas ke dalam dirinya sendiri.

MVW Architecure / Modul / Injeksi Ketergantungan

Angular memberi Anda cara mudah untuk menyusun kode Anda. Lihat hal-hal yang termasuk dalam tampilan (html), fungsi tampilan yang diperbesar termasuk dalam arahan, logika lainnya (seperti panggilan ajax) dan fungsi yang termasuk dalam layanan, dan koneksi layanan dan logika ke tampilan termasuk dalam pengontrol. Ada beberapa komponen sudut lainnya yang juga membantu menangani konfigurasi dan modifikasi layanan, dll. Setiap fungsionalitas yang Anda buat tersedia secara otomatis di mana pun Anda membutuhkannya melalui subsistem Injector yang menangani Injeksi Ketergantungan di seluruh aplikasi. Saat menulis aplikasi (modul), saya memecahnya menjadi modul lain yang dapat digunakan kembali, masing-masing dengan komponen yang dapat digunakan kembali sendiri, dan kemudian memasukkannya ke dalam proyek yang lebih besar. Setelah Anda menyelesaikan masalah dengan Angular, Anda Saya telah secara otomatis menyelesaikannya dengan cara yang bermanfaat dan terstruktur untuk digunakan kembali di masa depan dan mudah dimasukkan dalam proyek berikutnya. SEBUAHBonus BESAR untuk semua ini adalah bahwa kode Anda akan jauh lebih mudah untuk diuji.

Tidak mudah untuk membuat hal-hal "bekerja" di Angular.

UNTUNGLAH. Kode spaghetti jQuery yang disebutkan di atas dihasilkan dari seorang dev yang membuat sesuatu "bekerja" dan kemudian pindah. Anda dapat menulis kode Angular yang buruk, tetapi jauh lebih sulit untuk melakukannya, karena Angular akan melawan Anda tentang hal itu. Ini berarti bahwa Anda harus mengambil keuntungan (setidaknya agak) dengan arsitektur bersih yang disediakannya. Dengan kata lain, lebih sulit untuk menulis kode buruk dengan Angular, tetapi lebih mudah untuk menulis kode bersih.

Sudut jauh dari sempurna. Dunia pengembangan web selalu tumbuh dan berubah dan ada cara baru dan lebih baik yang diajukan untuk memecahkan masalah. React and Flux Facebook, misalnya, memiliki beberapa keuntungan besar atas Angular, tetapi memiliki kekurangannya sendiri. Tidak ada yang sempurna, tetapi Angular telah dan masih luar biasa untuk saat ini. Seperti halnya jQuery yang pernah membantu dunia web bergerak maju, begitu pula Angular, dan begitu banyak yang akan datang.