Self invoking javascript function on an AngularJS web page

Question

I have this self invoking function for a AngularJS webpage. As you can see, I have this getData() function, whose job is to make an ajax call to get some data as the page loads as well as subsequently as per the users interaction with the page.

<script type="text/javascript">
    // Should I defne it here like this completely outside the self invoking
    // function with or without var keyword
    getData = function (reqData) {
        alert(reqData); // Ajax call here...
    };

    (function () {

        // Should I defne it here like this? 
        getData = function (reqData) {
            alert(reqData); // Ajax call here...
        };

        //Should I have to use the var key word like so 
        var getData = function (reqData) {
            alert(reqData);// Ajax call here...
        };

        PatientCategoryController = function ($http, $scope, uiGridConstants) {

            // Should I defne it here like this inside the controller? 
            getData = function (reqData) {
                alert(reqData);// Ajax call here...
            };

            //Should I have to use the var key word inside the controller?
            var getData = function (reqData) {
                alert(reqData);// Ajax call here...
            };

            // Or should I define the function on the $scope object like so?
            $scope.getData = function (reqData) {
                alert(reqData);// Ajax call here...
            };

            angular.element(document).ready(getData('someDataToPass'));
        }
        PatientCategoryController.$inject = ['$http', '$scope', 'uiGridConstants'];
        angular.module('demoApp', ['ui.grid', 'ui.grid.autoResize', 'ui.grid.pagination']);
        angular.module('demoApp').controller('PatientCategoryController', PatientCategoryController);
    }());
</script>

My question is how should this function be defined? Should this be defined on $scope object? Or should be defined at par with the controller? Or should I define it completely outside the self invoking function?

Also in similar lines where should I define the javascript object which will hold the data that may be required for the ajax call.

I started building this page and at somepoint, javascript began behaving weardly, so I had to start from scratch again. This is the reason I am asking this question. In the past I have read and tried to learn about javascript, but except on browser side, I have not done any serious javascript programming. This app itself is in Asp.Net mvc. So I never feel confident with javascript and keep getting into this trouble. Please guide me.

This appears to be a question presenting a ton of possibilities and asking which one is the best one to use. Therefore, this is an opinionated question, since more than one of these options could potentially be correct. — Claies
– Claies, Commented Oct 27, 2015 at 12:52

Pratswinz · Accepted Answer · 2016-11-08 12:21:34Z

5

If you are expecting this code is written for controller then you can follow this pattern which i commonly use.

(function () {
    'use strict';
    angular
        .module('moduleName')
        .controller('controllerName', controllerName);

    controllerName.$inject = ['$rootScope', '$scope'];

    function controllerName($rootScope, $scope) {
        var vm = this;
        //define your variables here

        activate();//self invoking method

        function activate(){
            //do whatever you want to do here
        }
    }
})();

Hope this helps.

answered Nov 8, 2016 at 12:21

Pratswinz

1,47613 silver badges25 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:07:01Z

3

Something like this should be created as an Angular service and then injected into your app and controllers where needed.

If you want to make it something that's globally available everywhere, this question Angular JS - Make service globally accessible from controllers and view should give you some good guidance.

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Oct 27, 2015 at 12:50

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

1 Comment

VivekDev Over a year ago

Thank You mike for the direction. Since as I said, I am a neophyte in this, I need some time to try and implement. Then I shall do the needful.

Collectives™ on Stack Overflow

Self invoking javascript function on an AngularJS web page

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related