Angular Service Definition: Service or Factory

Question

I am new to angular, I am creating an application, I am really puzzled, there are several ways to define a service, and I read more on this link: How to define a service , there seems to be no big difference between the ways to define a service.

but I noticed only one difference, which, in my opinion, is different:

see this service i get from here http://jsfiddle.net/2by3X/5/

var app = angular.module('myApp', []); app.service('test', function($timeout, $q) { var self = this; this.getSomething = function() { return self.getData().then(function(data) { return self.compactData(data); }); }; this.getData = function() { var deferred = $q.defer(); $timeout(function() { deferred.resolve("foo"); }, 2000); return deferred.promise; }; this.compactData = function(data) { var deferred = $q.defer(); console.log(data); $timeout(function() { deferred.resolve("bar"); }, 2000); return deferred.promise; }; }); 

if I define this service using "factory" as shown below, one function cannot call other functions of the service.

 app.factory('test', function($timeout, $q) { return { getSomething : function() { return getData().then(function(data) { return compactData(data); }); }, getData : function() { var deferred = $q.defer(); $timeout(function() { deferred.resolve("foo"); }, 2000); return deferred.promise; }, compactData : function(data) { var deferred = $q.defer(); console.log(data); $timeout(function() { deferred.resolve("bar"); }, 2000); return deferred.promise; }, }; }); 

I will take this in the browser console:

 [08:41:13.701] "Error: getData is not defined .getSomething@http ://fiddle.jshell.net/_display/:47 Ctrl1@http ://fiddle.jshell.net/_display/:75 invoke@http ://code.angularjs.org/1.0.0/angular-1.0.0.js:2795 instantiate@http ://code.angularjs.org/1.0.0/angular-1.0.0.js:2805 

Can anyone explain this? thanks.

Answer 1

you have two big problems:

• factory returns an object with the wrong syntax.
• javascript variable scope is functional

That is, you must return an object, for example {key: value, key: value}

values ​​can be functions. however you return {key = value, key = value}

First fix:

 return { getSomething : function() {...}, getData : function... } 

Secondly, the inability to call functions is normal. See jsfiddle . I was mocking everything. You can call one of the functions returned by the service. However, if you try to call getData from getSomething, you will get "undefined":

 app.factory('testSO', function () { return { getSomething: function () { console.log('return getsomething'); getData(); }, getData: function () { console.log('return getData'); }... 

This will be the same as declaring everything as part of the factory function and returning the links in jsfiddle :

 app.factory('testSO', function () { var getSomething = function () { console.log('return getsomething'); }; ... return { getSomething: getSomething, ... } 

and now you can call local functions as shown in the final jsfiddle version :

 app.factory('testSO', function () { var getSomething = function () { console.log('return getsomething'); getData(); }; ... 

There is something important in the original service: var self = this; . Some people use var that = this . This is a workaround for error in ECMA. In the case of the source code, it was used to "host just one object." Functions (properties that are functions) in self need a link to know where the function you want to call is. Try it yourself here http://jsfiddle.net/Z2MVt/7/