1. Don't desain halaman anda, dan kemudian mengubahnya dengan DOM manipulasi

Dalam jQuery, anda merancang halaman, dan kemudian anda membuatnya dinamis. Hal ini karena jQuery dirancang untuk pembesaran dan telah tumbuh luar biasa dari premis yang sederhana. Tapi di AngularJS, anda harus mulai dari bawah ke atas dengan arsitektur anda dalam pikiran. Bukannya mulai dengan berpikir "saya memiliki sepotong DOM dan aku ingin membuatnya melakukan X", anda harus mulai dengan apa yang ingin anda capai, kemudian pergi tentang merancang aplikasi anda, dan kemudian akhirnya pergi tentang merancang tampilan anda.

2. Don't menambah jQuery dengan AngularJS

Demikian pula, don't mulai dengan gagasan bahwa jQuery apakah X, Y, dan Z, jadi I'll hanya menambahkan AngularJS di atas bahwa untuk model dan controller. Ini adalah benar-benar menggoda ketika anda're yang baru mulai keluar, itulah sebabnya mengapa saya selalu merekomendasikan bahwa baru AngularJS pengembang don't menggunakan jQuery sama sekali, setidaknya sampai mereka terbiasa untuk melakukan hal-hal yang "Sudut Jalan". I've melihat banyak pengembang di sini dan di milis ini membuat rumit solusi dengan plugin jQuery 150 atau 200 baris kode yang mereka kemudian lem ke AngularJS dengan koleksi callback dan `$mengajukan pertanyaan yang membingungkan dan berbelit-belit, tetapi mereka akhirnya membuatnya bekerja! Masalahnya adalah bahwa di paling* kasus-kasus yang plugin jQuery bisa ditulis ulang di AngularJS di sebagian kecil dari kode, di mana tiba-tiba semuanya menjadi mudah dipahami dan tidak berbelit-belit. Intinya adalah ini: ketika solutioning, pertama "pikir di AngularJS"; jika anda't memikirkan solusi, meminta masyarakat; jika setelah semua itu tidak ada solusi yang mudah, kemudian* merasa bebas untuk mencapai jQuery. Tapi don't membiarkan jQuery menjadi penopang atau anda'll pernah menguasai AngularJS.

3. Selalu berpikir dalam kerangka arsitektur

Pertama tahu single-halaman aplikasi aplikasi. Mereka're tak halaman web. Jadi kita perlu berpikir seperti server-side pengembang selain itu untuk berpikir seperti klien-sisi pengembang. Kita harus berpikir tentang bagaimana untuk membagi aplikasi kita menjadi individu, extensible, dapat diuji komponen. Jadi ** bagaimana anda akan melakukannya? Bagaimana anda "pikir di AngularJS"? Berikut adalah beberapa prinsip-prinsip umum, kontras dengan jQuery.

Lihat adalah "catatan resmi"

Dalam jQuery, kita pemrograman mengubah tampilan. Kita bisa memiliki sebuah menu dropdown yang didefinisikan sebagai ul seperti:

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

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

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

Ketika kita hanya melihat lihat, it's tidak segera jelas bahwa ada fungsi apapun di sini. Untuk aplikasi kecil, yang's baik-baik saja. Tapi untuk non-sepele aplikasi, hal-hal yang dengan cepat mendapatkan membingungkan dan sulit untuk mempertahankan. Di AngularJS, meskipun, melihat catatan resmi dari pandangan berbasis fungsi. Kami ul deklarasi akan terlihat seperti ini:

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

Kedua melakukan hal yang sama, tapi di AngularJS versi orang yang mencari template yang tahu apa yang's seharusnya terjadi. Setiap kali anggota baru dari tim pengembangan datang di papan tulis, dia bisa melihat ini dan kemudian tahu bahwa ada petunjuk yang disebut dropdownMenu operasi di atasnya; dia doesn't perlu intuit jawaban yang benar atau menyaring melalui kode apapun. Pandangan yang mengatakan kepada kita apa yang seharusnya terjadi. Jauh lebih bersih. Pengembang baru untuk AngularJS sering mengajukan pertanyaan seperti: bagaimana saya dapat menemukan semua link dari jenis tertentu dan menambahkan directive ke mereka. Pengembang selalu terperangah ketika kita menjawab: anda don't. Tapi alasan anda don't melakukan itu adalah bahwa ini adalah seperti setengah-jQuery, setengah-AngularJS, dan tidak baik. Masalahnya di sini adalah bahwa pengembang sedang mencoba untuk "jangan jQuery" dalam konteks AngularJS. Yang's tidak akan pernah bekerja dengan baik. Pandangan adalah catatan resmi. Di luar dari direktif (lebih lanjut tentang ini di bawah), anda tidak pernah, pernah, tidak pernah mengubah DOM. Dan arahan yang diterapkan pemandangan, sehingga maksud yang jelas. Ingat: don't desain, dan kemudian mark up. Anda harus arsitek, dan kemudian desain.

Data binding

Ini adalah jauh salah satu yang paling mengagumkan fitur dari AngularJS dan memotong banyak kebutuhan untuk melakukan jenis-jenis manipulasi DOM yang saya sebutkan di bagian sebelumnya. AngularJS akan secara otomatis memperbarui tampilan anda sehingga anda don't harus! Dalam jQuery, kita menanggapi kejadian-kejadian dan kemudian memperbarui konten. Sesuatu seperti:

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

Untuk tampilan yang terlihat seperti ini:

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

Terlepas dari pencampuran kekhawatiran, kita juga memiliki masalah yang sama menandakan maksud yang saya sebutkan sebelumnya. Tapi yang lebih penting, kita harus secara manual referensi dan update DOM node. Dan jika kita ingin menghapus sebuah entri log, kita harus kode terhadap DOM untuk itu juga. Bagaimana kita menguji logika terpisah dari DOM? Dan bagaimana jika kita ingin mengubah presentasi? Ini sedikit berantakan dan agak lemah. Tapi di AngularJS, kita dapat melakukan hal ini:

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

Dan kami tampilan dapat terlihat seperti ini:

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

Tapi untuk hal itu, kami tampilan bisa terlihat seperti ini:

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

Dan sekarang bukan menggunakan unordered list, we're menggunakan Bootstrap kotak peringatan. Dan kita tidak pernah memiliki controller untuk mengubah kode! Tapi yang lebih penting, tidak peduli di mana * atau cara* log akan diperbarui, tampilan akan berubah juga. Secara otomatis. Rapi! Meskipun aku didn't menunjukkan itu di sini, data binding adalah dua arah. Jadi mereka pesan log juga bisa diedit di lihat hanya dengan melakukan hal ini: <input ng-model="entri.msg" />. Dan ada banyak sukacita.

Berbeda model layer

Dalam jQuery, DOM adalah jenis seperti model. Tapi di AngularJS, kita memiliki model tersendiri lapisan yang dapat kita atur dengan cara apapun yang kita inginkan, benar-benar independen dari pandangan. Hal ini membantu untuk data di atas mengikat, mempertahankan pemisahan menyangkut, dan memperkenalkan jauh lebih besar testability. Jawaban lain yang disebutkan di titik ini, jadi saya'll hanya berhenti di situ.

Pemisahan dari kekhawatiran

Dan semua hal di atas dasi ini over-melengkung tema: jauhkan kekhawatiran anda terpisah. Anda melihat tindakan sebagai catatan resmi tentang apa yang seharusnya terjadi (untuk sebagian besar); model mewakili data anda; anda memiliki layanan layer dapat digunakan kembali untuk melakukan tugas-tugas; anda melakukan manipulasi DOM dan meningkatkan tampilan anda dengan arahan; dan lem itu semua bersama-sama dengan controller. Hal ini juga disebutkan dalam jawaban yang lain, dan satu-satunya hal yang saya akan menambahkan berkaitan dengan testability, yang saya bahas di bagian lain di bawah ini.

Dependency injection

