AngularJs is a javascript library framework widely used for Single page application projects. it extends HTML dom with extra attributes which makes its more flexible to user end. It is a opensource library .
For learn AngularJs you should prerequisite with html,Javascript,css, and Ajax technologies . It is similiar like JQuery (another very popular javascript library). But AngularJs Comparatively More faster and optimized to rest of the javascript libraries.
More Interesting thing is that AngularJs is Promoted and Sponcered and developed by Google team. A google Engineer Started this project in 2009 , and google announced AngularJs Project in 2012.
AngularJs Extends the Html Elements with ng-directives. Some Important are following:
a) ng-app : Defines AngularJs Application
b) ng-model : Bind the value of HTML Input Controlls(Input,Select,textarea) to Application data.
c) ng-bind : binds application data to html view.
For running any angularjs program we have to add following script in html <head> section
Adding a Script from google cdn.
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> |
Now We are showing you a full Program to print name in a label or any place which we type in a textbox.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="cityname"></p> <p ng-bind="cityname"></p> </div> </body> </html> |
Explanation for above program:
1.AngularJs Inclusion using script tag.
2.Start ng-app in div
3.create a text input and Define its ng-model as cityname
4. bind the value of ng-model application data with p tag by defining the model name in ng-bind attribute.
Now if you Run this html then it renders a Input box ,As you will type anything then the data will be shown immediately in p tag just below the textbox. for see it in action please copy and paste this program in any blank html file and run it.