Chapter – III
Hello from Angular (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,
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Starter Template</title>
</head>
<body>
<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.
No comments:
Post a Comment