-
-
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.