t-kashima/index.html

## index.html
<!doctype html>
<html ng-app="todoApp">
  <head>
    <script src="./bower_components/angular/angular.min.js"></script>
    <script src="todo.js"></script>
  </head>
  <body>
    <div>
      <h1>Hello</h1>
      <div ng-controller="TodoListController">
        <span>{{remaining()}} of {{todos.length}}</span>
        [ <a href="" ng-click="archive()">archive</a> ]
        <ul>
          <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span>{{todo.text}}</span>
          </li>
        </ul>
        <form ng-submit="addTodo()">
          <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here">
          <input type="submit" value="add">
        </form>
      </div>
    </div>
  </body>
</html>

## todo.ts
/// <reference path="./typings/index.d.ts" />

class Todo {
    constructor(public text: string, public done: boolean = false) { }
}

interface TodoScope extends ng.IScope {
    todos: Array<Todo>;
    todoText: string;

    addTodo: Function;
    remaining: Function;
    archive: Function;
}

class TodoListController {
    constructor(private $scope: TodoScope) {
        $scope.todos = [
            new Todo('learn angular', true),
            new Todo('build an angular app', false)
        ];
        $scope.addTodo = angular.bind(this, this.addTodo);
        $scope.remaining = angular.bind(this, this.remaining);
        $scope.archive = angular.bind(this, this.archive);
        console.log($scope.todos);
    }

    addTodo() {
        this.$scope.todos.push(new Todo(this.$scope.todoText, false));
        this.$scope.todoText = '';
    }

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

    archive() {
        var oldTodos = this.$scope.todos;
        this.$scope.todos = [];
        angular.forEach(oldTodos, (todo) => {
            if (!todo.done) {
                this.$scope.todos.push(todo);
            }
        });
    }
}

var app = angular.module('todoApp', [])
app.controller('TodoListController', ['$scope', TodoListController]);
	<!doctype html>
	<html ng-app="todoApp">
	<head>
	<script src="./bower_components/angular/angular.min.js"></script>
	<script src="todo.js"></script>
	</head>
	<body>
	<div>
	<h1>Hello</h1>
	<div ng-controller="TodoListController">
	<span>{{remaining()}} of {{todos.length}}</span>
	[ <a href="" ng-click="archive()">archive</a> ]
	<ul>
	<li ng-repeat="todo in todos">
	<input type="checkbox" ng-model="todo.done">
	<span>{{todo.text}}</span>
	</li>
	</ul>
	<form ng-submit="addTodo()">
	<input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here">
	<input type="submit" value="add">
	</form>
	</div>
	</div>
	</body>
	</html>
	/// <reference path="./typings/index.d.ts" />

	class Todo {
	constructor(public text: string, public done: boolean = false) { }
	}

	interface TodoScope extends ng.IScope {
	todos: Array<Todo>;
	todoText: string;

	addTodo: Function;
	remaining: Function;
	archive: Function;
	}

	class TodoListController {
	constructor(private $scope: TodoScope) {
	$scope.todos = [
	new Todo('learn angular', true),
	new Todo('build an angular app', false)
	];
	$scope.addTodo = angular.bind(this, this.addTodo);
	$scope.remaining = angular.bind(this, this.remaining);
	$scope.archive = angular.bind(this, this.archive);
	console.log($scope.todos);
	}

	addTodo() {
	this.$scope.todos.push(new Todo(this.$scope.todoText, false));
	this.$scope.todoText = '';
	}

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

	archive() {
	var oldTodos = this.$scope.todos;
	this.$scope.todos = [];
	angular.forEach(oldTodos, (todo) => {
	if (!todo.done) {
	this.$scope.todos.push(todo);
	}
	});
	}
	}

	var app = angular.module('todoApp', [])
	app.controller('TodoListController', ['$scope', TodoListController]);