Skip to content

Instantly share code, notes, and snippets.

@auser
Created December 2, 2013 01:00
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save auser/7743235 to your computer and use it in GitHub Desktop.
Save auser/7743235 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

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

@frontconnect
Copy link

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

@kshirish
Copy link

kshirish commented Oct 6, 2014

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

@shanemgrey
Copy link

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