Simple AngularJS Example

via http://rabidgadfly.com/2012/11/hello-angularjs/

HTML

<html xmlns:ng="http://angularjs.org" ng-app lang="en">
    <head>
        <meta charset="utf-8">
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
        <script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
    </head>
    <body>
<div ng-controller="Ctrl">
    
    <!-- Note the ng-model assignment. It's bound to the scope variable defined in app.js. -->
    Your opinion of AngularJS: <input name="angular-description" ng-model="angularDescription.test" ng-placeholder="Your opinion of Angular here" >
    <hr>
    <!-- Note that we are outputting the value of angularDescription here. It's
    bound to the scope variable so it updates automatically -->
    <p>AngularJS <span style="color:red;">{{angularDescription.test}}</span>!</p>
    
    <!-- Simple adding machine -->
    <p>Enter numbers in the input boxes:</p>
    <input name="top-number" ng-model="topNumber" ng-placeholder="Enter Number" />
    +
    <input name="bot-number" ng-model="botNumber" ng-placeholder="Enter Number" />
    =
    <!-- Not elegant but multiplying the values by one in the braces below makes
    them evaluate as numbers instead of strings. Without it we would end up
    with concatenation instead of addition -->
    <span style="color:red;">{{topNumber*1 + botNumber*1}}</span>
  </div>
    </body>
</html>

JavaScript

/* (Very) simple controller that sets scope variables we 
*   will bind to.
*/
function Ctrl($scope) {
    $scope.angularDescription = {test:"Rocks"};
  $scope.topNumber = 0;
  $scope.botNumber = 0;
}