Apakah masuk akal untuk menggunakan Require.js dengan Angular.js? [Tutup]

Saya seorang pemula untuk Angular.js dan mencoba memahami perbedaannya dari Backbone.js ... Kami dulu mengelola dependensi paket kami dengan Require.js saat menggunakan Backbone. Apakah masuk akal untuk melakukan hal yang sama dengan Angular.js?

Ya itu masuk akal untuk digunakan angular.jsbersama dengan di require.jsmana Anda dapat menggunakan require.jsuntuk memodulasi komponen.

Ada proyek benih yang digunakan both angular.js and require.js.

Untuk menyatakan kembali apa yang saya pikirkan pertanyaan OP sebenarnya:

Jika saya sedang membangun aplikasi terutama di Angular 1.x, dan (secara implisit) melakukannya di era Grunt / Gulp / Brokoli dan Bower / NPM, dan saya mungkin memiliki beberapa dependensi perpustakaan tambahan, apakah Perlu menambahkan lebih jelas, spesifik nilai melebihi apa yang saya dapatkan dengan menggunakan Angular tanpa Membutuhkan?

Atau, dengan kata lain:

"Apakah vanilla Angular perlu Diperlukan untuk mengelola pemuatan komponen Angular dasar secara efektif, jika saya memiliki cara lain untuk menangani pemuatan skrip dasar? "

Dan saya percaya jawaban dasar untuk itu adalah: "tidak kecuali Anda memiliki sesuatu yang sedang terjadi, dan / atau Anda tidak dapat menggunakan alat yang lebih baru, lebih modern."

Mari kita perjelas sejak awal: RequireJS adalah alat yang hebat yang memecahkan beberapa masalah yang sangat penting, dan memulai langkah kita, menuju aplikasi Javascript yang lebih skalabel dan lebih profesional. Yang penting, ini adalah pertama kalinya banyak orang menemukan konsep modularisasi dan mengeluarkan sesuatu dari ruang lingkup global. Jadi, jika Anda akan membangun aplikasi Javascript yang perlu ditingkatkan, maka Memerlukan dan pola AMD bukanlah alat yang buruk untuk melakukan itu.

Tetapi, apakah ada sesuatu yang khusus tentang Angular yang membuat Require / AMD sangat cocok? Tidak. Faktanya, Angular memberi Anda modulasi dan pola enkapsulasi sendiri, yang dalam banyak hal menjadikan fitur modularisasi AMD yang berlebihan. Dan, mengintegrasikan modul Angular ke dalam pola AMD bukan tidak mungkin, tapi agak ... rewel. Anda pasti akan menghabiskan waktu untuk mengintegrasikan kedua pola dengan baik.

Untuk beberapa sudut pandang dari tim Angular itu sendiri, ada ini , dari Brian Ford, penulis Angular Batarang dan sekarang menjadi anggota tim inti Angular:

Saya tidak merekomendasikan menggunakan RequireJS dengan AngularJS. Meskipun tentu saja mungkin, saya belum melihat contoh di mana RequireJS bermanfaat dalam praktik.

Jadi, pada pertanyaan AngularJS yang sangat spesifik: Angular dan Require / AMD adalah ortogonal, dan di beberapa tempat tumpang tindih. Anda dapat menggunakannya bersama-sama, tetapi tidak ada alasan khusus yang terkait dengan sifat / pola Angular itu sendiri.

Tetapi bagaimana dengan manajemen dasar ketergantungan internal dan eksternal untuk aplikasi Javascript yang dapat diskalakan? Tidak Perlu melakukan sesuatu yang sangat penting bagi saya di sana?

Saya merekomendasikan memeriksa Bower dan NPM, dan terutama NPM. Saya tidak mencoba memulai perang suci tentang manfaat komparatif dari alat-alat ini. Saya hanya ingin mengatakan: ada cara lain untuk menguliti kucing itu, dan cara-cara itu mungkin bahkan lebih baik daripada AMD / Membutuhkan. (Mereka tentu memiliki momentum yang jauh lebih populer di akhir 2015, khususnya NPM, dikombinasikan dengan modul ES6 atau CommonJS. Lihat pertanyaan SO terkait .)

Bagaimana dengan pemuatan malas?

Perhatikan bahwa memuat malas dan mengunduh malas berbeda. Pemuatan malas Angular tidak berarti Anda menariknya langsung dari server. Dalam aplikasi bergaya Yeoman dengan otomatisasi javascript, Anda menggabungkan dan memperkecil keseluruhan shebang menjadi satu file. Mereka hadir, tetapi tidak dieksekusi / dipakai sampai diperlukan. Peningkatan kecepatan dan bandwidth yang Anda dapatkan dari melakukan ini sangat, jauh lebih besar daripada perbaikan yang dituduhkan dari mengunduh malas pengontrol 20-line tertentu. Bahkan, latensi jaringan yang terbuang dan overhead transmisi untuk pengontrol itu akan menjadi urutan besarnya lebih besar dari ukuran pengontrol itu sendiri.

Tetapi katakanlah Anda benar-benar perlu mengunduh dengan malas, mungkin untuk aplikasi Anda yang jarang digunakan, seperti antarmuka admin. Itu kasus yang sangat sah. Membutuhkan memang bisa melakukan itu untuk Anda. Tetapi ada juga banyak lainnya , berpotensi lebih fleksibel pilihan yang mencapai hal yang sama. Dan Angular 2.0 tampaknya akan menangani ini untuk kita, built-in ke router . ( Detail .)

Tapi bagaimana dengan selama pengembangan di kotak dev lokal saya?

Bagaimana saya bisa mendapatkan semua lusinan file skrip saya dimuat tanpa perlu melampirkan semuanya ke index.html secara manual?

Lihatlah sub-generator dalam generator-angular Yeoman, atau pada pola otomasi yang terkandung dalam generator-gulp-angular , atau pada otomatisasi Webpack standar untuk React. Ini memberi Anda cara yang bersih dan dapat diskalakan untuk: secara otomatis melampirkan file pada saat komponen-komponennya dirancah, atau hanya mengambil semuanya secara otomatis jika mereka ada dalam folder tertentu / cocok dengan pola-glob tertentu. Anda tidak perlu lagi memikirkan pemuatan skrip Anda sendiri setelah mendapatkan opsi yang terakhir.

Intinya?

Membutuhkan adalah alat yang hebat, untuk hal-hal tertentu. Tetapi pergi dengan gandum jika memungkinkan, dan pisahkan kekhawatiran Anda bila memungkinkan. Biarkan Angular khawatir tentang pola modularisasi Angular sendiri, dan pertimbangkan untuk menggunakan modul ES6 atau CommonJS sebagai pola modularisasi umum. Biarkan alat otomatisasi modern khawatir tentang pemuatan skrip dan pengelolaan ketergantungan. Dan atasi async lazy-loading dengan cara granular, bukan dengan menyibukkannya dengan dua masalah lainnya.

Yang mengatakan, jika Anda mengembangkan aplikasi Angular tetapi tidak dapat menginstal Node pada mesin Anda untuk menggunakan alat otomatisasi Javascript karena beberapa alasan, maka Membutuhkan mungkin merupakan solusi alternatif yang baik. Dan saya telah melihat pengaturan yang sangat rumit di mana orang ingin secara dinamis memuat komponen Angular yang masing-masing menyatakan dependensi mereka sendiri atau sesuatu. Dan sementara saya mungkin akan mencoba untuk memecahkan masalah itu dengan cara lain, saya dapat melihat manfaat dari gagasan itu, untuk situasi yang sangat khusus itu.

Tetapi sebaliknya ... ketika mulai dari awal dengan aplikasi Angular baru dan fleksibilitas untuk menciptakan lingkungan otomasi modern ... Anda punya banyak pilihan lain yang lebih fleksibel dan lebih modern.

(Diperbarui berulang kali untuk mengikuti perkembangan adegan JS.)

Ya, itu masuk akal.

Modul sudut tidak mencoba untuk memecahkan masalah pemesanan pemuatan skrip atau pengambilan skrip yang malas. Sasaran-sasaran ini ortogonal dan kedua sistem modul dapat hidup berdampingan dan memenuhi tujuan mereka.

Sumber: situs web resmi Angular JS

Ini saya percaya adalah pertanyaan subyektif, jadi saya akan memberikan pendapat subyektif saya.

Angular memiliki mekanisme modularisasi bawaan. Saat Anda membuat aplikasi, hal pertama yang akan Anda lakukan adalah

var app = angular.module("myApp");

lalu

app.directive(...);

app.controller(...);

app.service(...);

