angular and plain javascript functions, best practice

Question

Is there any difference (maybe in performance) between this style of adding functions to (angular) scripts, or are they essentially equivalent:

Option 1: function inside controllers

AngularApp.component('component', {
    templateUrl: '/domain/app/component.html'
    , controller: function ($scope,$rootScope,api) {

        $scope.var = false;
        getBackendData();

        //get data about available io_engines from the backend
        function getBackendData() {
            console.log("loading backend data...");            
            api.get().then(
                function (response) {                   
                    console.log("Backend data loaded.");
                })
                .catch(function (err) {
                    console.log("Error getting data from backend");
                    console.log(err);
                });
        }
   }

});

Option 2: function outside the controller

 AngularApp.component('component', {
        templateUrl: '/domain/app/component.html'
        , controller: function ($scope,$rootScope,api) {

            $scope.var = false;
            getBackendData();
       }
    });


    //get data about available io_engines from the backend
    function getBackendData() {
                console.log("loading backend data...");            
                api.get().then(
                    function (response) {                   
                        console.log("Backend data loaded.");
                    })
                    .catch(function (err) {
                        console.log("Error getting data from backend");
                        console.log(err);
                    });
     }

I (think to) understand getBackendData() in the second option becomes a global function, but I am not very clear about implications.

Tomek Sułkowski · Accepted Answer · 2016-11-18 17:45:00Z

2

If you define a function in a component, you will have one function definition per component instance, so in theory it will take more memory.

In the second example, you will only have one function per application.

But such difference is really academic. The bigger issue here is that these kind of functions should be defined in (or as) a service, so they can be:

tested
possibly reused in other places
mocked in the component tests

answered Nov 18, 2016 at 17:45

Tomek Sułkowski

7,2312 gold badges20 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

manzapanza · Accepted Answer · 2016-11-18 17:49:58Z

1

The Option 1 is better because you are not polluting the global scope. Let say that is not a good practice. I suggest you to follow a style guide like this by Todd Motto:

https://github.com/toddmotto/angular-styleguide/tree/angular-old-es5

answered Nov 18, 2016 at 17:49

manzapanza

6,2914 gold badges43 silver badges51 bronze badges

Collectives™ on Stack Overflow

angular and plain javascript functions, best practice

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related