AngularJS: Apa itu pabrik?


101

Saya telah melakukan banyak pekerjaan Angular.js dan secara keseluruhan menurut saya ini merupakan kerangka kerja yang menarik dan kuat.

Saya tahu ada banyak diskusi tentang Layanan vs. Pabrik vs. Penyedia vs. Nilai, tetapi saya masih cukup bingung tentang apa Factoryitu.

Pabrik telah ditentukan dalam diskusi StackOverflow lainnya sebagai berikut:

Pabrik

Sintaks: module.factory( 'factoryName', function );Hasil: Saat mendeklarasikan factoryName sebagai argumen yang dapat dimasukkan, Anda akan diberikan nilai yang dikembalikan dengan menjalankan referensi fungsi yang diteruskan ke module.factory.

Menurut saya penjelasan ini sangat sulit untuk dipahami dan tidak menambah pemahaman saya tentang apa itu pabrik.

Adakah yang punya penjelasan atau contoh kehidupan nyata untuk dibagikan tentang apa itu sebenarnya Factorydan mengapa Anda harus menggunakannya sebagai pengganti Service,Provider atau lainnya?

Memperbarui

A service menyimpan referensi ke objek apa pun .

A factory adalah fungsi yang mengembalikan objek apa pun

A provider adalah fungsi yang mengembalikan fungsi apa pun

- Fiuh -


6
Saya tidak akan mengatakan ini adalah duplikat dari pertanyaan itu, melainkan saya membaca pertanyaan itu sebelum menanyakan pertanyaan ini karena jawabannya Factories(dikutip di atas) agak membingungkan. Beberapa jawaban di bawah ini direduksi Factoriesmenjadi sesuatu yang bahkan saya dapat mengerti
Code Whisperer

1
Pertanyaan ini memiliki lebih banyak suara positif daripada yang "diduplikasi", mungkin harus sebaliknya?
Code Whisperer

3
Tautan ini menjelaskannya dengan baik.
Ahmed

Jawaban:


70

Dari apa yang saya pahami, semuanya hampir sama. Perbedaan utama adalah kompleksitasnya. Penyedia dapat dikonfigurasi pada waktu proses, pabrik sedikit lebih tangguh, dan layanan adalah bentuk yang paling sederhana.

Lihat pertanyaan ini AngularJS: Layanan vs penyedia vs pabrik

Juga inti ini dapat membantu dalam memahami perbedaan halus.

Sumber: https://groups.google.com/forum/#!topic/angular/hVrkvaHGOfc

jsFiddle: http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/

penulis: Pawel Kozlowski

var myApp = angular.module('myApp', []);

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
        }
    };
});

//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {
    // In the provider function, you cannot inject any
    // service or factory. This can only be done at the
    // "$get" method.

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!";
            }
        };
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});


function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {

    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}​

Jadi salah satu cara untuk melihat mereka, apakah itu dalam urutan kompleksitasnya Provider > Factory > Service > Value?
Code Whisperer

2
Salah satu cara untuk melihatnya, cara lain adalah dengan menganggap Pabrik dan Layanan sebagai abstraksi Penyedia. Seseorang mengoreksi saya jika saya salah tetapi Pabrik dan Penyedia menggunakan Layanan di bawah tenda. Itulah mengapa sediakan adalah versi "Paling dekat dengan logam". Saya percaya Nilai adalah cara untuk menentukan konstanta yang kemudian dapat digunakan aplikasi secara luas.
Jonathan Palumbo

18

Satu perbedaan utama yang saya lihat adalah Anda dapat menjalankan kode kustom di pabrik. Namun, dalam layanan, hanya pembuatan objek yang terjadi.

myJs.factory('Factory', function() {

    //Write custom code here

    return {
            Hello: function() {
            return "Hello, World!"
        }
    };
});

1
Anda juga dapat menjalankan kode kustom dalam fungsi konstruktor layanan, bukan? tidak ada yang mengatakan di dalam fungsi konstruktor, Anda tidak dapat menjalankan kode lain
nonopolarity

9

Dua sen saya tentang topik ini. Saya sangat pemula dan baru memahami Angular JS dan ini adalah salah satu hal yang sangat membingungkan saya dan karenanya saya mempelajarinya dengan agak detail. Saya telah membuat catatan untuk wawancara dan ini mungkin berguna untuk orang lain.

  • layanan dan pabrik melakukan hal yang sama dengan cara yang berbeda
  • keduanya adalah injeksi
  • untuk kebanyakan hal, gunakan sintaks pabrik
  • lebih mudah dimengerti
  • saat ini dengan es6 "layanan" dilakukan karena mengkonversi ke kelas es6 lebih baik
  • yang pada dasarnya memisahkan logika bisnis dari pengontrol
  • jika Anda menggunakan logika biz dengan pengontrol maka Anda hanya dapat menggunakan dengan pengontrol
  • controller untuk meletakkan data pada ruang lingkup tidak memproses logika bisnis yang panjang
  • jadi apa yang terjadi dalam skenario di atas adalah logika bisnis yang kompleks diikat ke dalam pengontrol. Bukan untuk mengolah data. Jadi letakkan sedikit demi sedikit ke dalam layanan atau pabrik. Jadi kode Anda ramping dan modular.
  • layanan lajang

0

Layanan sebagian besar adalah objek di mana Anda menggambarkan kelas konstruktor dari objek tersebut. Di suatu tempat jauh di dalam kerangka kerja, fungsi Object.create () dipanggil dan kemudian Anda bisa menggunakan layanan dengan memanggil objek dan metodenya menggunakan pengontrol. Pabrik, di sisi lain, tidak membuat objek secara default dan karenanya mengharuskan Anda untuk mengembalikan seluruh lokasi objek setelah Anda selesai menentukan semua atribut dan metode.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.