Open In App
Related Articles

AngularJS $window Service

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:



Last Updated : 06 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads