0

Display an Alert when a Button is Clicked in AngularJS

Background

This article demonstrates a very simple application that displays JavaScript alert when a button is clicked. This feature is one of the things people new to AngularJS would want to accomplish even in examples.

Software Environment

  • Windows 7 Professional SP1
  • Notepad or Notepad++
  • AngularJS 1.3.8

AngularJS – Download or Reference it online

You may download AngularJS from angularjs.org and/or simply reference it where it resides using HTML <script></script> tags.

Some Context

In AngularJS, we have controllers. These are much like your JSF “controllers” but only written in JavaScript and only run in web browsers (i.e., client-side). Controllers have behaviors and in AngularJS, they are implemented as a set of JavaScript functions. There are available facilities to tie up the functions with “clickable” HTML items such as a button.

Sample Application

This application is pretty basic and will only display alert message when a button is clicked.

File: buttonclick_angularjs.html

 Sample Output

angularjs-click-button1

angularjs-click-button2

Download the Sample

https://www.dropbox.com/s/75zldqi4hxbv4ll/buttonclick_angularjs.zip?dl=0

Karl San Gabriel

Karl San Gabriel

Java and Enterprise Technologies Expert