Jika Anda melihat sudut-seed yang merupakan aplikasi starter yang rapi untuk angle, mereka telah memisahkan arahan, layanan, controller dll menjadi modul yang berbeda dan kemudian memuat modul-modul tersebut sebagai dependancies pada aplikasi utama Anda.

Sesuatu seperti :

var app = angular.module("myApp",["Directives","Controllers","Services"];

Angular juga malas memuat modul-modul ini (ke dalam memori) bukan file skrip mereka.

Dalam hal malas memuat file skrip, sejujurnya kecuali Anda menulis sesuatu yang sangat besar itu akan menjadi berlebihan karena sifatnya sendiri mengurangi jumlah kode yang Anda tulis. Aplikasi tipikal yang ditulis di sebagian besar kerangka kerja lain dapat mengharapkan pengurangan sekitar 30-50% dalam LOC jika ditulis dalam sudut.

Menggunakan RequireJS dengan AngularJS masuk akal tetapi hanya jika Anda memahami bagaimana masing-masing bekerja mengenai injeksi dependensi , seolah- olah keduanya menyuntikkan dependensi, mereka menyuntikkan hal yang sangat berbeda.

AngularJS memiliki sistem ketergantungannya sendiri yang memungkinkan Anda menyuntikkan modul AngularJS ke modul yang baru dibuat untuk menggunakan kembali implementasi. Katakanlah Anda membuat modul "pertama" yang mengimplementasikan filter "sambutan" AngularJS:

angular
  .module('first', [])
  .filter('greet', function() {
    return function(name) {
      return 'Hello, ' + name + '!';
    }
  });

Dan sekarang katakanlah Anda ingin menggunakan filter "sapaan" di modul lain yang disebut "kedua" yang mengimplementasikan filter "selamat tinggal". Anda dapat melakukannya dengan menyuntikkan modul "pertama" ke modul "kedua":

angular
  .module('second', ['first'])
  .filter('goodbye', function() {
    return function(name) {
      return 'Good bye, ' + name + '!';
    }
  });

Masalahnya adalah bahwa untuk membuat ini berfungsi dengan benar tanpa RequireJS, Anda harus memastikan bahwa modul AngularJS "pertama" dimuat pada halaman sebelum Anda membuat modul AngularJS "kedua". Dokumentasi kutipan:

Tergantung pada modul yang menyiratkan bahwa modul yang diperlukan perlu dimuat sebelum modul yang diperlukan dimuat.

Dalam hal ini, di sinilah RequireJS dapat membantu Anda karena RequireJS menyediakan cara yang bersih untuk menyuntikkan skrip ke halaman membantu Anda mengatur ketergantungan skrip antara satu sama lain.

Kembali ke modul AngularJS "pertama" dan "kedua", berikut adalah bagaimana Anda dapat melakukannya menggunakan RequireJS memisahkan modul pada file yang berbeda untuk meningkatkan pemuatan dependensi skrip:

// firstModule.js file
define(['angular'], function(angular) {
  angular
    .module('first', [])
    .filter('greet', function() {
      return function(name) {
        return 'Hello, ' + name + '!';
      }
    });
});

// secondModule.js file
define(['angular', 'firstModule'], function(angular) {
  angular
    .module('second', ['first'])
    .filter('goodbye', function() {
      return function(name) {
        return 'Good bye, ' + name + '!';
      }
    });
});

Anda dapat melihat bahwa kita bergantung pada file "firstModule" yang akan disuntikkan sebelum konten dari panggilan balik RequireJS dapat dieksekusi yang membutuhkan modul AngularJS "pertama" yang akan dimuat untuk membuat modul AngularJS "kedua".

Catatan: Menyuntikkan file "angular" pada file "firstModule" dan "secondModule" karena ketergantungan diperlukan untuk menggunakan AngularJS di dalam fungsi panggil balik RequireJS dan harus dikonfigurasi pada config RequireJS untuk memetakan "angular" ke kode perpustakaan. Anda mungkin memiliki AngularJS dimuat ke halaman secara tradisional juga (tag tag) meskipun mengalahkan manfaat RequireJS.

Rincian lebih lanjut tentang memiliki dukungan NeedeJS dari inti AngularJS dari versi 2.0 di posting blog saya.

Berdasarkan posting blog saya "Memahami Persyaratan dengan AngularJS" , inilah tautannya .

Seperti @ganaraj disebutkan, AngularJS memiliki injeksi ketergantungan pada intinya. Ketika membangun aplikasi benih mainan dengan dan tanpa RequireJS, saya pribadi menemukan RequireJS mungkin berlebihan untuk kebanyakan kasus penggunaan.

Itu tidak berarti RequireJS tidak berguna karena kemampuan memuat skrip dan menjaga basis kode Anda tetap bersih selama pengembangan. Menggabungkan pengoptimal r.js ( https://github.com/jrburke/r.js ) dengan almond ( https://github.com/jrburke/almond ) dapat membuat kisah pemuatan skrip yang sangat tipis. Namun karena fitur manajemen ketergantungannya tidak sepenting dengan sudut pada inti aplikasi Anda, Anda juga dapat mengevaluasi sisi klien lain (HeadJS, LABjs, ...) atau bahkan sisi server (MVC4 Bundler, ...) solusi pemuatan skrip untuk aplikasi khusus Anda.

Ya, tentu saja, khusus untuk SPA yang sangat besar.

Dalam beberapa skenario, RequireJS adalah suatu keharusan. Misalnya, saya mengembangkan aplikasi PhoneGap menggunakan AngularJS yang juga menggunakan Google Map API. Tanpa AMD loader seperti RequireJS, aplikasi hanya akan mogok saat diluncurkan saat offline karena tidak dapat sumber skrip Google Map API. AMD loader memberi saya kesempatan untuk menampilkan pesan kesalahan kepada pengguna.

Namun, integrasi antara AngularJS dan RequireJS agak rumit. Saya membuat angularAMD untuk menjadikan ini proses yang tidak terlalu menyakitkan:

http://marcoslin.github.io/angularAMD/

Jawaban singkatnya adalah masuk akal. Baru-baru ini dibahas di ng-conf 2014. Ini adalah pembicaraan tentang topik ini:

http://www.youtube.com/watch?v=4yulGISBF8w

Masuk akal untuk menggunakan requireejs dengan angularjs jika Anda berencana untuk memuat pengontrol dan arahan malas dll, sementara juga menggabungkan beberapa dependensi malas ke dalam file skrip tunggal untuk pemuatan malas yang jauh lebih cepat. RequireJS memiliki alat optimisasi yang membuat penggabungan menjadi mudah. Lihat http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/

Ya, masuk akal untuk menggunakan JJ dengan Angular, saya menghabiskan beberapa hari untuk menguji beberapa solusi teknis.

Saya membuat Seed Angular dengan RequireJS di Server Side. Sangat sederhana. Saya menggunakan notasi SHIM tanpa modul AMD dan bukan AMD karena saya pikir sangat sulit untuk berurusan dengan dua sistem injeksi Ketergantungan yang berbeda.

Saya menggunakan grunt dan r.js untuk menggabungkan file js di server tergantung pada konfigurasi SHIM (dependensi) file. Jadi saya merujuk hanya satu file js di aplikasi saya.

Untuk informasi lebih lanjut, buka Benih Angular github saya: https://github.com/matohawk/angular-seed-requirejs

Saya akan menghindari menggunakan Require.js. Aplikasi yang pernah saya lihat yang melakukan ini mengacaukan banyak jenis arsitektur pola modul. AMD, Revealing, berbagai rasa IIFE, dll. Ada cara lain untuk memuat berdasarkan permintaan seperti loadOnDemand Angular mod . Menambahkan hal-hal lain hanya mengisi kode Anda yang penuh dengan cruft dan membuat rasio signal to noise yang rendah dan membuat kode Anda sulit dibaca.

Inilah pendekatan yang saya gunakan: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

Halaman ini menunjukkan kemungkinan implementasi AngularJS + RequireJS, di mana kode dibagi berdasarkan fitur dan kemudian tipe komponen.

Jawaban dari Brian Ford

AngularJS memiliki sistem modulnya sendiri dan biasanya tidak memerlukan sesuatu seperti RJS.

Referensi: https://github.com/yeoman/generator-angular/issues/40

Saya pikir itu tergantung pada kompleksitas proyek Anda karena sudut cukup banyak termodulasi. Pengontrol Anda dapat dipetakan dan Anda hanya dapat mengimpor kelas-kelas JavaScript di halaman index.html Anda.

Tetapi jika proyek Anda menjadi lebih besar. Atau Anda mengantisipasi skenario seperti itu, Anda harus mengintegrasikan sudut dengan needsejs. Pada artikel ini Anda dapat melihat aplikasi demo untuk integrasi tersebut.