The $window service refers to the browser window object. It is globally available in JavaScript, so it causes testability problems. In AngularJS, it is not globally available. It includes various methods like alert box, prompt box, confirms box, etc.
Now let us see the actual implementation of the $window service in Angular JS:
- $window.alert() Method: This method is used to display the alert message on the window screen.
Example 1: This example describes the basic usage of the $window service in AngularJS by displaying the alert message.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$window service</title>
<script src=
</script>
</head>
<body ng-app="windowService">
<h2>Click on button to see the alert box</h2>
<div ng-controller="windowServiceController">
<button ng-click="alertBox()">
Show Alert Box
</button>
</div>
<script>
var app = angular.module('windowService', []);
app.controller('windowServiceController',
['$scope', '$window',
function ($scope, $window) {
$scope.message = "This is Alert Box";
$scope.alertBox = function () {
$window.alert($scope.message);
}
}]);
</script>
</body>
</html>
|
Output:
- $window.prompt() Method: This method is used to display the prompt message on the screen.
Example 2: This example describes the basic usage of the $window service in AngularJS by specifying the message in the prompt.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$window service</title>
<script src=
</script>
</head>
<body ng-app="windowService">
<h2>Click on button to see the Prompt box</h2>
<div ng-controller="windowServiceController">
<button ng-click="promptBox()">
Show Prompt Box
</button>
<p>{{fullname}}</p>
</div>
<script>
var app = angular.module('windowService', []);
app.controller('windowServiceController',
['$scope', '$window',
function ($scope, $window) {
$scope.promptBox = function () {
var name = $window.prompt('Enter Your Name');
$scope.fullname = 'Hello ' + name;
}
}]);
</script>
</body>
</html>
|
Output:
- $window.confirm() Method: This method is used to display a confirmation box on the screen.
Example 3: This example describes the basic usage of the $window service in AngularJS by displaying the pop-up message for confirmation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>$window service</title>
<script src=
</script>
</head>
<body ng-app="windowService">
<h2>Click on button to see the Confirm box</h2>
<div ng-controller="windowServiceController">
<button ng-click="confirmBox()">
Show Confirm Box
</button>
<p>{{confirmMessage}}</p>
</div>
<script>
var app = angular.module('windowService', []);
app.controller('windowServiceController',
['$scope', '$window',
function ($scope, $window) {
$scope.confirmBox = function () {
var choice = $window.confirm("Are you sure ?")
if (choice == true)
$scope.confirmMessage = 'Welcome';
else
$scope.confirmMessage = 'Sorry';
}
}]);
</script>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!