Search This Blog

Angular advantages

The the code below uses html  input type=" range" element and creates some basic visual functionality.  Just the ability to bind HTML elements using  Angular JS can save code and make it more responsive.  This is can be important during "change" events when function calls to update data are being made in milliseconds, notice the visual lag from JQuery caused by calling the change event.  Angular is more responsive to change events due to binding.


{{age1}} Angular

33 JQuery

Angular Code:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<div ng-app="" ng-init="age1=33">
 <label>Age:<input type="range" name="age1" id="age1" min="0" max="100" step="1"  ng-model="age1" />
            </label><span>{{{age1}}}"</span>
</div>


JQuery Code:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#age").change(function() {
       $("#range").html($(this).val());
     });
});
</script>

<label>Age: <input type="range" name="age" id="age" min="0" max="100" step="1" value="33" " ></label><span id="range">33</span>



No comments:

Post a Comment