CODEWITHSUNDEEP
javascriptangularjs
VivekDev
VivekDev

Reputation: 25507

Self invoking javascript function on an AngularJS web page

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.

Upvotes: 4

Views: 1279

Answers (2)

Pratswinz
Pratswinz

Reputation: 1476

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.

Upvotes: 5

Mike Feltman
Mike Feltman

Reputation: 5176

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.

Upvotes: 3

Related Questions