Skip to content
Related Articles

Related Articles

Improve Article

AngularJS $window Service

  • Last Updated : 11 Jun, 2021

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:

1. $window.alert() Method: This method is used to display the alert message on the window screen.

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:



2. $window.prompt() Method: This method is used to display the prompt message on the screen.

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:

3. $window.confirm() Method: This method is used to display a confirmation box on the screen.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :