Hello from Angular (Angular.js Data Binding)

[If you are finding it difficult to grasp on what I wrote so far, don't worry! Stick with me. I will take baby steps to make you familiar with Angular.js and after seeing some simple examples, you will understand what I'm trying to achieve here with Angular.js]

So let's see what we've got as our first example. If I’m right, when I said our first example. You are thinking like, "No!!! Not the hello world again!!!!" Actually you are right it's our very old friend Hello World Program. But this time it's not about printing the string "Hello World" on a button click rather we’ll bind a DOM element [e.g. <h1></h1>] to a input element [e.g. <input type="text" />] and update the text in h1 tag according to the text typed in the input field. And all of this will be happening in real time. It’s a very simple example of Angular.js Data Binding. So before we dive into some coding let’s have the very basic starter template for our Angular.js Hello World App. For that, first we will have to download the Angular.js library from https://angularjs.org/. If you already clicked the big download button there then you are seeing a floating panel like this,

At the time of writing this post the 1.3.x (latest) was in beta version. So we will work with 1.2.3 (legacy) version. As you can see we also have a CDN (Content Delivery network) link. I’m going to use the CDN link because I’ve got a stable internet connection. So our basic template will look like this,


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Starter Template</title>
</head>
<body>

    <input type="text" />
    <h1></h1>

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

</body>
</html>

Okay as you can see its all HTML up there. Next we will have to tell this HTML file to behave like an Angular.js app. This is the most important part of all since it instantiate the Angular.js library into your HTML file. To do that we’ll have to use an Angular Directive called ng-app in the opening <html> tag like this,

<html lang="en" ng-app>

So, you have an Angular.js app. Next you will add another directive called ng-model to you app and this time it is going into the <input type="text" /> tag. It should look like this,

<input type="text" ng-model="data.message" />

Doing so, we are requesting our dear friend Angular to create a POJO (Plain Old JavaScript Object) named data with a property named message behind the curtains.

Last of all we will have to bind the <h1></h1> to the model we’ve just created. To do so write the following into the h1 tag

<h1>{{data.message}}</h1>

With this syntax we are telling Angular to attach the message property of our data object to the <h1></h1>. Since we are having a two way binding here, so when we type something in the text box, it sets the message property to our typed string and at the same time it gets the message property value and shows it in the h1 tag.

And we are finished. Browse your HTML file with your favorite browser. Type something in the text box and see what happens. Awesome!!! Right??? I’m pasting my output here. Mine is something like this,

I hope you get it, see you in the next post.