Wednesday, January 28, 2015

AngularJS for very Beginners

"AngularJS" also referred to as "Angular" is an open source structural framework for dynamic web apps.

AngularJS is created by Google and the community of individual developers. AngularJS is a MVC based framework which reduces much of the code by using dependency injection and data binding. 

To use Angular you need to download its framework from here. Get the stable and minified version of the framework. This will be the reference for the script we are going to create.

1.    <html ng-app>


2.    <script src="angular.min.js"></script>

3.    Text : <input ng-model="textName">
4.    <br/>


5.    {{textName}}
 


6.    </html>

Explanation of the code

1.   "ng-app": saying html to use angular

2.   set reference for the script (angular.min.js is included in same folder of test.html)

3.   "ng-model": Model to the input

4.   "{{textName}}": View of the input 

Output 

 









We looked at Model and View architecture, Lets look at Controller in action !

1.   <html ng-app>
2.   <script src="angular.min.js"></script>

3.   <button ng-click="num=num+1" ng-init="num=0">Add One</button>

4.   Number: {{num}}
5.   </html>

Explanation of the code

3.   "ng-click": click handler for Angular   ::  "ng-init": initial value of num

Output 










No comments:

Post a Comment