Hello EveryoneIn this tutorial you are going to learn about angularjs with a basic program.Angularjs works on SPA framework which means single page application. To run the followingprogram all you need is to download angular.min.js and save it in the folder which containsthe following file. Following programs itself explains through comments how angularjs isworking, It displays a textbox and whatever being entered in the textbox will be displayedon the right of the textbox.html new tricks--><head> <title>Learn Angularjs</title> </head> <body > Name : <input type="text" data-ng-model="name"/>{{name}} <!-- this defines a textbox with variable name - 'name' and {{name}} output the text of the textbox being entered in it by the user. data-ng-model is a directive and {{name}} is a data binding expression --> <div data-ng-init="names=['ajeet','ankit','bihar','rahul','sunny','chitrank']"> <!-- This div initialises the array 'names'--> <br> <ul> <li ng-repeat="dcmember in names">{{dcmember}}</li> <!-- ng-repeat directives repeats the elements of the array to be listed by the variable dcmember in the array names--> </ul> </div> <br> <div data-ng-init="customers=[{name:'ajeet',city : 'Mhow'},{name :'ankit',city : 'Dewas'}]"> <!-- Here customers is an array which consist of name and city of the customer--> <input type="text" data-ng-model="nametext">{{nametext}} <ul> <!--filter will display the result according to the text being entered in the textbox, orderBy will display the list in alphabetical order according to city--> <li ng-repeat="cust in customers | filter: nametext | orderBy : 'city'" >{{cust.name}} - {{cust.city}}</li> </ul> </div> <script type="text/javascript" src="angular.min.js"></script> </body> </html>
Monday 30 December 2013
Angularjs Simple example
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment