Instantly share code, notes, and snippets.

Embed
What would you like to do?
Day1 gist
angular.module('myApp.services', [])
.factory('UserFactory', function($http, $q) {
var service = {
// our factory definition
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) {
service.user['email'] = newEmail;
}
};
return service;
})
.service('UserService', function() {
var self = this; // Save reference
this.user = {};
this.backendUrl = "http://localhost:3000";
this.setName = function(newName) {
self.user['name'] = newName;
}
this.setEmail = function(newEmail) {
self.user['email'] = newEmail;
}
this.save = function() {
return $http.post(self.backendUrl + '/users', {
user: self.user
});
}
})
.provider('User', function() {
this.backendUrl = "http://localhost:3000";
this.setBackendUrl = function(newUrl) {
if (newUrl) this.backendUrl = newUrl;
}
// injectables go here
this.$get = function($http) {
var self = this;
var service = {
user: {},
setName: function(newName) {
service.user['name'] = newName;
},
setEmail: function(newEmail) {
service.user['email'] = newEmail;
},
save: function() {
return $http.post(self.backendUrl+'/users',
{
user: service.user
});
}
}
return service;
}
});
angular.module('myApp', ['myApp.services'])
.config(function(UserProvider) {
UserProvider
.setBackendUrl('http://localhost:9000');
})
.controller('PageCtrl',
function($scope, User) {
$scope.user = "hi";
});
@zyonet

This comment has been minimized.

Show comment
Hide comment
@zyonet

zyonet Dec 10, 2013

here is my take:

  1. factory: poor man's one-size-fit-all singleton: it returns an object created inside the factory code
  2. service: one-of-a kind singleton: it returns a constructor function, from which a singleton will be created by angularjs. if you know COM, it is very similar: for a "type", a real factory "object" in the form of a javascript function is returned, and the framework call this "factory instance" to create the requested instance of a type/class.
    3.provider: customizable singleton: instead of just return a plain old constructor function, it defines a $get function in the provider function, which returns an object, just like the case of factory. in this case, the final singleton object creation is more refined.

In summary:

factory: give me your POJO object, and I am happy.
service: give me your Contructor function, and angularjs will just new MyService()
provider: give me your provider function, and angularjs will new MyProvide(), and then call $get() on it and then inject the $get() returned object into user code.

zyonet commented Dec 10, 2013

here is my take:

  1. factory: poor man's one-size-fit-all singleton: it returns an object created inside the factory code
  2. service: one-of-a kind singleton: it returns a constructor function, from which a singleton will be created by angularjs. if you know COM, it is very similar: for a "type", a real factory "object" in the form of a javascript function is returned, and the framework call this "factory instance" to create the requested instance of a type/class.
    3.provider: customizable singleton: instead of just return a plain old constructor function, it defines a $get function in the provider function, which returns an object, just like the case of factory. in this case, the final singleton object creation is more refined.

In summary:

factory: give me your POJO object, and I am happy.
service: give me your Contructor function, and angularjs will just new MyService()
provider: give me your provider function, and angularjs will new MyProvide(), and then call $get() on it and then inject the $get() returned object into user code.

@vko-online

This comment has been minimized.

Show comment
Hide comment
@vko-online

vko-online Jun 24, 2014

And can we mix them together? use factory + provider in service and other scenarios?

vko-online commented Jun 24, 2014

And can we mix them together? use factory + provider in service and other scenarios?

@ankakusu

This comment has been minimized.

Show comment
Hide comment
@ankakusu

ankakusu Jul 18, 2014

Just read the 1st day of ng-cookbook. I found it useful to understand factory, service and provider contepts of AngularJS

ankakusu commented Jul 18, 2014

Just read the 1st day of ng-cookbook. I found it useful to understand factory, service and provider contepts of AngularJS

@kshirish

This comment has been minimized.

Show comment
Hide comment
@kshirish

kshirish Oct 6, 2014

You didn't mention the module dependency in the PDF ( line 58 )

kshirish commented Oct 6, 2014

You didn't mention the module dependency in the PDF ( line 58 )

@shanemgrey

This comment has been minimized.

Show comment
Hide comment
@shanemgrey

shanemgrey Sep 22, 2015

Not a huge deal, and maybe not worth the time to fix, but it's probably a pretty well trafficked page, and I personally learned a lot from it.

Line 34 is still showing wrong on the article that links to this.

http://www.ng-newsletter.com/advent2013/#!/day/1

It shows:

if (Url) this.backendUrl = newUrl;

but should be as in this snippet:

if (newUrl) this.backendUrl = newUrl;

And if you're in there fixing stuff, the wrong "two" is used in this sentence. ;-)

Unlike the previous to methods, we'll set the injectables in a defined this.$get() function definition.

shanemgrey commented Sep 22, 2015

Not a huge deal, and maybe not worth the time to fix, but it's probably a pretty well trafficked page, and I personally learned a lot from it.

Line 34 is still showing wrong on the article that links to this.

http://www.ng-newsletter.com/advent2013/#!/day/1

It shows:

if (Url) this.backendUrl = newUrl;

but should be as in this snippet:

if (newUrl) this.backendUrl = newUrl;

And if you're in there fixing stuff, the wrong "two" is used in this sentence. ;-)

Unlike the previous to methods, we'll set the injectables in a defined this.$get() function definition.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment