Introduction

The $window service in AngularJS refer to the browser window object. With reference to JavaScript, window is a global object that includes many methods like prompt, conform, alert, etc.

With window object in JavaScript, there is a testability problem due to it is defined as a global variable. In AngularJS, it can always refer a service called "$window" so that we may override (removed or mocked) for testing.

The $window service is just wrapped around the JavaScript window object. It is most recommended to use $window service with AngularJS application instead of using window object directly.

Example

Alert Example

  1. <!DOCTYPEhtml>
  2. <html>
  4. <head>
  5. <title>$window Service in AngularJS</title>
  6. <scriptsrc="angular.js">
  7. </script>
  8. </head>
  9. <bodyng-app="app">
  10. <h4>$window Service Example</h4>
  11. <divng-controller="HelloController">
  12. <buttonng-click="showAlert()">Alert Example</button>
  13. </div>
  14. <script>
  15. var app = angular.module("app", []);
  16. app.controller("HelloController", function($scope, $window) {
  17. $scope.showAlert = function() {
  18. $window.alert('Hi! Jignesh');
  19. };
  21. });
  22. </script>
  23. </body>
  25. </html>
Output

output

Prompt Example
  1. <!DOCTYPEhtml>
  2. <html>
  4. <head>
  5. <title>$window Service in AngularJS</title>
  6. <scriptsrc="angular.js">
  7. </script>
  8. </head>
  9. <bodyng-app="app">
  10. <h4>$window Service Example</h4>
  11. <divng-controller="HelloController">
  12. <buttonng-click="showPrompt()">Prompt Example</button>
  13. </div>
  14. <script>
  15. var app = angular.module("app", []);
  16. app.controller("HelloController", function($scope, $window)
  17. {
  18. $scope.showPrompt = function()
  19. {
  20. var name = $window.prompt('Enter your fullName');
  21. $window.alert('Hi! ' + name);
  22. }
  23. });
  24. </script>
  25. </body>
  27. </html>
Output

output

Confirm Example
  1. <!DOCTYPEhtml>
  2. <html>
  4. <head>
  5. <title>$window Service in AngularJS</title>
  6. <scriptsrc="angular.js">
  7. </script>
  8. </head>
  9. <bodyng-app="app">
  10. <h4>$window Service Example</h4>
  11. <divng-controller="HelloController">
  12. <buttonng-click="showConfirm()">Confirm Example</button>
  14. {{result}}
  15. </div>
  16. <script>
  17. var app = angular.module("app", []);
  18. app.controller("HelloController", function($scope, $window) {
  19. $scope.showConfirm = function() {
  20. varconfirmExample = $window.confirm("Do you want to continue!");
  21. if (confirmExample == true) {
  22. $scope.result = "You pressed OK!";
  23. } else {
  24. $scope.result = "You pressed Cancel!”
  25. }
  26. }
  27. });
  28. </script>
  29. </body>
  31. </html>
Output

output

Browser Resize with AngularJS

The $window service can also be used to get the window resize event. To do this, we need to bind resize event with window object.

Controller Code
  1. var app = angular.module("app", []);
  2. app.controller("HelloController", function($scope, $window)
  3. {
  4. var window = angular.element($window);
  5. window.bind('resize', function()
  6. {
  7. console.log('resize');
  8. });
  9. }
Output

output

Summary

This article will help you to understand window service in AngularJS.