AngularJS Example:

by mhevery

HTML

<div ng-app="todo" ng-controller="TodoCtrl">
  <div>
    <span id="debug"></span> ms. Count: {{todos.length}}
  </div>
  <div>
      [ <a href ng-click="add(0)">+0</a>
      | <a href ng-click="add(1)">+1</a>
      | <a href ng-click="add(10)">+10</a>
      | <a href ng-click="add(100)">+100</a>
      | <a href ng-click="add(1000)">+1000</a>
      ]
  </div>
  <h2>Todo</h2>
  <div>
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="unstyled">
      <li ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.done">
        <span class="done-{{todo.done}}">{{todo.text}}</span>
      </li>
    </ul>
    <form ng-submit="addTodo()">
      <input type="text" ng-model="todoText"  size="30"
             placeholder="add new todo here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<style>
.done-true {
  text-decoration: line-through;
  color: grey;
}

JavaScript

angular.module('todo', []).
  run(function($rootScope) {
    var ScopeProto = $rootScope.__proto__;
    var delegate = ScopeProto.$apply;
    var debug = angular.element(document.getElementById('debug'));
    
    ScopeProto.$apply = function() {
      var start = new Date().getTime();
      var value = delegate.apply(this, arguments);
      var end = new Date().getTime();
    
      debug.text(end-start);
      return value;
    }
});


function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 1 : 0;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
    
  $scope.add = function(count) {
    while(count--) {
      $scope.todos.push({text:'Generated TODO #' + $scope.todos.length, done:false});
    }
  }
}