Untuk membantu kami keluar dengan pemisahan kekhawatiran adalah dependency injection (DI). Jika anda datang dari sebuah server-side language (dari Jawa untuk PHP) anda're mungkin akrab dengan konsep ini sudah, tetapi jika anda're sisi klien pria yang berasal dari jQuery, konsep ini bisa tampak apa-apa dari konyol untuk berlebihan untuk hipster. Tapi itu's tidak. :-) Dari perspektif yang luas, DI berarti bahwa anda dapat mendeklarasikan komponen yang sangat bebas dan kemudian dari komponen lain, hanya meminta sebuah instance dari itu dan itu akan diberikan. Anda don't harus tahu tentang loading order, atau lokasi file, atau sesuatu seperti itu. Kekuatan mungkin tidak segera terlihat, tapi aku'll memberikan hanya satu (umum) contoh: pengujian. Let's mengatakan dalam aplikasi kami, kami memerlukan sebuah layanan yang mengimplementasikan server-side penyimpanan melalui ISTIRAHAT API dan, tergantung pada kondisi aplikasi, penyimpanan lokal juga. Saat menjalankan tes pada kami controller, kita don't ingin memiliki untuk berkomunikasi dengan server - kami're pengujian controller, setelah semua. Kita hanya dapat menambahkan mock layanan dengan nama yang sama sebagai komponen asli, dan injektor akan memastikan bahwa kami controller mendapat yang palsu secara otomatis - controller kita doesn't dan perlu't tahu perbedaan. Berbicara tentang pengujian...

4. Test-driven development - selalu

Ini adalah benar-benar bagian dari bagian 3 di arsitektur, tapi itu's sangat penting sehingga saya'm menempatkannya sebagai top sendiri-bagian tingkat. Dari semua banyak plugin jQuery anda've terlihat, digunakan, atau ditulis, berapa banyak dari mereka telah menyertai test suite? Tidak terlalu banyak karena jQuery isn't sangat setuju untuk itu. Tapi AngularJS. Dalam jQuery, satu-satunya cara untuk menguji lebih sering untuk membuat komponen mandiri dengan sampel/halaman demo yang kami tes dapat melakukan manipulasi DOM. Jadi kita harus mengembangkan komponen secara terpisah dan kemudian mengintegrasikan ke dalam aplikasi kita. Bagaimana nyaman! Begitu banyak waktu, ketika berkembang dengan jQuery, kita memilih untuk berulang-ulang, bukan test-driven development. Dan siapa yang bisa menyalahkan kami? Tapi karena kita memiliki pemisahan kekhawatiran, kita dapat melakukan test-driven development iteratif dalam AngularJS! Misalnya, let's mengatakan kami ingin super-sederhana direktif untuk menunjukkan di menu apa yang kita saat ini rute ini. Kita dapat menyatakan apa yang kita inginkan di lihat dari aplikasi kita:

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

Oke, sekarang kita dapat menulis sebuah tes untuk non-ada ketika aktif directive:

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();
}));

Dan ketika kita menjalankan pengujian kami, kami dapat mengkonfirmasi bahwa itu gagal. Hanya sekarang kita harus membuat kami directive:

.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' );
                }
            });
        }
    };
});

Kami sekarang lolos uji dan menu kami melakukan seperti yang diminta. Pembangunan kita adalah kedua iteratif dan test-driven. Jahat-keren.

5. Secara konseptual, arahan ini adalah tidak dikemas jQuery

Anda'll sering mendengar "hanya melakukan manipulasi DOM dalam direktif". Ini adalah sebuah keniscayaan. Memperlakukannya dengan hormat karena! Tapi let's menyelam sedikit lebih dalam... Beberapa arahan yang hanya menghias apa's sudah di lihat (berpikir ngClass) dan karena itu kadang-kadang melakukan manipulasi DOM langsung dan kemudian pada dasarnya dilakukan. Tapi jika direktif seperti "widget" dan memiliki template, itu harus juga menghormati pemisahan kekhawatiran. Artinya, template terlalu harus tetap sebagian besar independen dari pelaksanaannya di link dan fungsi controller. AngularJS datang dengan seluruh set alat untuk membuat ini sangat mudah, dengan ngClass kita dapat secara dinamis memperbarui kelas; ngModel memungkinkan dua-cara mengikat data; ngShow dan ngHide pemrograman menampilkan atau menyembunyikan elemen; dan banyak lagi - termasuk orang-orang yang kita menulis untuk diri kita sendiri. Dengan kata lain, kita bisa melakukan semua jenis keangkeran tanpa manipulasi DOM. Kurang manipulasi DOM, lebih mudah, perintah untuk menguji, semakin mudah mereka untuk gaya, semakin mudah mereka untuk berubah di masa depan, dan lebih re-usable dan didistribusikan mereka. Saya melihat banyak pengembang-pengembang baru untuk AngularJS menggunakan perintah sebagai tempat untuk membuang banyak dari jQuery. Dengan kata lain, mereka berpikir "aku't melakukan manipulasi DOM di controller, I'll mengambil kode yang dimasukkan dalam direktif". Sementara yang pasti jauh lebih baik,'s sering masih salah. Pikirkan logger kita diprogram dalam bagian 3. Bahkan jika kita menempatkan bahwa dalam direktif, kita masih ingin melakukannya, "Sudut Jalan". Itu masih doesn't mengambil manipulasi DOM! Ada banyak kali ketika DOM manipulasi diperlukan, tapi itu's a banyak lebih jarang daripada yang anda pikirkan! Sebelum melakukan manipulasi DOM dimana saja dalam aplikasi anda, tanyakan pada diri anda jika anda benar-benar perlu. Mungkin ada cara yang lebih baik. Berikut ini's cepat contoh yang menunjukkan pola yang saya lihat paling sering. Kami ingin toggleable tombol. (Catatan: contoh ini adalah sedikit dibikin dan skosh verbose untuk mewakili lebih rumit kasus yang diselesaikan dengan cara yang persis sama.)

.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);
            });
        }
    };
});

Ada beberapa hal yang salah dengan ini:

1. Pertama, jQuery itu tidak pernah diperlukan. Ada's apa-apa yang kita lakukan di sini yang dibutuhkan jQuery sama sekali!
2. Kedua, bahkan jika kita sudah memiliki jQuery pada halaman kami, ada's tidak ada alasan untuk menggunakannya di sini; kita hanya dapat menggunakan `sudut.elemen dan komponen kami akan tetap bekerja ketika jatuh ke sebuah proyek yang doesn't memiliki jQuery.
3. Ketiga, bahkan dengan asumsi jQuery adalah diperlukan untuk direktif ini untuk bekerja, jqLite (sudut.elemen) akan selalu menggunakan jQuery apakah itu dimuat! Jadi kita perlu't menggunakan $ - kita bisa hanya menggunakan sudut.elemen.
4. Keempat, terkait erat dengan ketiga, adalah bahwa jqLite unsur-unsur yang perlu't dibungkus dalam $ - yang elemen yang diteruskan ke link fungsi akan sudah jQuery elemen!
5. Dan kelima, yang kita'telah disebutkan di bagian sebelumnya, mengapa kita pencampuran template barang-barang ke logika kita? Direktif ini dapat ditulis ulang (bahkan untuk kasus-kasus yang rumit!) jauh lebih sederhana seperti:

.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;
            };
        }
    };
});

Lagi, template hal-hal ini dalam template, sehingga anda (atau pengguna) dapat dengan mudah swap it out untuk salah satu yang memenuhi setiap gaya yang diperlukan, dan logika tidak pernah disentuh. Usabilitas - boom! Dan masih ada semua manfaat lainnya, seperti pengujian - it's mudah! Tidak peduli apa's dalam template, direktif's API internal adalah tidak pernah disentuh, jadi refactoring adalah mudah. Anda dapat mengubah template sebanyak yang anda inginkan tanpa menyentuh direktif. Dan tidak peduli apa yang anda berubah, anda masih lulus tes. w00t! Jadi jika arahan aren't hanya koleksi jQuery-seperti fungsi, apa yang mereka? Arahan yang benar-benar ekstensi HTML. Jika HTML doesn't melakukan sesuatu yang anda butuhkan untuk dilakukan, anda menulis petunjuk untuk melakukannya untuk anda, dan kemudian menggunakannya seolah-olah itu adalah bagian dari HTML. Dengan kata lain, jika AngularJS doesn't melakukan sesuatu yang out of the box, berpikir bagaimana tim akan menyelesaikan itu cocok benar dengan ngClick, ngClass, et al.

