Bagi pemula, bolehkah seseorang jelas menjelaskan perbezaan antara Perkhidmatan, Kilang dan Penyedia di AngularJS?


Jawapan 1:

AngularJS: Perbezaan antara Penyedia vs Pembekal vs Kilang

Sekiranya anda mencari ini mungkin kerana anda cuba mencari yang mana yang sesuai untuk anda gunakan. Atau kerana anda telah menjumpai ketiga-tiga mereka dan cuba menentukan perbezaan kerana mereka kelihatan sama.

Jika anda fikir ia serupa - anda betul. Mereka sangat serupa. Malah, mereka semua adalah perkara yang sama.

Mereka semua penyedia. Kilang dan perkhidmatan itu hanya kes-kes khusus pembekal, tetapi anda boleh mencapai semua yang anda mahukan menggunakan pembekal sahaja. Saya akan tunjukkan awak.

Pembekal

Kami akan membuat pembekal yang mengembalikan nilai dan hanya memaparkan nilai itu, anda akan melakukan ini:

var mod = angular.module ("MyModule", []); mod.provider ("myProvider", function () {this. $ get = function () {return "My Value";};}); mod.controller ("MyController", fungsi (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); CONSOLE OUTPUT MyController - myProvider: My Value

Contoh interaktif yang bekerja dapat ditemukan di: JS Rebab.

Di sana, jadi "penyedia" di inti mari kita "memberikan" nilai. Nilai itu boleh jadi apa-apa. Dalam kes ini ia rentetan dengan nilai "Nilai Saya" tetapi ia dengan mudah boleh menjadi fungsi atau objek.

Perhatikan dalam contoh kod lanjut saya akan mengecualikan tag dan takrif mod untuk tujuan mengekalkan petikan kod pendek dan ke titik.

Angular hanya mendapat nilai sekali sahaja

Ambil perhatian bahawa sudut hanya "mendapat" nilai sekali, tidak kira berapa kali penyedia disuntik. Ini bermakna ia memanggil $ get () hanya sekali sahaja, menyimpan nilai yang disediakan oleh $ get (), dan memberi anda nilai yang sama disimpan setiap kali.

Untuk menunjukkan kepada anda apa yang saya maksudkan saya akan membuat pengawal lain dan menyuntik penyedia sekali lagi dengan penyataan konsol supaya anda dapat melihat apa yang sedang berlaku.

mod.provider ("myProvider", function () {this. $ get = function () {console.log ("MyProviderFunction. $ get () called."); // ADDED line return "My Value";}; }); mod.controller ("MyController", fungsi (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", function (myProvider) {// ADDED console controller ini.log ("MyController2 - myProvider:" + myProvider);}); CONTOO OUTPUT MyProviderFunction. $ Get () dipanggil. MyController - myProvider: MyCont My ValueRiver2 - myProvider: My Value

Terbuka dalam JS Rebab

Seperti yang anda dapat lihat fungsi $ get () hanya dipanggil sekali sahaja.

Perhatikan bahawa kami menulis sekumpulan kod untuk pembekal hanya untuk tujuan membuat kaedah yang dipanggil $ get (). Kenapa bukan sebaliknya memberi fungsi sudut yang mendefinisikan fungsi lain, mengapa tidak hanya memberikan fungsi yang kita mahu lari secara langsung? Nah, anda boleh, itulah yang Angular panggilan kilang.

Kilang

Dengan kilang anda hanya menyediakan fungsi badan untuk kaedah $ mendapatkan dan Angular selebihnya. Di bawah adalah apa yang kelihatan seperti kod baru, kerana anda akan melihatnya sama dengan yang sama.

mod.factory ("myProvider", function () {// CHANGED "provider" to console.log "factory" ("function Factory called"); return "My Value";}); mod.controller ("MyController", fungsi (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.controller ("MyController2", fungsi (myProvider) {console.log ("MyController2 - myProvider:" + myProvider);}); CONSOLE OUTPUT Fungsi kilang dipanggil. MyController - myProvider: MyCont My ValueRiver2 - myProvider: My Value

Terbuka dalam JS Rebab

Kini anda mungkin tertanya-tanya kenapa anda pernah menggunakan pembekal jika anda boleh mencapai perkara yang sama dengan kilang dengan kod kurang. Terdapat beberapa sebab dan saya akan masuk ke dalam yang kemudian, sekarang saya mahu tetap berpegang kepada tajuk jawatan ini dan alamat perbezaan antara kedua-dua (pembekal dan kilang) dan perkhidmatan.

Setakat ini kami telah mengembalikan nilai rentetan mudah, tetapi dalam amalan apa yang mungkin kami mahu kembali kebanyakan masa adalah objek. Baik itu tidak akan mengubah contoh kita dengan sangat banyak, kita boleh dengan mudah menukar swap yang kita kembali dengan objek sebaliknya.

Sebagai contoh mari kita lakukannya dengan mengembalikan objek yang mengandungi fungsi yang dinamakan getValue (). Kini terdapat beberapa cara anda boleh membuat objek dalam JavaScript, kami akan menggunakan pendekatan "Objek Pembina" di mana kita membuat fungsi yang memaparkan objek dengan sifat dan fungsi dan menggunakan kata kunci baru untuk membuat instantiate itu.

fungsi MyObject () {// ADDED constructor object kami this.getValue = function () {return "My Value"; }; } mod.factory ("myProvider", function () {console.log ("fungsi kilang dipanggil."); kembali MyObject baru (); // CREATE contoh objek kami}); mod.controller ("MyController", fungsi (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ()); // CHANGED to call getValue ()}); mod.controller ("MyController2", fungsi (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ()); // CHANGED to call getValue ()}); CONSOLE OUTPUT Fungsi kilang dipanggil. MyController - myProvider: MyCont My ValueRiver2 - myProvider: My Value

Terbuka dalam JS Rebab

Sekarang saya ingin membuat satu tweak kecil untuk ini kerana ia akan memimpin dengan baik ke dalam konsep seterusnya. Dalam contoh kami, kami mencipta fungsi "Objek Pembina" MyObject (), tetapi kerana kami hanya menamakannya di satu tempat, kita boleh menggunakan fungsi anonim sebaliknya.

Ini adalah tweak yang sangat kecil. Daripada ini:

fungsi MyObject () {this.getValue = function () {return "My Value"; }; } mod.factory ("myProvider", function () {console.log ("fungsi kilang dipanggil."); kembali MyObject baru ();});

Kami melakukan ini:

mod.factory ("myProvider", function () {console.log ("fungsi kilang dipanggil"); kembali fungsi baru () {// INLINED constructor object object.getValue = function () {return "My Value"; };};});

Jadi semuanya kini kelihatan seperti ini:

mod.factory ("myProvider", function () {console.log ("fungsi kilang dipanggil"); kembali fungsi baru () {// INLINED constructor object object.getValue = function () {return "My Value"; };};}); mod.controller ("MyController", fungsi (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", fungsi (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());});

Terbuka dalam JS Rebab

Kini sejak keseluruhan kilang kami terdiri daripada satu objek, tidakkah ia bagus jika kita hanya dapat memberi sudut fungsi objek pembina daripada perlu menulis kilang mencari funky itu. Nah, anda beruntung, ini adalah persis apa perkhidmatan.

Berkhidmat untuk anda

Berikut adalah kod yang sama kecuali menggunakan perkhidmatan dan bukan kilang.

mod.service ("myProvider", function () {// CHANGED "factory" to "service" // NOTE that the only function passed is constructor object from before this.getValue = function () {return "My Value" ;};}); mod.controller ("MyController", fungsi (myProvider) {console.log ("MyController - myProvider:" + myProvider.getValue ());}); mod.controller ("MyController2", fungsi (myProvider) {console.log ("MyController2 - myProvider:" + myProvider.getValue ());}); CONSOLE OUTPUT MyController - myProvider: MyCont My Valueroller2 - myProvider: My Value

Terbuka dalam JS Rebab

Penyedia vs Kilang vs Perkhidmatan

Jadi secara ringkas, penyedia, kilang, dan perkhidmatan adalah semua pembekal. Kilang adalah kes khas pembekal apabila semua yang anda perlukan dalam penyedia anda adalah fungsi $ get (). Ia membolehkan anda menulis dengan kurang kod. Perkhidmatan adalah kes khas sebuah kilang apabila anda ingin mengembalikan suatu contoh objek baru, dengan manfaat yang sama untuk menulis kurang kod.

Bila hendak menggunakan satu berbanding yang lain?

Jawapannya ialah anda menggunakan versi paling pakar yang mencapai matlamat anda. Katakanlah contohnya anda mengembalikan objek sedia ada yang ditakrifkan di tempat lain yang mengambil argumen pembina. Anda tidak boleh menyampaikan hujah kepada perkhidmatan, jadi anda akan membuat panggilan dengan kilang sebaliknya.

mod.factory ("myProvider", function () {console.log ("fungsi kilang dipanggil."); kembali SomeMessageBoxClass ("argumen khusus");});

Salah satu faktor utama untuk memutuskan antara pembekal dan kilang adalah sama ada anda mahu dapat mengkonfigurasi objek yang dihasilkan sebelum ia dihasilkan. Anda melakukan ini dengan memanggil module.config () dan mendapatkan contoh kepada penyedia itu sendiri (bukan objek yang dikembalikan oleh pembekal). Anda melakukan ini dengan menambahkan "Penyedia" hingga akhir nama penyedia anda apabila anda menyuntikkannya.

Berikut adalah contoh bagaimana anda akan melakukannya:

mod.provider ("myProvider", function () {this.value = "My Value"; this.setValue = function (newValue) {this.value = newValue;}; this $ get = function () {return this. nilai;};}); mod.controller ("MyController", fungsi (myProvider) {console.log ("MyController - myProvider:" + myProvider);}); mod.config (function (myProviderProvider) {// ADDED config section // Perhatikan akhiran "Provider" myProviderProvider.setValue ("New Value");});

Itu meliputi bila menggunakan ketiga pembekal: penyedia, kilang, dan perkhidmatan. Terdapat satu penyedia tambahan yang tidak disebutkan di sini yang merupakan satu lagi kes khas dan itu penyedia nilai.

Jika anda ingat apabila kami mula memperkenalkan pembekal kilang di atas, kami memberikan contoh mudah untuk mengembalikan nilai rentetan. Itu kelihatan seperti ini:

mod.factory ("myProvider", function () {return "My Value";});

Nah, kita sebenarnya boleh melakukannya dengan menggunakan penyedia nilai itu, sekali lagi manfaatnya adalah bahawa anda boleh melakukannya dengan kurang kod. Kod di bawah ini sama dengan kod di atas:

mod.value ("myProvider", "My Value");

Oleh itu, bilakah anda menggunakan salah satu daripada yang lain? Anggap anda akan menggunakan pengeluar kilang apabila anda ingin mengira nilai berdasarkan beberapa data lain, contohnya data dari pembekal nilai lain atau sumber luaran. Dan / atau apabila anda mahu mengira nilai jika dan hanya apabila ia diminta terlebih dahulu. Berikut adalah beberapa contoh:

// Contoh di mana kilang bergantung kepada mod.value penyedia "nilai" ("multiple", 3); mod.factory ("value", function (multiple) {return 10 * multiple;}); // Contoh di mana kilang bergantung kepada mod.factory data luaran ("nilai", fungsi (pelbagai) {var multiple = getDateFromExternalPage (); kembali 10 * berbilang;});

Adakah saya menyiratkan nilai itu adalah satu-satunya penyedia lain? Baik saya berbohong, ada satu lagi yang sangat mirip dengan nilai dengan dua perbezaan kecil. Penyedia itu dipanggil tetap.

Perbezaan antara nilai dan pemalar ialah nilai yang ditentukan menggunakan pemalar boleh didapati semasa fasa konfigurasi. Anda mungkin masih ingat dari sebelumnya bahawa saya menyebutkan pembekal itu boleh diakses dari fasa konfigurasi, tetapi perkhidmatan dan factorywere tidak.

Baik ia sama dengan nilai dan tetap. pemalar boleh didapati dari fasa konfigurasi dan nilai tidak. Perbezaan lain adalah seperti namanya anda tidak dapat mengubah nilai pemalar. Nilai pertama yang anda berikan adalah nilai yang disimpannya, jika anda cuba memberikannya nilai yang berbeza kemudiannya akan diabaikan.

Contohnya:

mod.value ("myValue", "Assignment First"); mod.value ("myValue", "Assignment Kedua"); mod.constant ("myConstant", "Assignment First"); mod.constant ("myConstant", "Tugasan Kedua"); mod.controller ("MyController", fungsi (myValue, myConstant) {console.log ("myValue:" + myValue); console.log ("myConstant:" myConstant);}); CONTOO OUTPUT myValue: Penugasan Kedua myConstant: Assignment Pertama

Berikut adalah ringkasan masa untuk menggunakan setiap:

nilai

Anda memberikan nilai literal yang mudah.

mod.value ("myValue", 10);
    

berterusan

Anda perlu dapat mengakses nilai tersebut semasa fasa konfigurasi. (menggunakan .config ())

mod.constant ("myValue", 10); mod.config (function (myValue) {console.log (myValue);});

kilang

Nilai yang anda berikan perlu dikira berdasarkan data lain.

mod.factory ("myFactory", function () {return 10;});
        

perkhidmatan

Anda mengembalikan objek dengan kaedah.

mod.service ("myService", function () {var name = "Bob"; this.setName = function (newName) {this.name = newName;}; this.getName = function () {return this.name;} });
        

pembekal

Anda mahu dapat mengkonfigurasi, semasa fasa konfigurasi, objek yang akan dibuat sebelum ia dibuat.

function.parameter ("greeter", function () {var name; this.setName = function (newName) {name = newName;}; () {console.log ("Hi" + name;};};};} mod.config (function (greeterProvider) {greeterProvider.setName ("John");});
        

Untuk memandu pulang ke rumah kali terakhir di sini adalah imej pembekal dengan kilang, nilai, dan bahagian perkhidmatan yang diserlahkan:


Jawapan 2:

Dalaman AngularJS menggunakan Kilang untuk membuat Objek Perkhidmatan dan menggunakan Penyedia untuk membuat Objek Kilang.

Sebuah kilang tidak,

  1. Buat Objek / instanceConstruct / Inisialisasi objek yang dibuat / instancereturn objek / instance yang dibuat

Untuk menetapkan konteks, anggap Kilang Angular sebagai corak Rekabentuk Kilang Abstrak. AngularJS memberikan anda pilihan untuk membuat objek pilihan anda menggunakan kaedah kilang anda, anda mengembalikan objek yang dibuat untuk aplikasi anda untuk digunakan sebagai perkhidmatan.

Di bawah contoh, anda mempunyai pilihan antara dua gerbang pembayaran, seseorang yang menggunakan kod / pustaka anda, kaedah kilang anda boleh membuat pilihan sama ada untuk membuat objek Paypal atau Stripe. Ini sangat mirip dengan Kilang Abstrak, pengguna pembayaranService tidak menyedari perkhidmatan mana yang digunakan untuk gerbang pembayaran.

var myModule = angular.module ('myModule', []); myModule.constant ("PaymentGatewayName", "Stripe"); // atau "Paypal" myModule.factory ('paymentService', fungsi (PaymentGatewayName) {var paymentService; // anda memutuskan objek yang hendak dibuat berdasarkan keperluan perniagaan // StripeGateway dan PaypalGateway adalah kelas JavaScript // mengandungi pelaksanaan khusus Gateway jika ( PaymentGatewayName == "Stripe") {paymentService = new StripeGateway (); // code custom to initialize gateway strip} else (PaymentGatewayName == "Paypal") {paymentService = new PaypalGateway (); // custom code to initialize paypal} / kod tersuai untuk memulakan pembayaranService return paymentService;});

Kod Servis kelihatan seperti ini, anda melihat kata kunci "ini" ini, maksudnya, objek telah dibuat untuk anda oleh Inti Angular, anda tidak mempunyai kawalan objek yang lebih.

var myModule = angular.module ('myModule', []); myModule.service ('Cache', function () {var localVariable = ""; // tidak boleh diakses di luar this.cacheSize = 5; // 5 MB this.objectsSize = 1000; // max 1000 objects this.put = function (kunci, nilai) {...} this.get = function (get) {return ...}});

Jawapan 3:

Persoalan besar dalam AngularJS: Pemberi Perkhidmatan vs Pembekal v / s. Apa yang perlu saya gunakan?

Terdapat banyak sumber di internet yang membincangkan topik ini. Ternyata soalan ini masih muncul setiap minggu atau lebih pada saluran yang berlainan, dan walaupun selepas membaca sepuluh jawapan atas StackOverflow, itu masih tidak begitu jelas.

Jika anda fikir ia serupa - anda betul. Mereka sangat serupa. Malah, mereka semuanya sama. Mereka semua penyedia.

Baca Artikel Penuh -> AngularJS: Pemberi Perkhidmatan v / s Pembekal v - s - Dapatkan Wawancara Sedia dalam 15 Menit