Tags


<!-- as a user types their name, show them their input in real time -->
<!-- the jQuery IMPERATIVE way -->
<form name="imperative">
  <label for="firstName">First name: </label>
  <input type="text" name="firstName" id="firstName">
  <span id="name-output"></span>
</form>

<script>
$(function(){
    // Notice how we must make sure the ID strings in both HTML
    // and JavaScript MUST match
    $('#firstName').keypress(function(){
        // boilerplate: retrieve a model value
        var nameValue = $('#firstName').value();
        // boilerplate: paint the model value into the view
        $('#name-output').text(nameValue);
    });
});
</script>

<!-- the AngularJS DECLARATIVE way -->
<form name="declarative">
  <label for="firstName">First name: </label>
  <!-- the next two lines create the 2-way binding between the model and view -->
  <input type="text" name="firstName" id="firstName" ng-model="firstName">
  <span>{{firstName}}</span>
</form>

<script>
// Because AngularJS hides the boilerplate, no DOM string references to maintain
// between HTML and JavaScript
</script>