Ringkasan

Don't bahkan menggunakan jQuery. Don't bahkan seperti itu. Hal ini akan menahan anda. Dan ketika anda datang untuk masalah yang anda pikir anda tahu bagaimana untuk memecahkan jQuery sudah, sebelum anda mencapai untuk $, cobalah untuk berpikir tentang bagaimana melakukannya dalam batas-batas AngularJS. Jika anda don't tahu, tanyakan! 19 kali dari 20, cara terbaik untuk melakukan itu doesn't perlu jQuery dan mencoba untuk menyelesaikannya dengan jQuery menghasilkan lebih banyak pekerjaan untuk anda.

Penting → deklaratif

Dalam jQuery, pemilih digunakan untuk menemukan DOM unsur-unsur dan kemudian mengikat/daftarkan event handler untuk mereka. Ketika sebuah peristiwa pemicu, itu (imperative) mengeksekusi kode untuk update/perubahan DOM.

Di AngularJS, anda ingin untuk berpikir tentang pemandangan daripada elemen DOM. Pandangan (deklaratif) HTML yang berisi AngularJS petunjuk. Arahan mengatur event handler di balik layar bagi kita dan memberikan kita dinamis databinding. Penyeleksi jarang digunakan, sehingga kebutuhan untuk Id (dan beberapa jenis dari kelas) adalah sangat berkurang. Pandangan yang terikat **** model (melalui scope). Pandangan proyeksi dari model. Peristiwa perubahan model (yaitu, data, ruang lingkup sifat), dan pandangan bahwa proyek model-model update "secara otomatis."

Di AngularJS, berpikir tentang model, daripada jQuery-dipilih elemen DOM yang memegang data anda. Berpikir tentang pandangan sebagai proyeksi dari model-model tersebut, daripada mendaftar callback untuk memanipulasi apa yang dilihat pengguna.

Pemisahan dari kekhawatiran

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

AngularJS menggunakan kontroler dan arahan (masing-masing dapat memiliki mereka sendiri controller, dan/atau menyusun dan menghubungkan fungsi) untuk menghapus perilaku dari tampilan/struktur (HTML). Sudut juga memiliki jasa dan filter untuk membantu memisahkan/mengatur aplikasi anda.

Lihat juga https://stackoverflow.com/a/14346528/215945

Aplikasi desain

Salah satu pendekatan untuk merancang aplikasi AngularJS:

1. Berpikir tentang model anda. Membuat jasa atau JavaScript anda sendiri benda-benda untuk model-model tersebut.
2. Pikirkan tentang bagaimana anda ingin menyajikan model-pandangan anda. Membuat template HTML untuk melihat masing-masing, dengan menggunakan arahan yang diperlukan untuk mendapatkan dinamis databinding.
3. Melampirkan controller untuk masing-masing view (menggunakan ng-view dan routing, atau ng-controller). Memiliki controller menemukan/mendapatkan hanya dengan model data dengan melihat kebutuhan untuk melakukan tugasnya. Membuat pengontrol setipis mungkin.

Prototypal warisan

Anda dapat melakukan banyak hal dengan jQuery tanpa mengetahui tentang bagaimana JavaScript prototypal warisan karya. Ketika mengembangkan aplikasi AngularJS, anda akan menghindari beberapa perangkap umum jika anda memiliki pemahaman yang baik tentang JavaScript warisan. Bacaan yang direkomendasikan: https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs

AngularJS vs jQuery

AngularJS dan jQuery mengadopsi sangat berbeda ideologi. Jika anda're berasal dari jQuery anda mungkin menemukan beberapa perbedaan yang mengejutkan. Sudut dapat membuat anda marah. Ini adalah normal, anda harus mendorong melalui. Sudut yang layak.

Perbedaan besar (TLDR)

jQuery memberikan anda sebuah toolkit untuk memilih bit sewenang-wenang dari DOM dan membuat ad-hoc perubahan untuk mereka. Anda dapat melakukan cukup banyak apa pun yang anda suka sepotong demi sepotong. AngularJS bukannya memberikan anda compiler. Apa ini berarti adalah bahwa AngularJS membaca seluruh DOM dari atas ke bawah dan memperlakukan itu sebagai kode, secara harfiah sebagai petunjuk kepada penyusun. Seperti melintasi DOM, terlihat untuk menemukan petunjuk (compiler directives) yang menceritakan AngularJS compiler bagaimana harus bersikap dan apa yang harus dilakukan. Arahan adalah benda-benda kecil yang penuh dengan JavaScript yang dapat mencocokkan terhadap atribut, kategori, kelas, atau bahkan komentar. Ketika Sudut compiler menentukan bahwa sepotong DOM pertandingan tertentu direktif, panggilan fungsi direktif, lewat DOM elemen, atribut, saat ini $ruang lingkup (yang merupakan variabel lokal store), dan beberapa lainnya berguna bit. Atribut-atribut ini dapat berisi pernyataan yang dapat diinterpretasikan oleh Direktif, dan yang menceritakannya cara membuat, dan ketika harus redraw itu sendiri. Arahan dapat kemudian pada gilirannya menarik tambahan Sudut komponen seperti controller, jasa, dll. Apa yang keluar bagian bawah compiler adalah sepenuhnya terbentuk aplikasi web, kabel up dan siap untuk pergi. Ini berarti bahwa Sudut adalah Template Driven. Template anda drive JavaScript, bukan sebaliknya. Ini adalah radikal pembalikan peran, dan kebalikan dari JavaScript kita telah menulis selama 10 tahun terakhir atau lebih. Ini dapat mengambil beberapa membiasakan diri. Jika ini kedengarannya seperti itu mungkin lebih preskriptif dan membatasi, tidak ada yang bisa lebih jauh dari kebenaran. Karena AngularJS memperlakukan anda HTML sebagai kode, anda mendapatkan HTML tingkat granularity di aplikasi web anda. Segala sesuatu adalah mungkin, dan sebagian besar hal-hal yang sangat mudah sekali anda membuat beberapa lompatan konseptual. Let's turun ke seluk beluk.

Pertama, Sudut doesn't menggantikan jQuery

Sudut dan jQuery melakukan hal yang berbeda. AngularJS memberikan anda satu set alat untuk menghasilkan aplikasi web. jQuery terutama memberi anda alat untuk memodifikasi DOM. Jika jQuery hadir pada halaman anda, AngularJS akan menggunakannya secara otomatis. Jika isn't, AngularJS kapal dengan jQuery Lite, yang memotong ke bawah, tapi masih sangat berguna versi jQuery. Misko suka jQuery dan doesn't obyek untuk anda menggunakannya. Namun anda akan menemukan saat anda sebelumnya bahwa anda bisa mendapatkan cukup banyak semua pekerjaan anda dilakukan dengan menggunakan kombinasi dari lingkup, template dan arahan, dan anda harus memilih alur kerja ini mana mungkin karena kode anda akan lebih diskrit, lebih dikonfigurasi, dan lebih Tajam. Jika anda menggunakan jQuery, anda tidak't menjadi percikan di semua tempat. Tempat yang tepat untuk manipulasi DOM di AngularJS adalah dalam instruksi. Lebih lanjut tentang ini nanti.

JavaScript dengan Penyeleksi vs Deklaratif Template

