Moving logic to a service in Angular

Question

I've ended up with a lot of logic in my controller which I realise is not good. Therefore I would like to move this to a service.

At the moment the controller accepts a url which will either be from YouTube or Vimeo. It detects whether the string "youtube" or "vimeo" is present in the url and then does what it needs to do accordingly. Here's part of the "logic" that currently resides in the controller:

if url.indexOf("youtube") > -1 {
  variable_1 = "Something";
  variable_2 = "Something";
  //do some more stuff
}
else {
  variable_1 = "Something";
  variable_2 = "Something";
  //do some more stuff
}

$scope.task.items.push("I need to add things to this array too");

A Service is the way to go but my first question is a service or a factory?

This is what I'm working on but I'm not sure how I would pass the variables that exist in the controller (variable_1 and variable_2) back to the controller when the service has completed.

myApp.service('urlService', function() {
    this.detectProvider = function() {

        if url.indexOf("youtube") > -1 {

        }
        else {

        }

        //how can I push things to the $scope array here?


    };
});

IMO a service and factory are just variations of the same thing. It's a matter of what syntax you want to use. As far as pushing things back, just return something like `return {'var1': variable_1, 'var2': variable_2}`. Then $scope.bla = urlService.var1; - I forget the syntax, but that's the idea. — rGil, Jun 02 '14 at 15:35
Also, check this post: http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory — rGil, Jun 02 '14 at 15:37

score 1 · Accepted Answer · answered Jun 02 '14 at 15:34

In your service

myApp.service('urlService', function() {
this.detectProvider = function(url) {
    arrayOfMyVars = new Array();
    if url.indexOf("youtube") > -1 {
        arrayOfMyVars.push("Something");
        arrayOfMyVars.push("SomethingElse");
    }
    else {
        arrayOfMyVars.push("Something");
        arrayOfMyVars.push("SomethingElse");
    }

    //how can I push things to the $scope array here?

return arrayOfMyVars;
};
});

in your controller

var res = urlService.detectProvider(url);
variable_1=res[0];
variable_2=res[1];
$scope.task.items.push('the thing you need to push'); // maybe res[2] and in your service you had another arrayOfMyVars.push('the thing you need to push')...

Don't forget to import your service into your controller ;)

Torsten Engelbrecht · Answer 2 · 2014-06-02T15:53:35.003

A Service is the way to go but my first question is a service or a factory?

Simply speaking it does not matter. From personal point of view just use what suits you best. A service will create a new instance of the function, a factory will simply execute the function and do not create a new instance of it.

About your second question: Simply return variable_1 and variable_2 in your services method and assign them to your $scope.

myApp.service('urlService', function() {
    this.detectProvider = function(url) {

        if url.indexOf("youtube") > -1 {
             ...
             return [variable_1, variable_2];
        }
        else {
             ...
             return [variable_1, variable_2];
        } 
    };
});

url need to be pass from the controller to the service ) – BastienSander Jun 02 '14 at 15:42 — BastienSander, Jun 02 '14 at 15:42

score 0 · Answer 3 · answered Jun 02 '14 at 15:45

0

Service or Factory both are singleton instances. At the end u will get object only. In service you will create using functtion constructor In Factory we can construct it using object literrals

answered Jun 02 '14 at 15:45

Vamsi

156
1
8

Moving logic to a service in Angular

3 Answers3