Introduction
In my last articles I told you about:
This article will tell you about the $window service provided by AngularJS.
In JavaScript "window" is available by default but it can provide many problems because it is a global variable in JavaScript, but in AngularJS we need to declare the $window service due to which it overrides the already existing "window" and doesn't provide any type of problem while testing the application. If you want to use a window or any property of a window than you first need to declare it.
I will create a simple application that will help you understand this service in a better and easier way.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a JavaScript function that is the important part of this application:
<script>
function x($scope, $window) {
$scope.greet = 'Hello Anubhav';
$scope.greetFunc = function (greet) {
$window.alert(greet);
};
}
</script>
Here I have created a variable "x", in this function both $scope and $window are used, using the scope we will declare the initial values and future functions.
In the variable greet I had passed "Hello Anubhav" as it's initial value; that can be changed at run time.
I then created a function named greetFunc, in this function I use the alert property of $window, this will show the alert message with the text provided in the greet variable.
Now our work on View is completed so we can work on the ViewModel.
Step 3
<body>
<form id="form1" runat="server">
<div ng-app>
<div ng-controller="x">
<input type="text" ng-model="greet" />
<input type="button" ng-click="greetFunc(greet)" value="Greetings"/>
</div>
</div>
</form>
</body>
Here I had bound the Div with with the function "x", in this div I took a Label and a Button.
Label is bound to the greet using the ng-model. Button is bound to the function "greetFunc" using the ng-click. Now if the user clicks on the button, an alert box will be displayed that will show the default value in the beginning but if the user enters any text in the TextBox then that text will also be displayed.
Now our application is ready for execution.
Output
On running the application you will get output like this:
![window service in angularjs]()
Here you can see that the default value is shown in the TextBox and a button is available.
On the click of a button an alert box will be shown that will display the default Text.
![window service in angularjs]()
Now if changes are made in the TextBox and again the Button is clicked then you can see that an alert box shows the new value:
![window service in angularjs]()
The complete code of this application is as follows:
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
function x($scope, $window) {
$scope.greet = 'Hello Anubhav';
$scope.greetFunc = function (greet) {
$window.alert(greet);
};
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app>
<div ng-controller="x">
<input type="text" ng-model="greet" />
<input type="button" ng-click="greetFunc(greet)" value="Greetings"/>
</div>
</div>
</form>
</body>
</html>