javascript - AngularJS : Factory and Service? -
this question has answer here:
- angularjs: service vs provider vs factory 29 answers
edit jan 2016: since still gets attention. since asking i've completed few angularjs projects, , used factory, built object , returned object @ end. statements below still true, however.
edit : think understand main difference between two, , have code example demonstrate. think question different proposed duplicate. duplicate says service not instantiable, if set demonstrated below, is. service can set same factory. provide code shows factory fails on service, no other answer seems do.
if set vaderservice (ie service):
var module = angular.module('myapp.services', []); module.service('vaderservice', function() { this.speak = function (name) { return 'join dark side ' + name; } }); then in controller can this:
module.controller('starwarscontroller', function($scope, vaderservice) { $scope.luke = vaderservice.speak('luke'); }); with service, vaderservice injected in controller instantiated, can call vaderservice.speak, however, if change vaderservice module.factory, the code in controller no longer work, , main difference. factory, vaderservice injected in controller not instantiated, why need return object when setting factory (see example in question).
however, can set service in exact same way can set factory (ie have return object) , the service behaves exact same factory
given information, see no reason use factory on service, service can factory can , more.
original question below.
i know has been asked loads of times, cannot see functional difference between factories , services. had read tutorial: http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
and seems give reasonably explanation, however, set app follows:
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 dark side ' + this.name; } } return vaderclass; }); then when load index.html see "join dark side luke", great. expected. if change vaderservice.js (note module.service instead of module.factory):
var module = angular.module('myapp.services', []); module.service('vaderservice', function() { var vaderclass = function(padawan) { this.name = padawan; this.speak = function () { return 'join dark side ' + this.name; } } return vaderclass; }); then reload index.html (i made sure emptied cache , did hard reload). works exactly same did module.factory. real functional difference between two??
service vs factory
the difference between factory , service difference between function , object
factory provider
gives function's return value ie. create object, add properties it, return same object.when pass service controller, properties on object available in controller through factory. (hypothetical scenario)
singleton , created once
reusable components
factory great way communicating between controllers sharing data.
can use other dependencies
usually used when service instance requires complex creation logic
cannot injected in
.config()function.used non configurable services
if you're using object, use factory provider.
syntax:
module.factory('factoryname', function);
service provider
gives instance of function (object)- instantiated ‘new’ keyword , you’ll add properties ‘this’ , service return ‘this’.when pass service controller, properties on ‘this’ available on controller through service. (hypothetical scenario)
singleton , created once
reusable components
services used communication between controllers share data
you can add properties , functions service object using the
thiskeyworddependencies injected constructor arguments
used simple creation logic
cannot injected in
.config()function.if you're using class use service provider
syntax:
module.service(‘servicename’, function);
in below example have define myservice , myfactory. note how in .service have created service methods using this.methodname. in .factory have created factory object , assigned methods it.
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; }); also take @ beautiful stuffs
Comments
Post a Comment