jQuery biasanya diterapkan diam-diam. Kode JavaScript anda terkait di header (atau footer), dan ini adalah satu-satunya tempat yang disebutkan. Kami menggunakan selektor untuk memilih bit-bit dari halaman dan menulis plugin untuk mengubah bagian-bagian. JavaScript adalah dalam kontrol. HTML telah benar-benar independen keberadaan. HTML anda tetap semantik bahkan tanpa JavaScript. Atribut Onclick sangat buruk praktek. Salah satu hal pertama yang anda akan melihat tentang AngularJS adalah bahwa atribut kustom di mana-mana. HTML anda akan penuh dengan atribut ng, yang pada dasarnya atribut onClick pada steroid. Ini adalah arahan (compiler directives), dan ini adalah salah satu cara utama di mana template adalah ketagihan untuk model. Ketika anda pertama kali melihat ini, anda mungkin tergoda untuk menulis AngularJS sebagai sekolah tua mengganggu JavaScript (seperti yang saya lakukan di tempat pertama). Bahkan, AngularJS tidak bermain dengan aturan-aturan. Di AngularJS, anda HTML5 template. Hal ini disusun oleh AngularJS untuk menghasilkan halaman web anda. Ini adalah perbedaan besar pertama. Untuk jQuery, halaman web anda adalah DOM untuk dimanipulasi. Untuk AngularJS, anda HTML adalah kode yang akan disusun. AngularJS membaca di halaman web secara keseluruhan dan secara harfiah mengkompilasi menjadi sebuah halaman web baru menggunakan built dalam compiler. Template anda harus deklaratif; artinya harus jelas hanya dengan membacanya. Kami menggunakan atribut kustom dengan nama-nama bermakna. Kami membuat baru elemen HTML, lagi-lagi dengan nama-nama bermakna. Seorang desainer dengan sedikit pengetahuan HTML dan tidak ada coding keterampilan yang bisa anda baca AngularJS template dan memahami apa yang dilakukannya. Dia atau dia dapat membuat modifikasi. Ini adalah Sudut jalan.

Template di kursi mengemudi.

Salah satu pertanyaan pertama yang saya bertanya pada diri sendiri ketika mulai AngularJS dan menjalankan melalui tutorial ini "di Mana adalah kode saya?". I've tertulis tidak ada JavaScript, namun saya memiliki semua perilaku ini. Jawabannya adalah jelas. Karena AngularJS mengkompilasi DOM, AngularJS adalah memperlakukan HTML sebagai kode. Untuk banyak kasus-kasus yang sederhana itu's sering cukup untuk menulis sebuah template dan biarkan AngularJS compile menjadi aplikasi untuk anda. Template anda drive aplikasi anda. It's diperlakukan sebagai DSL. Anda menulis AngularJS komponen, dan AngularJS akan mengurus menarik mereka dan membuat mereka tersedia pada waktu yang tepat didasarkan pada struktur dari template anda. Hal ini sangat berbeda dengan standar MVC pola, di mana template adalah hanya untuk output. It's lebih mirip dengan XSLT dari Ruby on Rails misalnya. Ini adalah radikal inversi kontrol yang mengambil beberapa membiasakan diri. Berhenti berusaha untuk mendorong aplikasi dari JavaScript anda. Biarkan template drive aplikasi, dan biarkan AngularJS merawat kabel komponen bersama-sama. Ini juga adalah Sudut jalan.

Semantik HTML vs. Model Semantik

Dengan jQuery halaman HTML anda harus berisi semantik konten yang bermakna. Jika JavaScript dimatikan (oleh pengguna atau mesin pencari) konten anda tetap dapat diakses. Karena AngularJS memperlakukan halaman HTML anda sebagai template. Template ini tidak seharusnya semantik sebagai konten anda biasanya disimpan dalam model anda yang pada akhirnya berasal dari API. AngularJS mengkompilasi anda DOM dengan model untuk menghasilkan halaman web semantik. Source HTML anda tidak lagi semantik, sebagai gantinya, anda API dan disusun DOM adalah semantik. Di AngularJS, arti kehidupan dalam model, HTML adalah sebuah template, untuk tampilan saja. Pada titik ini anda mungkin memiliki segala macam pertanyaan mengenai SEO dan aksesibilitas, dan memang demikian. Ada masalah di sini. Sebagian besar pembaca layar sekarang akan mengurai JavaScript. Mesin pencari dapat mengindeks AJAXed kandungan. Namun demikian, anda akan ingin untuk memastikan anda menggunakan pushstate Url dan anda memiliki yang layak sitemap. Lihat di sini untuk diskusi tentang masalah ini: https://stackoverflow.com/a/23245379/687677

Separation of concerns (SOC) vs MVC

Pemisahan menyangkut (SOC) adalah pola yang tumbuh selama bertahun-tahun pengembangan web untuk berbagai alasan, termasuk SEO, aksesibilitas dan browser ketidakcocokan. Ini terlihat seperti ini:

1. HTML - makna Semantik. HTML harus berdiri sendiri.
2. CSS Styling, tanpa CSS halaman masih dapat dibaca.
3. JavaScript - Perilaku, tanpa script konten tetap. Lagi, AngularJS tidak bermain dengan aturan mereka. Dalam stroke, AngularJS tidak jauh dengan satu dekade yang diterima kebijaksanaan dan bukannya menerapkan pola MVC di mana template adalah tidak lagi semantik, bahkan tidak sedikit. Ini terlihat seperti ini:
4. Model - model anda berisi data semantik. Model biasanya JSON benda-benda. Model-model yang ada sebagai atribut dari sebuah objek yang disebut $scope. Anda juga dapat menyimpan berguna fungsi utilitas pada $lingkup yang template anda kemudian dapat mengakses.
5. Pandangan - pandangan Anda yang ditulis dalam HTML. Pandangan ini biasanya tidak semantik karena data anda hidup dalam model.
6. Controller - controller adalah sebuah fungsi JavaScript yang hooks tampilan ke model. Fungsinya adalah untuk menginisialisasi $scope. Tergantung pada aplikasi anda, anda mungkin atau mungkin tidak perlu membuat controller. Anda dapat memiliki banyak pengendali pada sebuah halaman. MVC dan SOC tidak berada di ujung yang berlawanan dari skala yang sama, mereka benar-benar sumbu yang berbeda. SOC tidak masuk akal di AngularJS konteks. Anda harus melupakan hal itu dan melanjutkan. Jika, seperti saya, anda hidup melalui perang browser, anda mungkin menemukan ide ini cukup ofensif. Mendapatkan lebih dari itu, it'll menjadi layak, aku janji.

   Plugin vs Arahan

   Plugin memperpanjang jQuery. AngularJS Arahan memperluas kemampuan dari browser anda. Dalam jQuery kita mendefinisikan plugin dengan menambahkan fungsi-fungsi jQuery.prototipe. Kami kemudian hook ini ke DOM dengan memilih unsur-unsur dan memanggil plugin pada hasil. Idenya adalah untuk memperluas kemampuan jQuery. Misalnya, jika anda ingin korsel pada halaman anda, anda dapat menentukan daftar unordered angka, mungkin dibungkus nav elemen. Anda mungkin kemudian menulis beberapa jQuery untuk pilih daftar pada halaman dan restyle itu sebagai galeri dengan timeout untuk melakukan animasi geser. Di AngularJS, kita mendefinisikan arahan. Direktif adalah fungsi yang mengembalikan objek JSON. Objek ini menceritakan AngularJS apa elemen DOM untuk mencari, dan perubahan apa yang akan dilakukan kepada mereka. Arahan yang terhubung ke template menggunakan atribut atau elemen-elemen, yang anda adakan. Idenya adalah untuk memperluas kemampuan HTML dengan atribut baru dan unsur-unsur. AngularJS adalah cara untuk memperluas kemampuan asli mencari HTML. Anda harus menulis HTML yang terlihat seperti HTML, diperpanjang dengan atribut khusus dan elemen. Jika anda ingin korsel, hanya menggunakan <korsel /> elemen, kemudian menentukan arahan untuk menarik template, dan membuat pengisap yang bekerja.

   Banyak kecil arahan vs big plugin dengan konfigurasi switch

   Kecenderungan dengan jQuery adalah untuk menulis besar plugin seperti lightbox yang kemudian kita mengkonfigurasi dengan melewati berbagai nilai-nilai dan pilihan. Ini adalah kesalahan dalam AngularJS. Ambil contoh dropdown. Ketika menulis dropdown plugin anda mungkin tergoda untuk kode dalam klik handler, mungkin fungsi untuk menambahkan chevron yang lebih baik atas atau bawah, mungkin mengubah kelas dilipat elemen, show hide menu, semua hal-hal berguna. Sampai anda ingin membuat perubahan kecil. Katakanlah anda memiliki menu yang ingin anda terungkap di hover. Nah sekarang kita memiliki masalah. Plugin kami memiliki kabel di klik handler untuk kita, kita're akan perlu untuk menambahkan opsi konfigurasi untuk membuatnya berperilaku berbeda dalam kasus khusus ini. Di AngularJS kita menulis lebih kecil arahan. Kami dropdown direktif akan ridiculously kecil. Mungkin mempertahankan keadaan terlipat, dan menyediakan metode untuk melipat(), terungkap() atau toggle(). Metode ini hanya akan update $scope.menu.terlihat yang merupakan boolean penyelenggaraan negara. Sekarang di template kita kita dapat kawat ini:

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

Perlu update pada mouseover?

<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
  ...
</ul>

Template drive aplikasi sehingga kita mendapatkan HTML tingkat granularity. Jika kita ingin membuat kasus-kasus pengecualian, template membuat ini mudah.

Penutupan vs $ruang lingkup

Plugin JQuery yang dibuat dalam penutupan. Privasi lebih terjaga dalam waktu yang utama. It's terserah anda untuk menjaga anda lingkup rantai dalam penutupan. Anda hanya benar-benar memiliki akses ke set dari node DOM dilewatkan ke dalam plugin dengan jQuery, ditambah setiap variabel lokal yang didefinisikan dalam penutupan dan setiap globals yang telah anda tetapkan. Ini berarti bahwa plugin yang cukup mandiri. Ini adalah hal yang baik, tapi bisa membatasi ketika membuat seluruh aplikasi. Mencoba untuk melewati data antara bagian-bagian dari halaman dinamis menjadi tugas. AngularJS telah $lingkup objek. Ini adalah benda-benda yang khusus dibuat dan dikelola oleh AngularJS di mana anda simpan model anda. Tertentu arahan akan menelurkan baru $ruang lingkup, yang secara default mewarisi dari pembungkus $lingkup menggunakan JavaScript prototipikal warisan. The $lingkup objek yang dapat diakses di controller dan view. Ini adalah pandai bagian. Karena struktur $lingkup warisan kira-kira mengikuti struktur DOM, unsur-unsur yang memiliki akses ke ruang lingkup mereka sendiri, dan apapun yang mengandung lingkup mulus, semua jalan sampai ke global $scope (yang tidak sama dengan lingkup global). Hal ini membuat lebih mudah untuk melewatkan data di sekitar, dan untuk menyimpan data pada tingkat yang sesuai. Jika dropdown ini berlangsung, hanya dropdown $lingkup kebutuhan untuk tahu tentang hal itu. Jika pengguna memperbarui preferensi mereka, anda mungkin ingin memperbarui global $ruang lingkup, dan setiap bersarang lingkup mendengarkan preferensi pengguna akan secara otomatis diberitahu. Hal ini mungkin terdengar rumit, pada kenyataannya, setelah anda rileks, it's seperti terbang. Anda don't perlu membuat $lingkup objek, AngularJS instantiates dan mengkonfigurasi untuk anda, benar dan tepat berdasarkan template anda hirarki. AngularJS kemudian membuatnya tersedia untuk komponen anda menggunakan magic dependency injection (lebih lanjut tentang ini nanti).

Manual# DOM perubahan terhadap Data Binding

Dalam jQuery anda membuat semua DOM perubahan oleh tangan. Anda membangun baru elemen DOM programatik. Jika anda memiliki JSON array dan anda ingin memasukkannya ke DOM, anda harus menulis fungsi untuk menghasilkan HTML dan masukkan. Di AngularJS anda dapat melakukan hal ini juga, tetapi anda dianjurkan untuk menggunakan data binding. Perubahan model anda, dan karena DOM adalah terikat untuk itu melalui template anda DOM akan secara otomatis memperbarui, tidak ada intervensi yang diperlukan. Karena data binding dilakukan dari template, baik menggunakan atribut atau penjepit keriting sintaks, it's super mudah untuk dilakukan. Ada's kecil kognitif overhead yang terkait dengan itu sehingga anda'll menemukan diri anda melakukan hal itu sepanjang waktu.

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

Mengikat elemen input ke $scope.pengguna.nama. Memperbarui input akan memperbarui nilai anda saat ini, ruang lingkup, dan sebaliknya. Demikian juga:

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

akan menampilkan nama pengguna di sebuah paragraf. It's hidup mengikat, sehingga jika $scope.pengguna.nama nilai diperbarui, template akan update juga.

Ajax sepanjang waktu

Dalam jQuery membuat Ajax panggilan ini cukup sederhana, tapi itu's masih sesuatu yang anda mungkin berpikir dua kali tentang. Ada's kompleksitas ditambahkan untuk berpikir tentang, dan adil potongan script untuk mempertahankan. Di AngularJS, Ajax adalah default anda pergi-untuk solusi dan itu terjadi sepanjang waktu, hampir tanpa anda menyadarinya. Anda dapat menyertakan template dengan ng-sertakan. Anda dapat menerapkan sebuah template dengan sederhana custom direktif. Anda dapat membungkus Ajax call dalam layanan dan membuat diri anda GitHub layanan, atau Flickr layanan, yang dapat anda akses dengan mudah menakjubkan.

Layanan Objek vs Fungsi Pembantu

Dalam jQuery, jika kita ingin capai kecil non-dom tugas terkait seperti menarik feed dari API, kita bisa menulis fungsi yang sedikit untuk melakukan itu kami penutupan. Yang's solusi yang valid, tapi bagaimana jika kita ingin akses yang memberi makan sering? Bagaimana jika kita ingin menggunakan kembali kode tersebut ke dalam aplikasi lain? AngularJS memberikan kita layanan benda-benda. Jasa adalah benda-benda sederhana yang berisi fungsi dan data. Mereka selalu lajang, yang berarti tidak akan pernah ada lebih dari satu dari mereka. Katakanlah kita ingin mengakses Stack Overflow API, kita bisa menulis StackOverflowService yang mendefinisikan metode untuk melakukannya. Let's mengatakan kami memiliki keranjang belanja. Kita dapat mendefinisikan sebuah ShoppingCartService yang mempertahankan kami keranjang dan berisi metode untuk menambah dan menghapus item. Karena pelayanan adalah singleton, dan dibagi oleh semua komponen lain, setiap objek yang perlu untuk dapat menulis ke keranjang belanja dan tarik data dari itu. It's selalu sama cart. Objek layanan mandiri AngularJS komponen yang dapat kita gunakan dan menggunakan kembali seperti yang kita lihat cocok. Mereka sederhana objek JSON yang berisi fungsi dan Data. Mereka selalu lajang, jadi jika anda menyimpan data pada layanan di satu tempat, anda bisa mendapatkan data di tempat lain hanya dengan meminta layanan yang sama.

Dependency injection (DI) vs Instatiation - alias de-spaghettification

AngularJS mengelola dependensi untuk anda. Jika anda ingin sebuah objek, hanya menyebutnya dan AngularJS akan mendapatkannya untuk anda. Sampai anda mulai menggunakan ini, it's sulit untuk menjelaskan apa besar-besaran waktu boon ini. Tidak seperti AngularJS ada DI dalam jQuery. DI berarti bahwa alih-alih menulis aplikasi anda dan kabel bersama-sama, anda bukan mendefinisikan perpustakaan komponen, masing-masing diidentifikasi oleh sebuah string. Katakanlah saya memiliki komponen yang disebut 'FlickrService' yang mendefinisikan metode untuk menarik JSON feed dari Flickr. Sekarang, jika saya ingin menulis sebuah controller yang dapat mengakses Flickr, saya hanya perlu merujuk ke 'FlickrService' dengan nama ketika saya menyatakan controller. AngularJS akan mengurus instantiating komponen dan membuatnya tersedia untuk saya controller. Sebagai contoh, di sini saya mendefinisikan layanan:

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

Sekarang ketika saya ingin menggunakan layanan itu aku hanya menyebutnya dengan nama seperti ini:

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

AngularJS akan mengakui bahwa FlickrService objek diperlukan untuk instantiate controller, dan akan memberikan salah satu untuk kita. Hal ini membuat wiring hal-hal bersama-sama sangat mudah, dan cukup banyak menghilangkan kecenderungan spagettification. Kami memiliki datar daftar komponen, dan AngularJS tangan mereka satu persatu dan ketika kita membutuhkan mereka.

Modular arsitektur layanan

jQuery mengatakan sedikit tentang bagaimana anda harus mengatur kode. AngularJS memiliki pendapat. AngularJS memberikan modul-modul di mana anda dapat menempatkan kode anda. Jika anda're menulis naskah yang berbicara ke Flickr misalnya, anda mungkin ingin untuk membuat sebuah modul Flickr untuk membungkus semua Flickr fungsi-fungsi yang terkait dalam. Modul dapat mencakup modul-modul lainnya (DI). Anda utama aplikasi ini biasanya modul, dan ini harus mencakup semua modul aplikasi anda akan tergantung pada. Anda mendapatkan kode sederhana reuse, jika anda ingin menulis aplikasi lain yang berbasis di Flickr, anda hanya dapat memasukkan modul Flickr dan voila, anda memiliki akses ke semua Flickr fungsi-fungsi yang terkait dalam aplikasi baru anda. Modul berisi komponen AngularJS. Ketika kami mencakup modul, semua komponen dalam modul tersebut menjadi tersedia bagi kita sebagai daftar sederhana yang diidentifikasi oleh mereka yang unik string. Kita kemudian dapat menyuntikkan komponen-komponen ke satu sama lain menggunakan AngularJS's dependency injection mekanisme.

Untuk meringkas

AngularJS dan jQuery bukan musuh. It's mungkin untuk menggunakan jQuery dalam AngularJS sangat baik. Jika anda're menggunakan AngularJS baik (template, data binding, $ruang lingkup, arahan, dll.) anda akan menemukan anda perlu banyak kurang jQuery daripada yang anda mungkin memerlukan. Hal utama yang perlu menyadari adalah bahwa template anda drive aplikasi anda. Berhenti berusaha untuk menulis besar plugin yang melakukan segala sesuatu. Alih-alih menulis sedikit arahan bahwa melakukan satu hal, kemudian menulis sebuah template sederhana untuk kawat mereka bersama-sama. Berpikir sedikit tentang JavaScript, dan bukannya berpikir dalam hal ekstensi HTML.

Saya buku kecil

Aku begitu bersemangat tentang AngularJS, saya menulis sebuah buku singkat yang anda're sangat welcome untuk baca online http://nicholasjohnson.com/angular-book/. Saya berharap itu's membantu.

anda Dapat menggambarkan pergeseran paradigma yang diperlukan?

Imperative vs Deklaratif

Dengan jQuery anda memberitahu DOM apa yang harus terjadi, langkah demi langkah. Dengan Admin anda menjelaskan apa hasil yang anda inginkan, tetapi tidak bagaimana melakukannya. Lebih lanjut tentang ini di sini. Juga, periksa Tanda Rajcok's jawaban.

Bagaimana saya arsitek dan desain client-side aplikasi web yang berbeda?

AngularJS adalah seluruh client-side framework yang menggunakan B pola (memeriksa mereka grafis). Hal ini sangat berfokus pada pemisahan kekhawatiran.

Apa perbedaan terbesar? Apa yang harus saya berhenti melakukan/menggunakan; apa yang harus saya mulai melakukan/menggunakan bukan?

jQuery perpustakaan

AngularJS indah client-side framework, sangat diuji, yang menggabungkan ton dari hal-hal keren seperti MVC, dependency injection, data binding, dan banyak lagi.

Ini berfokus pada pemisahan menyangkut dan pengujian (unit testing dan end-to-end testing), yang memfasilitasi test-driven development.

Cara terbaik untuk memulai adalah melalui mereka mengagumkan tutorial. Anda dapat pergi melalui langkah-langkah dalam beberapa jam; namun, dalam kasus anda ingin menguasai konsep-konsep di balik layar, mereka memiliki segudang referensi untuk bacaan lebih lanjut.

Apakah ada server-side pertimbangan/pembatasan?

Anda dapat menggunakannya pada aplikasi yang ada di mana anda sudah menggunakan jQuery murni. Namun, jika anda ingin untuk sepenuhnya mengambil keuntungan dari AngularJS fitur yang anda mungkin menganggap coding sisi server menggunakan Tenang pendekatan.

Melakukan hal ini akan memungkinkan anda untuk memanfaatkan mereka [sumber daya pabrik][10], yang menciptakan sebuah abstraksi dari sisi server anda Tenang API dan membuat server-side panggilan (mendapatkan, menyimpan, menghapus, dll.) sangat mudah.

[10]: http://docs.angularjs.org/api/ngResource.$sumber daya

Untuk menggambarkan "pergeseran paradigma", saya pikir jawaban singkat dapat cukup.

AngularJS mengubah cara anda menemukan unsur-unsur

Di jQuery, biasanya anda gunakan pemilih untuk menemukan unsur-unsur, dan kemudian kawat mereka: $('#id .kelas').klik(doStuff);

Di AngularJS, anda menggunakan petunjuk untuk menandai elemen langsung, untuk kawat mereka: <a ng-klik="doStuff()">

AngularJS doesn't perlu (atau ingin) anda untuk menemukan elemen dengan menggunakan penyeleksi - perbedaan utama antara AngularJS's jqLite terhadap full-blown jQuery adalah bahwa jqLite tidak mendukung penyeleksi.

Jadi, ketika orang mengatakan "don't seperti jQuery sama sekali", it's terutama karena mereka don't ingin anda untuk menggunakan penyeleksi; mereka ingin anda untuk belajar menggunakan perintah sebagai gantinya. Langsung, tidak pilih!

jQuery

jQuery membuat ridiculously panjang JavaScript perintah seperti getElementByHerpDerp lebih pendek dan cross-browser.

AngularJS

AngularJS memungkinkan anda untuk membuat anda sendiri tag-tag HTML/atribut yang melakukan hal-hal yang bekerja dengan baik dengan aplikasi web dinamis (karena HTML dirancang untuk halaman statis).

Edit:

Mengatakan "saya memiliki jQuery latar belakang bagaimana saya pikir di AngularJS?" seperti mengatakan "saya memiliki sebuah HTML latar belakang bagaimana saya pikir di JavaScript?" fakta bahwa anda're mengajukan pertanyaan menunjukkan kemungkinan besar anda don't memahami tujuan mendasar dari dua sumber. Ini adalah mengapa saya memilih untuk menjawab pertanyaan dengan hanya menunjukkan perbedaan yang mendasar daripada pergi melalui daftar mengatakan "AngularJS membuat penggunaan arahan sedangkan jQuery menggunakan CSS untuk membuat objek jQuery yang melakukan ini dan itu dll....". Pertanyaan ini tidak membutuhkan jawaban panjang.

jQuery adalah cara untuk membuat pemrograman JavaScript di browser menjadi lebih mudah. Lebih pendek, cross-browser perintah, dll.

AngularJS meluas HTML, sehingga anda don't harus menempatkan <div> semua tempat hanya untuk membuat sebuah aplikasi. Itu membuat HTML yang benar-benar bekerja untuk aplikasi yang lebih dari apa yang dirancang untuk, yang statis, pendidikan halaman web. Ia menyelesaikan ini secara tidak langsung menggunakan JavaScript, tetapi pada dasarnya itu adalah perpanjangan dari HTML, JavaScript tidak.

