Angular JS Events

Almost all of you have heard of the 'Event handling', to develop outstanding applications we will need to handle certain events within like a mouse click, key press, unload, etc. Angular JS provides the simplest way to add event listeners to our app. Let's get started experiencing an event handling in Angular JS.

First, I'll start with embedding a click event to our angular is app.

<code>
<div ng-controller="HelloController">
<div ng-click="helloData.hClick()">
<code>Click here</code></div>
</div>
<code>
/* script start*/
<script>
    angular.module("helloapp", [])
            .controller("HelloController", function($scope) {
                $scope.helloData = {};
                $scope.helloData.hClick = function() {
                    alert("Hello World");
                }
            } );
</script>
/* script end */
</code>

On clicking the text "click here" hClick() function is called resulting the output. I guess there is not much difficulty to do so, all we need is an 'ng-click' provided by angular js. This is only simple demonstration, please suggest further improvements and feel free to raise questions.

Filtering

Filtering is a feature provided by Angular JS directives. I wish discuss about how filtering is implemented. Let's see how filters are implemented in ng-repeat directive.

<div ng-repeat="item in helloData.items | filter: testFilter"></div>
<!-- Script -->
<script>
  angular.module("helloapp", [])
    .controller("HelloController", function($scope) {
      $scope.helloData = {};
      $scope.helloData.items  = [ {text : "uno"}, {text : "dos"}, {text : "tres"}, {text : "cuatro"} ];

      $scope.testFilter = function(item) {
        if(item.text == "dos") return false;
          return true;
        }
      }
    });

</script>
<!-- end -->

The filter with piped symbol in the markup denotes a filter is applied (| filter:) to the array items. Here 'testFilter' is the custom filter, defined as function. If the testFilter returns true item is printed else it will be discarded.

Other than the custom filters, Angular JS provides formatting, array filters etc. Formatting filter can be named date, currency, number etc. Using array filters you could restrict the item count with limitTo filter, order records in asc/desc formats.

Please let us know your feedback. Happy to help. Thank you.

AngularJS Directives (Part II)

Now its all about directives talk, this is the second part of my previous post. Those who wish to know more about AngularJS Directive's can be benefited by reading this content. You must be familiar with conditional statements and loops. AJS also have these features as directives, listed as:

• ng-if
• ng-switch
• ng-repeat

ng-if can be used to add/remove contents from DOM, for example:

<div ng-controller="HelloController" >
    <div ng-if="true">ng-if Show</div>
    <div ng-if="false">ng-if Hide</div>
</div>


ng-switch unlike the ng-if can be used to add/remove elements from HTML DOM, for example:

<div ng-controller="HelloController" >
    <div ng-switch on="2">
       <div ng-switch-when="1">Switch 1</div>
       <div ng-switch-when="2">Switch 2</div>
       <div ng-switch-when="3">Switch 3</div>
    </div>
</div>


In the example output will be displayed as 'Switch 2'.

ng-repeat directive act as a loop to execute a certain snippet number of times assigned. It generates html by iterating over the conditions. Example:
<ol>
  <li ng-repeat="5">Hello World</li>
</ol>

The above snippet prints the 'Hello Word' 5 times creating the <li> tags.

For more reference you can search about more directives ng-include, ng-show, ng-hide. For more complex examples please let me know. In the next article we will the covering AJS 'Filters'.
Many thanks