"Berpikir dalam AngularJS", apakah saya memiliki latar belakang jQuery?

Misalkan saya terbiasa dengan pengembangan aplikasi klien di jQuery , tetapi sekarang saya ingin mulai menggunakan AngularJS . Bisakah Anda menggambarkan perubahan paradigma yang dibutuhkan? Berikut adalah beberapa pertanyaan yang dapat membantu Anda membentuk jawabannya:

  • Bagaimana cara membuat dan membuat aplikasi web klien secara berbeda? Apa bedanya?
  • Apa yang harus saya berhenti lakukan / gunakan; Apa yang harus saya mulai lakukan / gunakan?
  • Apakah ada pertimbangan / batasan sisi server?

Saya tidak mencari perbandingan terperinci antara jQuery dan AngularJS .

4523
21 февр. ditetapkan oleh Mark Rajcok pada 21 Februari 2013-02-21 07:09 '13 pada 7:09 2013-02-21 07:09
@ 15 jawaban

1. Jangan buat halaman Anda, dan kemudian ubah menggunakan manipulasi DOM

Di jQuery, Anda membuat halaman dan kemudian membuatnya secara dinamis. Ini disebabkan oleh fakta bahwa jQuery dirancang untuk tumbuh dan telah tumbuh dengan sangat luar biasa dari premis sederhana ini.

Tetapi dalam AngularJS Anda harus mulai dari awal, mengingat arsitektur Anda. Alih-alih berpikir bahwa "Saya punya DOM ini, dan saya ingin melakukan ini, membuat X", Anda harus mulai dengan apa yang Anda inginkan, dan kemudian mulai mengembangkan aplikasi Anda, dan akhirnya mulai mengembangkan presentasi Anda.

2. Jangan menambah jQuery dengan AngularJS

Demikian pula, jangan mulai dengan gagasan bahwa jQuery melakukan X, Y, dan Z, jadi saya akan menambahkan AngularJS di atas ini untuk model dan pengontrol. Ini benar-benar menggoda ketika Anda baru memulai, jadi saya selalu merekomendasikan bahwa pengembang AngularJS baru tidak pernah menggunakan jQuery sama sekali, setidaknya sampai mereka terbiasa dengan apa yang mereka lakukan dengan "Angular way".

Saya telah melihat banyak pengembang di sini dan di milis membuat solusi kompleks ini dengan plugin jQuery dari 150 atau 200 baris kode yang kemudian direkatkan bersama di AngularJS dengan serangkaian panggilan balik dan $apply membingungkan dan membingungkan; tetapi pada akhirnya mereka bekerja! Masalahnya adalah bahwa dalam kebanyakan kasus, ketika plugin jQuery dapat ditulis u>

Intinya adalah bahwa: ketika memecahkan masalah, pertama-tama "pikirkan dalam AngularJS"; jika Anda tidak dapat menemukan solusi, tanyakan pada komunitas; jika setelah semua ini tidak ada solusi sederhana, maka jangan ragu untuk menghubungi jQuery. Tapi jangan biarkan jQuery menjadi penopang, atau Anda tidak akan pernah menguasai AngularJS.

3. Selalu berpikir dari segi arsitektur.

Pertama-tama diketahui bahwa aplikasi satu halaman adalah aplikasi. Ini bukan halaman web. Oleh karena itu, kita perlu berpikir seperti pengembang sisi server, dan tidak berpikir seperti pengembang klien. Kita perlu memikirkan bagaimana membagi aplikasi kita menjadi komponen yang terpisah, dapat dikembangkan, dan dapat diuji.

Jadi, bagaimana Anda melakukannya? Apa pendapat Anda tentang AngularJS? Berikut adalah beberapa prinsip umum, tidak seperti jQuery.

Pengajuan adalah "catatan resmi"

Di jQuery, kami mengubah tampilan secara terprogram. Kami mungkin memiliki menu tarik-turun berlabel ul sebagai:

Home </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> 

Di jQuery, dalam logika aplikasi kami, kami akan mengaktifkannya dengan sesuatu seperti:

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

Keduanya melakukan hal yang sama, tetapi dalam versi AngularJS, siapa pun yang melihat template tahu apa yang perlu terjadi. Setiap kali anggota baru tim pengembangan datang, dia dapat melihatnya dan kemudian tahu bahwa arahan dropdownMenu ada di tempatnya; dia tidak perlu memasukkan jawaban yang benar atau menyaring kode apa pun. Pandangan kami memberi tahu kami apa yang akan terjadi. Jauh lebih bersih.

