Saturday, 5 October 2013

Introduction To AngularJs-Lesson1

AngularJs is an extensible javascript framework by Google which can be used to build customized framework for our applications.

It is extensible and work well with other libraries, every features of this is fully customizable.

Below are the best Features Of AngularJS which i like at most

1) Two-Way Bindings.
2) MVC support for client side.
3) Template.
4) Dependency Injection.
5) Directives.
6) Routing

We will go through each of these concepts later on ,first of all I will like to introduce with you some basics of AngularJs.

Step 1) Download the Angular library from belowURL or for the latest API go to AngularJS
             https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js

Step 2) Add the library reference to your HTML page.

            <script src="Scripts/angular.min.js" type="text/javascript"></script>

Step 3) Copy below code.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head >
    <title></title>
     <script src="Scripts/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" ng-model="FooModel" placeholder="Enter Name" />

    <p>{{FooModel}}</p>
</body>
</html>

Notice the content of HTML marked in red:
1) ng-app= This is  a bootstrap directive which initialize the angular application
2) In second line we are registering the angular javascript file.
3) In textbox we are defining a model with it's name FooModel to textbox, so this FooModel will tightly  associated with this textbox
4) Finaly inside <p> tag we are assigning FooModel value.

So above is a small example to Angular 2-way binding model.

"Once we start providing value to that input box then the model associated with it is updated and
when that value of model update ,automatically value inside <p> tag updates, so it is a small but cleam example of angular two way binding concept"

For more check Two Way Binding-Lesson2







No comments:

Post a Comment