Best practice factory angular.js 1.2

Question

I'm want to create service with $http with angular.js as is shown in this plunk

But when I try to do it in angular 1.2 I can not have more than one function into the factory as is done here

Works in angular 1.0.2

app.factory('myService', function($http, $q) {
   return {
     getFoo: function() {
       var deferred = $q.defer();
       $http.get('foo.json').success(function(data) {
          deferred.resolve(data);
       }).error(function(){
          deferred.reject();
       });
       return deferred.promise;
     },
     getBar: function(callback) {
       $http.get('foo.json').success(callback);
     },
     testHttpGetResult: function (){
       return $http.get('foo.json');
     }
   }
});

How should I do it in angular 1.2? must I use a different approach(not a factory)?

Thanks in advance.

Edited

It Works, because have only a function(getFoo)

app.factory('myService', function($http, $q) {
   return {
     getFoo: function() {
       var deferred = $q.defer();
       $http.get('foo.json').success(function(data) {
          deferred.resolve(data);
       }).error(function(){
          deferred.reject();
       });
       return deferred.promise;
     }
});

Answer 1

As of Angular 1.2, promise unwrapping is optional , and it will be disabled entirely in future versions of Angular.

In other words, your clean version as of 1.2 requires an opt-in and won't work at all in the future.

Answer 2

I would guess that if you look at the code you have defined "getFoo" as follows:

getFoo: function() {
    // ... code here ...
    return deferred.promise;
},

When you call this routine you use the following code:

// "foo" represents a PROMISE, not the actual json value!
$scope.foo = myService.getFoo();

The routine isn't returning the value you expect though - rather it is returning a promise which is why the scope doesn't have what you expect. You need to use a ".then" syntax to actually get the data result from your routine. For some reason it seems that older versions of angular might have been doing this for you (possibly)?

Anyways, the issue isn't whether or not you can define multiple routines (you can), but how you call those routines.

Edit

In case I didn't make it clear enough the calling method marked "the clean way" shouldn't (and doesn't work). You should use the following instead:

// The clean way - FIXED
myService.getFoo().then(function (data){
   $scope.foo = data;
});

Good luck!

Answer 3

I know this is an old post but I found this article that helped me a lot. Hope this will help others. It fallows drew_w's Answers.

http://blog.brunoscopelliti.com/angularjs-promise-or-dealing-with-asynchronous-requests-in-angularjs

and this one is even better: show route only after all promises are resolved http://blog.brunoscopelliti.com/show-route-only-after-all-promises-are-resolved