CODEWITHSUNDEEP
javascriptangularjs
GWorking
GWorking

Reputation: 4341

Angularjs, why this service is executed automatically?

The following code is expected to trigger the 'ei' alert only after the user makes the click, but it is not the case. The alert appears at the begining. Why? And how to solve it? I'm not following the logic here (remarking my newcomer status)

Check it at http://jsfiddle.net/yDhv8/4/

html

<div ng-controller='StartAnalysis' ng-click="Process()">
{{status}} CLICK HERE TO START PROCESSING
</div>

js

var app = angular.module('myApp', []);

angular.module('myApp').controller('StartAnalysis', 
['$scope', 'Erase_added_panels', function ($scope, Erase_added_panels) {

$scope.status = 'waiting files ...';

$scope.Process = function() {
    alert('mm')
    Erase_added_panels;
    $scope.status = 'starting process ...';
    return false;
}
}]);

angular.module('myApp').factory('Erase_added_panels', function() {
    alert('ei')
    return true;
});

Cheers,

Upvotes: 0

Views: 1349

Answers (2)

axelduch
axelduch

Reputation: 10849

You are declaring a factory, so this is a singleton that is executed:

angular.module('myApp').factory('Erase_added_panels', function() {
    alert('ei')
    return true;
});

If you want to trigger the alert later just return an object with a method doing what you need it to do:

angular.module('myApp').factory('Erase_added_panels', function() {
    return {
        foo: function () {
            alert('ei')
            return true;
        }
    };
});

And to call it

angular.module('myApp')
.controller('BarController', ['Erase_added_panels', function (Erase_added_panels) {
    Erase_added_panels.foo();
}]);

NOTE:

Angular specifies that a service is executed as soon as you require it somewhere in your application, here, it means the simple fact of adding it as a dependency makes it executed.

Angular says (as stated here):

All services in Angular are instantiated lazily. This means that a service will be created only when it is needed for instantiation of a service or an application component that depends on it. In other words, Angular won't instantiate services unless they are requested directly or indirectly by the application.

Upvotes: 8

Yoeri
Yoeri

Reputation: 2249

The function you provide to the factory method gets executed once when your application loads (services are singletons).

so this code:

alert('ei')
    return true;

gets executed during initialisation in order create your service. So from this function, you should return an object to work with in your controller:

If you want to alert something from within a service, you should return an object:

angular.module('myApp').factory('Erase_added_panels', function() {  
    return {
     alertUser : function(){
         alert('hey!');        
     };
});

Then from your controller, you can use the object you just returned to call its methods:

angular.module('myApp').controller('StartAnalysis', 
['$scope', 'Erase_added_panels', function ($scope, Erase_added_panels) {

    $scope.status = 'waiting files ...';

    $scope.Process = function() {
        Erase_added_panels.alertUser();
    }
}]);

please read the documentation as well: http://docs.angularjs.org/guide/dev_guide.services.creating_services

Upvotes: 1

Related Questions