Can I make a function available in every controller in AngularJs?

Can I make a function available in every controller in AngularJs?

Global Functions in AngularJs

Hello everyone, I am going to share the code sample to create the global functions available in every controller.

Here in AngularJs, have two options for creating global functions. i.e.

1. Define a service for global function.
2. Using  run method for root scope.

Here, I am going to use the  $rootScope and app.run() on initialization in AngularJs as given below example.

The live demo link   http://embed.plnkr.co/lQfOiX/preview

//This is global functions for every controller.
app.run(function ($rootScope) {
    $rootScope.myGlobalFunction = function () {
     };
});

The AngularJs code-sample

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

//This is global functions for every controller.
app.run(function ($rootScope, $window) {
    $rootScope.myGlobalFunction = function () {
        //TODO : your custom code here.
        $window.alert('I am global function. :)');
        console.log("I am global function. :)");
    };
});

//This is controller for accessing to global functions.
app.controller('MainCtrl', function ($scope) {
    //TODO: your controller code here.
});

The HTML code-sample

<div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-init="myGlobalFunction()">
        <button ng-click="myGlobalFunction()">Click and call global function</button>
    </div>
</div>

The Live demo code (HTML + AngularJs) as given below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Global Functions in AngularJs</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);

        //This is global functions for every controller.
        app.run(function ($rootScope, $window) {
            $rootScope.myGlobalFunction = function () {
                //TODO : your custom code here.
                $window.alert('I am global function. :)');
                console.log("I am global function. :)");
            };
        });

        //This is controller for accessing to global functions.
        app.controller('MainCtrl', function ($scope) {
            //TODO: your controller code here.
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="MainCtrl">
    <p class="txt">Global Functions in AngularJs</p>
    <div ng-init="myGlobalFunction()">
        <p>
            <a href="http://code-sample.com/">Click for know about me. :)</a>
        </p>
        <button class="btn" ng-click="myGlobalFunction()">Click and call global function</button>
    </div>
</body>
</html>

The output : go to link  http://embed.plnkr.co/lQfOiX/preview

The output look like below image.




ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.