javascript - AngularJS: Fabrika ve Servis?

Ocak 2016 GÜNCELLEME: Bu hâlâ ilgi gördüğü için. Bunu sorduktan sonra birkaç AngularJS projesi tamamladım ve bunlar için çoğunlukla factory kullandım, bir nesne oluşturdum ve sonunda nesneyi döndürdüm. Aşağıdaki ifadelerim hâlâ geçerlidir.

DÜZENLEME : Sanırım sonunda ikisi arasındaki temel farkı anladım ve bunu göstermek için bir kod örneğim var. Ayrıca bu sorunun önerilen çoğaltmadan farklı olduğunu düşünüyorum. Çoğaltmada servis örneğinin yaratılabilir olmadığı belirtiliyor, ancak aşağıda gösterdiğim şekilde ayarlarsanız, aslında yaratılabilir. Bir servis, bir fabrika ile tamamen aynı şekilde ayarlanabilir. Ayrıca fabrikanın servise göre neden başarısız olduğunu gösteren kod da sağlayacağım, ki başka hiçbir cevap bunu yapmıyor gibi görünüyor.

VaderService'i şöyle kurarsam (yani bir servis olarak):

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

module.service('VaderService', function() {
    this.speak = function (name) {
        return 'Join the dark side ' + name;
    }
});

Sonra denetleyicide bunu yapabilirim:

module.controller('StarWarsController', function($scope, VaderService) {
    $scope.luke = VaderService.speak('luke');   
});

Servis ile, kontrolöre enjekte edilen VaderService örneklenir, bu yüzden sadece VaderService.speak'i çağırabilirim, ancak VaderService'i module.factory olarak değiştirirsem, kontrolördeki kod artık çalışmaz ve bu ana farktır. Factory ile, kontrolöre enjekte edilen VaderService örneklenmez, bu nedenle bir factory kurarken bir nesne döndürmeniz gerekir (soru içindeki örneğime bakın).

Ancak, bir servisi bir fabrikayı kurabileceğiniz şekilde tam olarak aynı şekilde kurabilirsiniz (yani bir nesne döndürmesini sağlayabilirsiniz) ve servis, bir fabrika ile tamamen aynı şekilde davranır

Bu bilgilere dayanarak, servis yerine fabrika kullanmak için hiçbir neden görmüyorum, servis fabrikanın yapabildiği her şeyi ve daha fazlasını yapabilir.

Orijinal soru aşağıdadır.

Bunun defalarca sorulduğunu biliyorum, ama gerçekten fabrikalar ile servisler arasında işlevsel bir fark göremiyorum. Bu eğitimi okumuştum: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider

Ve makul derecede iyi bir açıklama sunuyor gibi görünüyor, ancak uygulamamı şu şekilde kurdum:

index.html

<!DOCTYPE html>
<html>
    <head>
    <title>My App</title>
    <script src="lib/angular/angular.js"></script>
    <script type="text/javascript" src="js/controllers.js"></script>
    <script type="text/javascript" src="js/VaderService.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    </head>

    <body ng-app="MyApp"> 
        <table ng-controller="StarWarsController">
            <tbody>
            <tr><td>{{luke}}</td></tr>
            </tbody>
        </table>
    </body>
</html>

app.js:

angular.module('MyApp', [
  'MyApp.services',
  'MyApp.controllers'
]);

controllers.js:

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

module.controller('StarWarsController', function($scope, VaderService) {
    var luke = new VaderService('luke');
    $scope.luke = luke.speak();
});

VaderService.js

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

module.factory('VaderService', function() {
    var VaderClass = function(padawan) {
        this.name = padawan;
        this.speak = function () {
            return 'Join the dark side ' + this.name;
        }
    }

    return VaderClass;
});

Sonra index.html dosyasını yüklediğimde "Join the dark side luke" yazısını görüyorum, harika. Tam olarak beklendiği gibi. Ancak VaderService.js dosyasını şuna değiştirirsem (module.factory yerine module.service dikkate alın):

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

module.service('VaderService', function() {
    var VaderClass = function(padawan) {
        this.name = padawan;
        this.speak = function () {
            return 'Join the dark side ' + this.name;
        }
    }

    return VaderClass;
});

Sonra index.html dosyasını tekrar yükleyin (önbelleği boşalttığımdan ve zorla yeniden yükleme yaptığımdan emin oldum). Modul.factory ile yaptığımda olduğu gibi tam olarak aynı şekilde çalışıyor. Peki ikisi arasındaki gerçek işlevsel fark nedir??

Cevap #1

Servis vs Fabrika

Fabrika ile hizmet arasındaki fark, bir fonksiyon ile bir nesne arasındaki farka benzer.

