Coffee with AngularJS

AngularJS! A term often heard in technical discussions, events and conferences that associate themselves with the concept of jQuery. So while having my breakfast coffee, I thought of finding more about it. Apprehensions like complexity and high level of difficulty had been some of the reasons as to why I hadn’t explored this data library before; but then I decided to go for it.

After spending a while on various tutorials and online demos, the first thing that I found was ‘ng-model’.

Nothing difficult! It is simply a keyword that creates a live two-way binding for you. Or technically, you can say it is an inbuilt directive/custom attribute which tell the AngularJS’s HTML Compiler to access the DOM of the element and attach a specified behavior to it.

Let me explain the concept of two way binding using a very simple example. Suppose I wish to greet a person, who logs in, with a Good morning message followed by their name, the simplest answer would be to handle the keyUp or Focus event of the input element, access the corresponding <div> tag, and update the text using the widely used concepts of jQuery or JavaScript as illustrated below:

<script type="text/javascript">
   $(document).ready(function () {

        $("#inputName").keydown(function () {
              $("#divName").text($("#inputName").val());
        });

   });
</script>

<input type="text" id="inputName" placeholder="What’s your name?" />
    Good Morning <div id="divName"></div>

Now let me show you the way to do the same thing using the star of this blog – AngularJS.

<input type="text" ng-model="name" placeholder="What’s your name?" />
   Good Morning {{name}} !

Yes. That’s it!!
You don’t need to access the DOM element or manipulate anything in jQuery.

In the above example, you must be wondering what {{ }} is? In AngularJS, {{ }} is called an expression that contains the name of the variable which needs to be displayed.

Looking at the simplicity of the above code, I copied it into an HTML page but, it didn’t work!!

The reasons that I had found were pretty simple:

1. I had forgotten to include the AngularJS library
2. “ng-app” directive was missing from the page.

Now what is ng-app? It is the most important thing when you are creating an Angular application. It’s also an inbuilt directive that tells the browser that this is an Angular application and it needs to execute the directives that are attached to the tags. The ‘ng-app’ can be added to the HTML tag on the top, or any specific section of the page.

After these reasons were sorted, I finally got my first Angular application.

As my coffee finished, I realized one thing that AngularJS is not difficult to understand. Yes, it is vast unlike any other data library, because it is a complete framework, providing data binding, routing, controllers, modules, testing and many more features.

This easy start has made me confident enough to take a step further and see how to implement controllers, models and other concepts available in AngularJS.

This was my first experience with AngularJS, how was yours?
CodeProject