jQuery: anda berpikir banyak tentang 'Query DOM' untuk elemen DOM dan melakukan sesuatu.

AngularJS: model adalah kebenaran, dan anda selalu berpikir dari SUDUT itu.

Misalnya, ketika anda mendapatkan data dari server yang anda berniat untuk ditampilkan dalam beberapa format dalam DOM, di jQuery, anda perlu '1. MENEMUKAN' di mana dalam DOM yang anda inginkan untuk menempatkan data ini, '2. UPDATE/MENAMBAHKAN' itu ada dengan membuat node baru atau hanya pengaturan innerHTML. Kemudian ketika anda ingin memperbarui tampilan ini, anda kemudian '3. MENEMUKAN' lokasi dan '4. UPDATE'. Siklus ini menemukan dan memperbarui semua dilakukan dalam konteks yang sama untuk mendapatkan dan format data dari server hilang di AngularJS.

Dengan AngularJS anda memiliki model (objek JavaScript anda sudah digunakan untuk) dan nilai dari model memberitahu anda tentang model (jelas) dan tentang pandangan, dan operasi pada model secara otomatis menjalar ke bagian view, sehingga anda don't harus berpikir tentang hal itu. Anda akan menemukan diri anda dalam AngularJS tidak lagi menemukan hal-hal di masa DOM.

Untuk dimasukkan ke dalam cara lain, di jQuery, anda harus berpikir tentang CSS, yaitu, di mana div atau td yang memiliki kelas atau atribut, dll., sehingga aku bisa mendapatkan mereka HTML atau warna atau nilai, tapi di AngularJS, anda akan menemukan diri anda berpikir seperti ini: model apa yang sedang aku hadapi, aku akan mengatur model's nilai true. Anda tidak mengganggu diri sendiri apakah pandangan yang mencerminkan nilai ini adalah memeriksa kotak atau berada dalam td elemen (rincian anda akan sering perlu untuk berpikir tentang di jQuery).

Dan dengan manipulasi DOM di AngularJS, anda menemukan diri anda menambahkan arahan dan filter, yang dapat anda pikirkan sebagai valid HTML ekstensi.

Satu hal lagi yang anda akan mengalami di AngularJS: di jQuery anda memanggil fungsi jQuery banyak, di AngularJS, AngularJS akan memanggil fungsi-fungsi, sehingga AngularJS akan 'memberitahu anda bagaimana untuk melakukan hal-hal', tetapi manfaat yang layak, sehingga belajar AngularJS biasanya berarti belajar apa yang AngularJS ingin atau cara AngularJS mengharuskan anda hadir fungsi anda dan akan menyebutnya demikian. Ini adalah salah satu hal yang membuat AngularJS merupakan framework daripada perpustakaan.

Mereka adalah beberapa yang sangat bagus, tapi jawaban panjang.

Untuk meringkas pengalaman saya:

1. Pengendali dan penyedia (jasa, pabrik, dll.) untuk memodifikasi data model, BUKAN HTML.
2. HTML dan arahan menentukan tata letak dan mengikat untuk model.
3. Jika anda perlu untuk berbagi data antara controller, membuat layanan atau pabrik - mereka yang lajang yang dibagi di aplikasi.
4. Jika anda membutuhkan HTML widget, membuat directive.
5. Jika anda memiliki beberapa data dan sekarang mencoba untuk meng-update HTML... BERHENTI! update model, dan pastikan HTML anda terikat untuk model.

jQuery adalah sebuah manipulasi DOM perpustakaan.

AngularJS adalah MV* kerangka.

Bahkan, AngularJS adalah salah satu dari beberapa JavaScript MV* kerangka kerja (banyak JavaScript MVC alat masih jatuh di bawah kategori perpustakaan).

Menjadi kerangka, itu host code anda dan mengambil kepemilikan dari keputusan-keputusan tentang apa yang harus memanggil dan kapan!

AngularJS itu sendiri termasuk jQuery-lite edition di dalamnya. Jadi untuk beberapa dasar DOM seleksi/manipulasi, anda benar-benar don't harus menyertakan library jQuery (menghemat banyak byte untuk dijalankan pada jaringan.)

AngularJS memiliki konsep "Arahan" untuk manipulasi DOM dan merancang komponen UI dapat digunakan kembali, jadi anda harus menggunakannya setiap kali anda merasa perlu melakukan manipulasi DOM terkait hal-hal yang (perintah-satunya tempat di mana anda harus menulis kode jQuery saat menggunakan AngularJS).

AngularJS melibatkan beberapa kurva belajar (lebih dari jQuery :-).

-->Untuk setiap pengembang yang berasal dari jQuery latar belakang, saya saran pertama akan "belajar JavaScript sebagai kelas bahasa sebelum melompat ke sebuah kerangka kaya seperti AngularJS!" Saya belajar fakta di atas dengan cara yang keras.

Good luck.

Mereka're apel dan jeruk. Anda don't ingin membandingkan mereka. Mereka're dua hal yang berbeda. AngularJs telah jQuery lite built in yang memungkinkan anda untuk melakukan dasar manipulasi DOM bahkan tanpa termasuk penuh ditiup versi jQuery.

jQuery adalah semua tentang manipulasi DOM. Ini memecahkan semua cross browser sakit jika tidak, anda akan harus berurusan dengan tetapi itu's tidak sebuah kerangka kerja yang memungkinkan anda untuk membagi aplikasi menjadi komponen-komponen seperti AngularJS.

Hal yang baik tentang AngularJs adalah bahwa hal itu memungkinkan anda untuk memisahkan/mengisolasi manipulasi DOM di arahan. Ada built-in perintah yang siap untuk anda gunakan seperti ng-klik. Anda dapat membuat kustom anda sendiri arahan yang akan berisi semua yang anda lihat logika atau manipulasi DOM sehingga anda don't akhirnya berbaur manipulasi DOM kode di controller atau jasa yang harus mengurus logika bisnis.

Sudut memecah aplikasi anda ke

• Pengendali
• Jasa
• Pandangan
• dll.

dan ada satu hal lagi, bahwa's direktif. It's atribut yang anda dapat melampirkan untuk setiap elemen DOM dan anda dapat pergi gila dengan jQuery di dalamnya tanpa khawatir tentang jQuery anda pernah konflik dengan AngularJs komponen atau mengacaukan dengan arsitektur.

Saya mendengar dari sebuah meetup yang saya hadiri, salah satu pendiri dari Sudut mengatakan mereka bekerja sangat keras untuk memisahkan manipulasi DOM jadi jangan mencoba untuk memasukkan mereka kembali.

Mendengarkan podcast JavaScript Jabber: Episode #32 bahwa fitur pencipta asli dari AngularJS: Misko Hevery & Igor Minar. Mereka berbicara banyak tentang apa itu's seperti untuk datang ke AngularJS dari JavaScript lain latar belakang, terutama jQuery.

Salah satu poin yang dibuat dalam podcast membuat banyak hal-hal klik untuk saya dengan hal untuk pertanyaan anda:

MISKO: [...] salah satu dari hal-hal yang kita pikir tentang sangat sulit di Sudut adalah, bagaimana kita memberikan banyak melarikan diri menetas sehingga anda bisa keluar dan pada dasarnya mencari jalan keluar dari ini. Jadi bagi kami, jawabannya adalah hal ini disebut "Arahan". Dan dengan arahan, anda pada dasarnya menjadi biasa sedikit JavaScript jQuery, anda dapat melakukan apapun yang anda inginkan.

IGOR: Jadi berpikir directive sebagai instruksi untuk compiler yang mengatakan itu setiap kali anda menemukan elemen tertentu atau CSS dalam template, dan kau terus seperti ini code dan kode yang bertanggung jawab dari elemen dan segala sesuatu di bawah elemen dalam pohon DOM.

Transkrip dari seluruh episode ini tersedia di link yang disediakan di atas.

Jadi, untuk langsung menjawab pertanyaan anda: AngularJS -sangat - dogmatis dan benar MV* kerangka. Namun, anda masih dapat melakukan semua hal yang benar-benar keren hal-hal yang anda tahu dan cinta dengan jQuery dalam arahan. It's tidak masalah "Bagaimana saya melakukan apa yang saya digunakan untuk di jQuery?" sebanyak itu's masalah "Bagaimana saya suplemen AngularJS dengan semua hal yang saya digunakan untuk melakukan dalam jQuery?"

It's benar-benar dua negara yang berbeda dari pikiran.

Saya menemukan pertanyaan ini menarik, karena pertama saya serius paparan pemrograman JavaScript adalah Node.js dan AngularJS. Saya tidak pernah belajar jQuery, dan saya kira bahwa's hal yang baik, karena aku don't harus melupakan apa-apa. Pada kenyataannya, saya aktif menghindari jQuery solusi untuk masalah saya, dan sebaliknya, semata-mata mencari "AngularJS cara" untuk menyelesaikannya. Jadi, saya kira jawaban saya untuk pertanyaan ini pada dasarnya akan mendidih ke, "berpikir seperti seseorang yang tidak pernah belajar jQuery" dan menghindari godaan untuk menggabungkan jQuery ini diatas (jelas AngularJS menggunakannya untuk beberapa tingkat di belakang layar).

AngularJS dan jQuery:

AngularJs dan JQuery yang benar-benar berbeda di setiap tingkat kecuali JQLite fungsi dan anda akan melihat setelah anda mulai belajar AngularJs fitur inti (saya jelaskan di bawah ini).

AngularJs adalah client side framework yang menawarkan untuk membangun independen sisi client aplikasi. JQuery adalah sisi client library yang bermain di sekitar DOM.

AngularJs Keren Prinsip - Jika anda ingin beberapa perubahan pada UI anda berpikir dari model data perubahan perspektif. Perubahan data dan UI akan kembali membuat sendiri. Anda tidak perlu untuk bermain-main DOM setiap waktu kecuali dan sampai hampir tidak diperlukan dan yang juga harus ditangani melalui Sudut Arahan.

Untuk menjawab pertanyaan ini, saya ingin berbagi pengalaman saya pada aplikasi enterprise dengan AngularJS. Ini adalah yang paling mengagumkan fitur yang memberikan Sudut mana kita mulai mengubah kita jQuery pola pikir dan kita mendapatkan Sudut seperti kerangka dan tidak perpustakaan.

Dua-cara mengikat data adalah menakjubkan: Saya punya jaringan dengan semua fungsi PEMBARUAN, DELTE, MENYISIPKAN. Saya memiliki sebuah objek data yang mengikat jaringan's menggunakan model ng-repeat. Anda hanya perlu menulis satu baris JavaScript sederhana kode untuk menghapus dan menyisipkan dan yang's ini. grid secara otomatis update grid model perubahan langsung. Update fungsi real time, tidak ada kode untuk itu. Anda merasa luar biasa!!!

Reusable arahan super: Menulis petunjuk di satu tempat dan menggunakannya di seluruh aplikasi. OMG!!! Saya menggunakan ini petunjuk untuk paging, regex, validasi, dll. Hal ini benar-benar keren!

Routing adalah kuat: It's hingga penerapan anda bagaimana anda ingin menggunakannya, tetapi membutuhkan beberapa baris kode untuk rute permintaan untuk menentukan HTML dan controller (JavaScript)

Pengendali yang besar: Pengendali mengurus sendiri HTML, tetapi pemisahan ini bekerja dengan baik untuk fungsi umum juga. Jika anda ingin memanggil fungsi yang sama di klik sebuah tombol pada master HTML, hanya menulis yang sama dengan nama fungsi pada masing-masing kontroler dan individu menulis kode.

Plugin: Ada banyak fitur yang mirip seperti menampilkan overlay di aplikasi anda. Anda don't perlu menulis kode untuk itu, hanya menggunakan overlay plugin yang tersedia seperti wc-overlay, dan ini secara otomatis akan mengurus semua XMLHttpRequest (XHR) permintaan.

Ideal untuk Tenang arsitektur: Yang lengkap kerangka membuat AngularJS besar untuk bekerja dengan Tenang arsitektur. Untuk memanggil SISA CRUD Api ini sangat mudah dan

Jasa: Tulis umum kode-kode dengan menggunakan jasa dan kurang code pada controller. Sevices dapat digunakan untuk berbagi fungsi umum di antara para malaikat.

Diperpanjang: Sudut telah diperpanjang HTML arahan menggunakan sudut arahan. Menulis ekspresi dalam html dan mengevaluasi mereka pada saat runtime. Membuat anda sendiri arahan dan jasa dan menggunakannya dalam proyek lain tanpa usaha ekstra.

Sebagai JavaScript MV* pemula dan murni berfokus pada arsitektur aplikasi (bukan server/client-side penting), saya pasti akan merekomendasikan sumber daya berikut (yang saya heran itu't belum disebutkan): JavaScript Pola Desain, oleh Addy Osmani, sebagai sebuah pengenalan yang berbeda JavaScript Pola Desain. Istilah yang digunakan dalam jawaban ini diambil dari dokumen terkait di atas. I'm tidak akan mengulangi apa yang bernada sangat baik dalam menerima jawaban. Sebaliknya, jawaban ini link kembali ke teoritis latar belakang yang power AngularJS (dan perpustakaan lain).

Seperti saya, anda akan dengan cepat menyadari bahwa AngularJS (atau Ember.js, Durandal, & lain MV* kerangka kerja dalam hal ini) adalah salah satu kerangka kompleks perakitan banyak berbeda JavaScript desain pola.

Saya menemukan hal yang mudah juga, untuk menguji (1) asli kode JavaScript dan (2) perpustakaan kecil untuk setiap salah satu dari pola-pola ini secara terpisah sebelum menyelam ke dalam satu kerangka kerja global. Hal ini memungkinkan saya untuk lebih memahami isu-isu penting kerangka kerja adresses (karena anda adalah pribadi dihadapkan dengan masalah).

Misalnya:

• JavaScript Object-oriented Programming (ini adalah pencarian Google link). Hal ini tidak perpustakaan, tapi tentu saja merupakan prasyarat untuk setiap aplikasi pemrograman. Hal ini mengajarkan saya asli implementasi prototipe, konstruktor, singleton & pola dekorator
• jQuery/ Underscore untuk pola fasad (seperti WYSIWYG's untuk memanipulasi DOM)
• Prototype.js untuk prototipe/ konstruktor/ mixin pola
• RequireJS/ Curl.js untuk modul pola/ AMD
• KnockoutJS untuk diamati, mempublikasikan/berlangganan pola

NB: daftar Ini tidak lengkap, atau 'perpustakaan terbaik'; mereka hanya terjadi untuk menjadi perpustakaan yang saya pakai. Perpustakaan ini juga memiliki pola yang lebih, yang disebutkan hanya mereka fokus utama asli atau maksud. Jika anda merasa ada sesuatu yang hilang dari daftar ini, jangan menyebutkan hal itu di komentar, dan saya akan senang untuk menambahkannya.

Sebenarnya, jika anda're menggunakan AngularJS, anda don't perlu jQuery lagi. AngularJS sendiri telah mengikat dan direktif, yang adalah sangat baik "penggantian" untuk sebagian besar hal-hal yang dapat anda lakukan dengan jQuery.

Saya biasanya mengembangkan aplikasi mobile menggunakan AngularJS dan Cordova. Satu-SATUNYA hal dari jQuery yang saya butuhkan adalah Selector.

Dengan googling, saya melihat bahwa ada mandiri jQuery modul pemilih di luar sana. It's Mendesis.

Dan saya memutuskan untuk membuat sedikit cuplikan kode yang membantu saya dengan cepat memulai sebuah situs web menggunakan AngularJS dengan kekuatan jQuery Selector (menggunakan Mendesis).

Saya berbagi kode berikut: https://github.com/huytd/Sizzular