Fabrika Sağlayıcısı

  • Bize fonksiyonun dönüş değerini verir, yani yalnızca bir nesne oluşturursunuz, ona özellikler eklersiniz ve sonra o aynı nesneyi döndürürsünüz. Bu servisi kontrolcünüze geçirdiğinizde, nesnedeki bu özellikler artık o kontrolcüde fabrikası aracılığıyla kullanılabilir hale gelir. (Varsayımsal Senaryo)

  • Singleton ve yalnızca bir kez oluşturulacak

  • Yeniden kullanılabilir bileşenler

  • Fabrikalar, veri paylaşımı gibi kontroller arasında iletişim kurmanın harika bir yoludur.

  • Diğer bağımlılıkları kullanabilir

  • Genellikle servis örneğinin karmaşık oluşturma mantığı gerektirdiğinde kullanılır

  • .config() fonksiyonuna enjekte edilemez.

  • Yapılandırılamayan hizmetler için kullanılır

  • Eğer bir nesne kullanıyorsanız, fabrika sağlayıcısını kullanabilirsiniz.

  • Sözdizimi: module.factory('factoryName', function);

Hizmet Sağlayıcı

  • Bize bir fonksiyonun (nesnenin) örneğini verir - 'new' anahtar kelimesi ile yeni bir örnek oluşturursunuz ve 'this'e özellikler ekleyeceksiniz ve servis 'this'i döndürecektir. Servisi denetleyicinize (controller) geçirdiğinizde, bu özellikler artık servisin aracılığıyla o denetleyicide kullanılabilir olacaktır. (Hipotetik Senaryo)

  • Singleton ve yalnızca bir kez oluşturulacak

  • Yeniden kullanılabilir bileşenler

  • Hizmetler, verileri paylaşmak için denetleyiciler arasında iletişim için kullanılır

  • Bir servis nesnesine özellikler ve fonksiyonlar eklemek için this anahtar kelimesini kullanabilirsiniz

  • Bağımlılıklar yapıcı argümanlar olarak enjekte edilir

  • Basit oluşturma mantığı için kullanılır

  • .config() fonksiyonuna enjekte edilemez.

  • Bir sınıf kullanıyorsanız servis sağlayıcıyı kullanabilirsiniz

  • Sözdizimi: module.service('serviceName', function);

Örnek Demo

Aşağıdaki örnekte MyService ve MyFactory tanımladım. .service içinde servis metodlarını this.methodname kullanarak nasıl oluşturduğuma dikkat edin. .factory içinde bir fabrika nesnesi oluşturdum ve metodları ona atadım.

AngularJS .service

module.service('MyService', function() {

    this.method1 = function() {
            //..method1 logic
        }

    this.method2 = function() {
            //..method2 logic
        }
});

AngularJS .factory

module.factory('MyFactory', function() {

    var factory = {}; 

    factory.method1 = function() {
            //..method1 logic
        }

    factory.method2 = function() {
            //..method2 logic
        }

    return factory;
});

Ayrıca bu güzel şeylere bir göz atın

Hizmet ile fabrika arasında kafam karıştı

AngularJS Fabrikası, Servisi ve Sağlayıcısı

Angular.js: servis vs sağlayıcı vs fabrika?

Cevap #2

Factory ve Service, sadece bir provider sarmalayıcısıdır.

Fabrika

Factory, class(constructor function), class örneği, string, number veya boolean olabilecek herhangi bir şeyi döndürebilir. Eğer bir constructor fonksiyonu döndürürseniz, bunu kontrolcünüzde örnekleyebilirsiniz.

 myApp.factory('myFactory', function () {

  // any logic here..

  // Return any thing. Here it is object
  return {
    name: 'Joe'
  }
}

Hizmet

Servisin herhangi bir şey döndürmesine gerek yok. Ancak her şeyi this değişkenine atamanız gerekiyor. Çünkü servis varsayılan olarak bir örnek oluşturacak ve bunu temel nesne olarak kullanacak.

myApp.service('myService', function () {

  // any logic here..

  this.name = 'Joe';
}

Servisin arkasındaki gerçek angularjs kodu

function service(name, constructor) {
    return factory(name, ['$injector', function($injector) {
        return $injector.instantiate(constructor);
    }]);
}

Bu sadece factory etrafında bir sarmalayıcıdır. Eğer service'den bir şey döndürürseniz, o zaman Factory gibi davranacaktır.

ÖNEMLİ: Factory ve Service'den dönen sonuç önbelleğe alınacak ve tüm controller'lar için aynı sonuç döndürülecektir.

Onları ne zaman kullanmalıyım?

Factory çoğu durumda tercih edilir. Farklı kontrolcülerde örneklenmesi gereken constructor fonksiyonunuz olduğunda kullanılabilir.

Service, bir tür Singleton Nesnedir. Servisten dönen nesne, tüm kontrolcüler için aynı olacaktır. Tüm uygulama için tek bir nesneye sahip olmak istediğinizde kullanılabilir. Örnek: Kimliği doğrulanmış kullanıcı detayları.

Daha fazla bilgi için okuyun

http://iffycan.blogspot.in/2013/05/angular-service-or-factory.html

http://viralpatel.net/blogs/angularjs-servis-fabrika-dersi/

İlgili makaleler