Where do I put regular functions, Angularjs

Question

I'm getting into Angularjs. I'm want to re-use a function, resetForm() function. My question is, do I still put that inside my controller $scope or create a factory or service?

app.controller('testController', [
        '$scope',
        'testService',
        function($scope, testService) {

            $scope.addTestForm = function() {
                var body = document.getElementsByTagName('body')[0];
                if (!body.classList.contains('test__add')) {
                    body.classList.add('test__add');   
                }
            };

            //do I add my function here?
            function name() {};
        }]);

score 0 · Answer 1 · edited May 23 '17 at 11:59

If you want to re-use it across multiple controllers, a Factory or a Service is probably the best way to share it without duplication of code. You can then call on either one of these from all your controllers.

The added benefits to this pattern are that, not only do you save yourself from duplicating code, but you can also store variables and share those as well.

Both will work, but you can read some interesting discussion on Factory vs Service if you have trouble with which one to choose.

score 0 · Accepted Answer · answered Mar 29 '16 at 09:10

if it is a resetForm() function then I assume it is dealing with DOM. I would suggest you to declare this function inside your controller since you will need access to $scope to reset form fields (direct DOM access is strictly prohibited in AngularJS). You can refer to below sample code

app.controller('testController', [
    '$scope',
    'testService',
    function($scope, testService) {

        var resetForm = function() {
            // your logic to reset form with help of $scope
        };

        $scope.addTestForm = function() {
            var body = document.getElementsByTagName('body')[0];
            if (!body.classList.contains('test__add')) {
                body.classList.add('test__add');   
            }
        };

    }]);

Note: You don't need to declare resetForm function as $scope.resetForm if you don't plan to call it from your template file.

score 0 · Answer 3 · answered Mar 29 '16 at 09:14

The things goes like this:

We will write functions in controllers if that function is normally manipulating model and is only relevant to that controller.

We write services normally for giving data to controllers such as from a asynchronous API call, and for sharing data in between controllers.

In your case, if you want a utility function you can use a service, but resetForm function is more like controller specific, because it's gonna clear some model values. In future you may want to add more conditions and operations in that function which may produce complex code, if you use a service for that.

If that function is a 'non-gonna change function' using a service is good way to go. (code re-usability and all), but otherwise, wrap all logic in one place is more good. (write it in controller)

Where do I put regular functions, Angularjs

3 Answers3