Pengembang yang baru menggunakan AngularJS sering bertanya bagaimana menemukan semua tautan dari jenis tertentu dan menambahkan arahan kepada mereka. Pengembang selalu terpana ketika kami menjawab: Anda tidak. Tetapi alasan Anda tidak melakukan ini adalah karena setengah jQuery, setengah AngularJS, dan tidak ada yang baik. Masalahnya di sini adalah bahwa pengembang sedang mencoba "mengeksekusi jQuery" dalam konteks AngularJS. Itu tidak akan pernah bekerja dengan baik. Pengajuan adalah entri resmi. Di luar arahan (lebih lanjut tentang ini di bawah), Anda tidak pernah mengubah DOM. Dan arahan diterapkan dalam pengajuan, sehingga niatnya jelas.

Ingat: jangan buat, lalu tandai. Anda harus arsitek dan kemudian mendesain.

Pengikatan data

Ini jelas merupakan salah satu fitur yang paling menakjubkan dari AngularJS, dan memotong banyak kebutuhan untuk melakukan jenis manipulasi DOM yang saya sebutkan di bagian sebelumnya. AngularJS akan secara otomatis memperbarui presentasi Anda sehingga Anda tidak perlu melakukannya! Di jQuery, kami merespons acara, dan kemudian memperbarui konten. Sesuatu seperti:

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

Selain masalah pencampuran, kami juga memiliki masalah yang sama yang menandakan niat yang saya sebutkan sebelumnya. Tetapi yang lebih penting, kami harus secara manual memanggil dan memperbarui simpul DOM. Dan jika kita ingin menghapus entri log, kita juga harus menyalin kode DOM. Bagaimana kita menguji logika secara terpisah dari DOM? Dan bagaimana jika kita ingin mengubah presentasi?

Agak berantakan dan agak rapuh. Tetapi di AngularJS kita bisa melakukannya:

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

Namun dalam hal ini, pandangan kami mungkin terlihat seperti ini:

22 февр. Jawaban diberikan oleh Josh David Miller 22 Feb 2013-02-22 00:26 '13 pada 0:26 2013-02-22 00:26

Imperatif → deklaratif

Di jQuery, pemilih digunakan untuk mencari DOM , dan kemudian mengikat / mendaftarkan penangan acara. Ketika suatu peristiwa dipicu, kode ini (penting) memperbarui / memodifikasi DOM.

Di AngularJS, Anda ingin memikirkan tampilan , bukan tentang elemen DOM. Representasi HTML (deklaratif) yang berisi arahan AngularJS . Arahan mengatur penangan acara di belakang layar untuk kami dan memberi kami ikatan data dinamis. Selektor jarang digunakan, sehingga kebutuhan untuk pengidentifikasi (dan beberapa jenis kelas) berkurang secara signifikan. Tampilan terkait dengan model (melalui area). Tampilan adalah proyeksi dari suatu model. Model untuk mengubah acara (mis. Data, properti wilayah) dan tampilan yang merancang model ini "secara otomatis."

Di AngularJS, pikirkan tentang model, bukan elemen DOM jQuery yang dipilih yang berisi data Anda. Pikirkan ide sebagai proyeksi model ini, daripada mendaftarkan panggilan balik untuk memanipulasi apa yang dilihat pengguna.

Pemisahan masalah

jQuery menggunakan JavaScript yang tidak mencolok - perilaku (JavaScript) dipisahkan dari struktur (HTML).

AngularJS menggunakan pengontrol dan arahan (masing-masing dapat memiliki pengontrol dan / atau kompilasi dan fungsi tautan sendiri) untuk menghapus perilaku dari tampilan / struktur (HTML). Angular juga memiliki layanan dan filter untuk membantu membagi / mengatur aplikasi Anda.

border=0

Lihat juga encoreci.net.site/questions/511 / ...

Desain aplikasi

Salah satu pendekatan untuk mengembangkan aplikasi AngularJS:

  • Pikirkan model Anda. Buat layanan atau objek JavaScript Anda sendiri untuk model ini.
  • Pikirkan tentang bagaimana Anda ingin mempresentasikan model Anda - pandangan Anda. Buat template HTML untuk setiap presentasi, menggunakan arahan yang diperlukan untuk mendapatkan pengikatan data dinamis.
  • Pasang pengontrol ke setiap tampilan (menggunakan ng-view dan routing atau ng-controller). Minta dispatcher untuk menemukan / mengambil hanya model data apa saja yang harus dilihat oleh view. Buat pengontrol setipis mungkin.

Warisan prototipe

Anda dapat melakukan banyak hal dengan jQuery tanpa mengetahui cara kerja prototipe JavaScript inheritance. Saat mengembangkan aplikasi AngularJS, Anda akan menghindari beberapa kesalahan umum jika Anda memiliki pemahaman yang baik tentang warisan JavaScript. Bacaan yang disarankan: Apa nuansa dari volume pewarisan prototipe / prototipe di AngularJS?

408
21 февр. Balas diberikan oleh Mark Rajcok 21 Feb. '13 в 7:09 2013-02-21 07:09

AngularJS vs. jQuery