Button click

Let's play around clicking on a button.

All we want to do here is to click on a button and trigger some JavaScript function.

The function to trigger:

The JavaScript function to be triggered must be added to the $scope object of the view controller. Meaning we should edit the view controller file, which in our case is world.js.

    Hi.view(function($scope){
        
        //Here we add the function to the $scope
        $scope.example = function(){
            
            alert("I got invoked");
        
        }; 
          
    });

Adding the button element

Just add the following HTML snippet to your world.html.

    
    <button>Click me</button>

The button we just added, does exactly nothing. If we want it to trigger the example function on click, we must change that snippet as follows.

Binding behavior to the button

This is how you bind the example function to the button element's click event:

    
    <button ng-click="example()">Click me</button>

You can now test your view on the browser. Depending on your development environment you might have to rebuild and redeploy the app.

Example app running with button click

The magic glue

Did you recognize the ng-click attribute? In case you didn't, let us tell you that it came from angularJS.

Hi-Framework views are powered by angularJS 1.x.

AngularJS 1.x
AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents. It does not contain much in the way of creating applications, and as a result building web applications is an exercise in what do I have to do to trick the browser into doing what I want?

Find out more clicking here.

Github Repository