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

Angular JS - Expression and directives

Expressions are used in Angular JS for outputting html. Expression are written inside double curly braces. " {{ expression }}".  Directives are used to extend HTML with new attributes, the directives are prefixed by "ng-".

Example 1 - Using expressions:

<div ng-app="" ng-init="quantity=3;cost=10;">

   <p>Total: {{quantity*cost}}</p>   

 <p>5 + 5 is {{ 5+5 }}</p> 

 <p>'K' + 'ing' is {{'K'+'ing'}}</p>

  </div>

AngularJS views blend information from the model into a HTML layout. You utilize AngularJS directives to define AnguluarJS how to blend the information into the HTML format. This content will cover the most regularly utilized AngularJS directives.

Interpolation Directive

The interpolation directive standout among the most basic directives in AngujarJS. The interpolation directive embeds the output of an expression into the HTML layout. You check where to embed the expression making use of the {{ }} symbols.

<div ng-controller="HelloController" >
      <span>{{helloData.msgfun()}}</span>
</div>

<script>
    angular.module("myapp", [])
    .controller("HelloController", function($scope) {
      $scope.helloData = {};
      $scope.helloData.msgfun= function() { return "A text from a function"; };
    });
</script>


In the example {{helloData.msgfun()}} is the interpolation directive which calls the 

helloData.msgfun() function on the model object.

There is one alternative for the interpolation called ng-bind. It uses 'ng-bind' attribute to the html were the data to be inserted. For example, considering the above case:

<div ng-controller="HelloController" >
      <span ng-bind="helloData.msgfun()"></span>
</div>

Some may feels like using innerHTML in JavaScript.

There are lots more directives available in Angular JS to get familiar with in my upcoming posts.

Hope you are ok with the example. Your feedback is always accepted. Many thanks.

Getting started with Angular JS

Angular JS follows MVC pattern, it has got attention among developers due to its amazing templating system, and development practices used. MVC means model, view, controller. Views are specified using HTML and Angular JS own templating language.This framework is capable of accepting user actions, events and to find out which template to refresh. Javascript functions and objects constitute models and controllers of this framework.

Angular JS has got one important feature called, "dependency injection (DI)". This inbuilt feature enables us to develop web apps from smaller, thoroughly tested services. Well lets get started with a simple hello world program just like we begin all programming languages. Sample code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="helloWorldApp">
 <div ng-controller="HelloController" >
     <h2>Hello {{myData.message}} !</h2>
 </div>
<script>
angular.module("helloWorldApp", [])
    .controller("HelloController", function($scope) {
        $scope.myData = {};
        $scope.myData.message = "World, AngularJS";
    } );
</script>
</body>
</html>  

I guess you have find the code simple, let have a break down of above code snippet.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

Above is the line of code to include Angular JS library, you can eiter use CDN or download it in your local system.

If we want a HTML page to a Angular JS application we need to include "ng-app", so it can be recognized as AJS application.
ng-app="helloWorldApp"

There is also a attribute called "ng-init" for initializing model befor html gets rendered, in the above method we have used controllers a better way to do so.

ng-controller="HelloController", used for assinging controller to be used for this app.

{{ myData.message }} the double curly brackets expression is used for outputting model values.

angular.module("helloWorldApp", []): this is the way of defining module in Angular js.

Hope you find this article useful, if any queries please ask. In the next article we will be discussing about various expressions and directives in Angular JS. 

Angular JS - Introduction

AngularJS is a client-side MVC framework written in JavaScript developed by Google. Angular JS is most suited in developing single page web applications. It is a general purpose framework that makes easier to develop RIA web applications.

You can get Angular JS from, http://angularjs.org/

Lets have a look at sample program in Angular JS,

<!DOCTYPE html>

<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-init="title = 'World'">>

 <h2>Hello, {{ title }}!</h2>

</body>

</html>

Hope you had good introduction to AJS, you can find more detailed explanation about the topic from next article "Getting started with Angular JS". If any queries please comment.