Programming Concepts Help: Learning AngularJS Part 3: Directives, Data Binding and Filters

Here is Previous Part of this series:

Learning AngularJS Part 1: Introduction to AngularJS

Learning AngularJS Part 2: Model View Controller

Continuing the series of Learning AngularJS a guide for beginners, in this post we will see the Directives Filters and Data Bindings. If you are new to AngularJS I would recommend you to read the series of article from start.

To start developing an application you need to download AngularJS Library or you can use CDN for the benefits of caching. include the downloaded AngularJS to your HTML just before the closing body tag this will make sure that your document is loaded when your AngularJS start running.

<html>
<head></head>
  <body>

     <script src="angular.js"></script>
  </body>
</html>

That is it! you have everything you need to code for AngularJS application. You can use any IDE for coding I would recommend Visual Studio 2013 because of some better JavaScript intellisense.

Now you have included library for AngularJS you are ready to code, to code with AngularJS you need to use Directives.

What are Directives?

Directives are most important or I would say core components of AngularJS. Directives are nothing but HTML tags and attributes. These are the way to use AngularJS extended HTML functionality. Using directives you can teach HTML new features by writing your own custom directives. AngularJS comes with a bunch of built-in directives like ng-app, ng-hide,ng-show, ng-repeat, ng-class and many others.

Directives are markers on the HTML page that tells AngularJS to bind that particular directive functionality(behavior) on a specified element.

Lets see a simple Hello World application:

<html ng-app="">
 <head>
    <title>Anular JS</title>
 </head>
 <body>
     <div id="container" ng-init="name='Zaheer Ahmed'">
     Your Name: <input ng-model="name" type="text" />
 
     Hello AngularJS world!!!!
     My Name is {{name}}.</div>
   </body>
</html>

Here is working demo, Practice here.

So Here we have designed a simple application and we use some AngularJS directives, attributes starting with ng are angular directives.

We started with ng-app the most important directive of AngularJS.

It declares the scope of your application that is the reason it is mostly put at the html tag itself, but it can be use inside html the only thing need to be considered is that AngularJS directive only works within the scope of ng-app directives.

Here we use ng-app attribute without value because for this simple application we do not have any controller or scope (view model). So it works withing this scope. But if we want to use data from this view in our controller then we need to initialize value for this attribute i.e, ng-app='myApp'.

Then we used the ng-init let see it after ng-model, ng-model directive initialized a property in memory with the name given as value, ng-model is one of the ways to bind the $scope(View-Model) properties to the element, since in this example we do not have any controller so the scope of this variable will only be limited for this View.

Since we have pre-initialize the variable name using ng-init so it is already available in the memory so it will use this value and bind it to input input field. So when you run this application you will see input has value 'Zaheer Ahmed' because name was initialize by it.

So these are some basic directive you mostly need to use, as you start practicing you will get familiar to many built-in directives. Here is complete API reference available, you can search and get information about all directives or you can download Angular Cheat Sheet.

Data Binding

Data binding in AngularJS is really simple, as we did in above code simply wrap the variable as {{variable}} on any element, that element is now bounder to the data. ng-model is also a way to bind using attribute as we did in above code example.

Binding in AngularJS is two ways which means if you bounded an element to a data now if that element lets say input change that property the original data in your controller will also be updated or if you update the value of data from controller element will also show changes.

So AngularJS made this so simple using one attribute otherwise developer need to write the code to detect onchange event for getting change from element and also need to update element to update element value.

How Filters work?

Filters are the way to pass all of your data collection to a particular condition. like searching, sorting etc. For example in above code we printed the name enter by user in input field we want to make it upper-case or there is an array we want to upper-case all string there we need to use filters. Filters are applied on a data using bar separator.

So changing above code to :

<html ng-app="">    
 <head>
    <title>Anular JS</title>
 </head>    
 <body>
    <div id="container" ng-init="name='Zaheer Ahmed'">
      Your Name: <input ng-model="name" type="text" /> 

      Hello AngularJS world!!!!
      My Name is {{name | uppercase}}.
    </div>
  </body>
</html>

above code will automatically convert input value to upper-case. Here is demo.

Let see another example where we filter data using user input:

<html ng-app> 
 <head>
    <title>Anular JS</title>
 </head>
 <body>
    <div id='container' ng-init="names=['Ahmed','John','Jeff',Zaheer']">
       search : <input type="text" ng-model="searchKeyword" />

       <div style='background:#E4E8EA;padding:10px;'>
          Here is list of user name:
          <ul ng-repeat="name in names | filter:searchKeyword">
              <li>{{name | uppercase}}</li>
          </ul>
       </div>
   </div>
 </body>
</html>

Here is demo, for practice.

Here we initialize an array using ng-init directive and bind input field with another variable searchKeyword like we did in our previous example.

Here we used another directive ng-repeat, this directive keeps repeating element to the number of times data present in given collection. This is really helpful for-example you have 50 users data and you want to show in a particular format. You need to write 50 times the same HTML but with ng-repeat you just need to create a template and using this directive repeat it number of times you want.

Now here we use the filter after bar separator name in names | filter:searchKeyword here we are telling it to filter the collection for searchKeyword, so it will give us only the list containing the keyword input by user.

As you see how simple it was to filter a collection. There are many built-in filters available which include currency[:symbol], filter:expression, json, lowecase, uppercase, orderby etc.

So it was Directives filters and data binding in AngularJs. Hope now you have some base knowledge and with time and practice you will be familiar with more of these.

Hope you find this helpful. Please do comment if you want to see any particular topic of AngularJS in this series and also give your valuable feedback and don't forget to share with friends.

Here is Next Part of this series: