AngularJS Tutorial Series – 2

This is a continued series of tutorials. Please refer to intro part here


First thing first. Since we are going to use AngularJS API, it is first important to add reference of the latest stable version to our HTML file.

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

 

Introduction to ng-directives

 

1) ng-app  2) ng-model 3) ng-bind

 

ng-app:

This is the root element. All the code inside this element will be valid Angular code. So ng-app can be applied to tags like html , head , body and also to a div tag. Please note that, there can not be nested ng-app directive within the same hierarchy. Following example uses div tag as ng-app root element.


 

ng-model:

This element is used to actually bind values to a variable. This variable can be called as Model. All types of HTML input tags come with value attribute. This attribute is directly bound to the respective variable which later can be used throughout the page. Following example binds value field of txtinput to a variable called name. All you have to do is, this:

<input id="txtinput" type="text"  ng-model="name"/>

 


 

ng-bind:

This attribute is used to bind the model. Once we have associated a value in model to any control then the primary purpose will be to use this value through out the page or may be save this value to database. The database operations we will see later in the course, for now we will bind it to a paragraph tag. Its real time binding.


 

Sample explaining above

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <title>Angular Demo</title>
</head>
 <body >
<div ng-app="">
        <input type="text"  ng-model="name" /></div>
</body>
</html>

Conclusion

Now we know the basic three attributes of Angular, we will go further to understand quick binding expression, modules and controllers.

Thank you.


GauranG


Next chapter is Here

2 thoughts on “AngularJS Tutorial Series – 2

  1. Pingback: AngularJS Tutorial Series – 3 | Gaurang's Tech Blog

  2. Pingback: Introduction to Angular JS – Part 1 | Gaurang's Tech Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s