Alert Box in AngularJS

Introduction

This article explains how to show an Alert Box in AngularJS.

There is one basic difference between JavaScript and AngularJS, in other words in JavaScript default names of properties and objects are available for global Window Objects but in AngularJS "$window" is needed for referring to global Window Objects. For example if we want to show the alert in Angular then we need to pass it as $window.alert.

This article will show you how to display an alert box using AngularJS.

Step 1

First of all you need to add an external Angular.js file to your application, for this you can go to the AngularJS official site or can download my source code and then fetch it or click on this link and can download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

</head>

Step 2

Now I will create a function and will show how to create the alert in this function.

Write this function in the head section of your application:

function greet($window, $scope) {

$scope.hello = function () {

$window.alert('Hi!! ' + $scope.name);

}

</script>

Here I have created a function named "greet", in this function $scope and $window are passed as objects because scope is used to pass a value to the controller and as you know we will display an alert window, that's why $window is used.

Then an alert is used but havs $window prior to it, in this alert the message "Hi!!" will be displayed along with some value that will be passed through a TextBox. This will be done using the $scope.name. Now you will be thinking that I have neither declared name anywhere nor provided an initial value to the scope, you can pass the initial value prior to this hello function but that will only help to show some text by default and nothing much more than that.

Step 3

Until now our work on ViewModel, in other words the Script part, is complete and now we need to work on our View, in other words the design part of our application.

Write this code in the body section:

<body>

Name: <input ng-model="name" type="text"/>

<button ng-click="greet()">Greet</button>

</div>

</body>

Here first I have applied a controller to a div, then an input tag is used in which "name" is applied through the ng-model, so whatever is entered into the TextBox will be shown in the alert box on the click of a button. The button click is bound to greet using the ng-click().

Now our work on this application is completed and it's complete code is as follows:

function greet($window, $scope) {

$scope.hello = function () {

$window.alert('Hi!! ' + $scope.name);

}

</script>

</head>

<body>

Name: <input ng-model="name" type="text"/>

<button ng-click="greet()">Greet</button>

</div>

</body>

</html>

Output

On running the application you will see a TextBox and a Button.

Alert Box in AngularJS

If now I click on the Button then an Alert message will be shown but in the alert box "Hello Undefined" will be shown because nothing is provided through the TextBox and no initial value was passed through the $scope.

Alert Box in AngularJS

Now I am entering my name in the TextBox

Alert Box in AngularJS

After entering my name I clicked on the Button to show the alert message and you can see that Hello is printed along with the name entered in the TextBox.

Alert Box in AngularJS