Sunday, 25 November 2012

AngularJS tutorial for beginners or Introduction to Angular JS

What is AngularJS:
AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

On a high level, AngularJS is a framework that binds your HTML (views) to JavaScript objects (models). When your models change, the page updates automatically. The opposite is also true – a model, associated with a text field, is updated when the content of the field is changed. Angular handles all the glue code, so you don’t have to update HTML manually or listen for events, like you do with jQuery. As a matter of fact, none of the examples here even include jQuery!
Add below line in head tag after title tag
<script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>

   <div>2+3={{2+3}}</div>
The output is 2+3=5.
<html ng-app>
<head runat="server">
    <title></title>
    <script type ="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
</head>
<body>
    <form id="form1" runat="server"> 
    <div>2+3={{2+3}}</div>
    <h4 style="color:Green">Welcome {{Firstname + " " + LastName}}!</h4>
    Enter Firstname: <input type="text" ng-model="Firstname" placeholder="Enter Your Firstname here"><br />
    Enter Firstname: <input type="text" ng-model="LastName" placeholder="Enter Your LastName here">   
     </form>
</body>
</html>

 The output



No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.