Post
Ask Question

Understanding Window Service In AngularJS

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>  
  3.   
  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.                     };  
  20.   
  21.                 });  
  22.             </script>  
  23.             </body>  
  24.   
  25. </html>  
Output

output

Prompt Example
  1. <!DOCTYPEhtml>  
  2. <html>  
  3.   
  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>  
  26.   
  27. </html>  
Output

output

Confirm Example
  1. <!DOCTYPEhtml>  
  2. <html>  
  3.   
  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>  
  13.   
  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>  
  30.   
  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. 


Similar Articles