I don’t like jQuery, and wanted to eliminate its use in my website. By using AngularJS and the CSS from Twitter Bootstrap, I am able to do most of what I need. One of the cool things about AngularJS is the ease of integrating functionality into HTML, without spending too much time in the backend Javascript. For my purposes in this blog, this is idea; for folks developing complex websites, a clearer MVx framework is more maintainable.

Demo 1

Here is an example where I create a button that increments a counter, which is displayed below it. Note that I don’t really write any DOM manipulation or Javascript here, but instead create a declarative relationship between the button click, a state change, and a manifestation of that state change in a visible field.

If you click the following Increment button …

… then the counter below will increment:

All this without writing any Javascript.

The code for the above is:

<div>
  <button ng-click="counter = counter + 1" ng-init="counter = 0">Increment</button>
</div>

<div>
  <h4>counter: {{counter}}</h4>
</div>

Demo 2

If you click the following Add Lines button, it will increment a counter, add a new HR and the new counter below itself, and will then resize itself slightly larger. Try it!

This demo required some Javascript be written in the form of an inline controller that handles the clicked() function. The code and HTML for the above is:

<script>
function Demo2Controller($scope, $compile, $element) {
  $scope.labelCounter = 0;
  $scope.clicked = function() {
    $scope.labelCounter++;
    var element = $element[0];
    var aelement = angular.element(element);
    var newLabel = angular.element("<hr style=\"background-color:blue;height:5px;\"/><p style=\"color:red;\">" + $scope.labelCounter + "</p>");
    aelement.after(newLabel);
    aelement.text('Counter: ' + $scope.labelCounter);
    aelement.css('width', '' + (100 + 5 * $scope.labelCounter) + 'px');
  };
}
</script>

<div>
  <button name="MyButton1" ng-controller="Demo2Controller" ng-click="clicked()">Add Lines</button>
  {{labelCounter}}
 </div>

Demo 3

I wrote the above example one year ago, when I was first learning AngularJS. Now I know a better (less code) way to do the above (no controller needed).

The code for the above is:

<div ng-init="labelCounter3 = 0; rng=[]">
  <button name="MyButton3" ng-click="labelCounter3 = labelCounter3 + 1; rng.push(labelCounter3)">
    Add Lines
  </button>
  <h5>{{labelCounter3}}</h5>

  <div ng-repeat="row in rng">
    <hr style="background-color:blue;height:5px;"/>
    <p style="color:red;"> {{row}} </p>
  </div>
</div>