-
-
Save auser/7743235 to your computer and use it in GitHub Desktop.
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"; | |
}); |
And can we mix them together? use factory + provider in service and other scenarios?
Just read the 1st day of ng-cookbook. I found it useful to understand factory, service and provider contepts of AngularJS
You didn't mention the module dependency in the PDF ( line 58 )
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.
here is my take:
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.