AngularJS $window Service

Last Updated : 06 Sep, 2022

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= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </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= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </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= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> 
    </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>