Global Functions in AngularJs
Hello everyone, I am going to share the code sample to create the global functions available in every controller.
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" />
<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 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..
|
