rethinkdb · marshall007 · Nov 3, 2016 · Oct 30, 2016 · Nov 1, 2016
diff --git a/examples/README.md b/examples/README.md
@@ -14,12 +14,14 @@ We decided it was important to leverage Horizon alongside all your normal app fu
 And finally, we've created a few example applications to help you get started with Horizon. In each directory
 you will find a `dist` folder which will have all the files needed to serve the example application. In some of the
 TodoMVC examples, you will find a `package.json` inside the `dist` directory, and you will need to run `npm install` for
-some of their dependencies. 
+some of their dependencies.
 
 If you have any questions just ask on [Slack](http://slack.rethinkdb.com) or [Twitter](https://twitter.com/rethinkdb)!
 
-## CycleJS
+## AngularJS
+* [AngularJS Todo App](/examples/angularjs-todo-app)
 
+## CycleJS
 * [CycleJS Chat App](/examples/cyclejs-chat-app)
 
 ## React

diff --git a/examples/angularjs-todo-app/.gitignore b/examples/angularjs-todo-app/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+rethinkdb_data
+**/*.log
+.hz/
diff --git a/examples/angularjs-todo-app/README.md b/examples/angularjs-todo-app/README.md
@@ -0,0 +1,22 @@
+#TodoMVC
+
+A basic example of using [AngularJS](http://angularjs.org/) and [Horizon](http://horizon.io/) to create real-time TodoMVC app.
+
+## Prerequisites
+
+- [RethinkDB](https://www.rethinkdb.com/docs/install/) (The open-source database for the realtime web)
+- [Horizon](http://horizon.io/install/) (A realtime, open-source backend for JavaScript apps)
+
+## Installing
+
+```
+$ git clone [email protected]:rethinkdb/horizon.git
+$ cd horizon/examples/angularjs-todo-app
+$ hz init
+$ cd dist && npm install
+$ cd .. && hz serve --dev
+```
+
+## Credit
+
+This TodoMVC application is built based on the [todomvc-angularjs-horizon](https://github.com/endetti/todomvc-angularjs-horizon).
diff --git a/examples/angularjs-todo-app/dist/css/style.css b/examples/angularjs-todo-app/dist/css/style.css
@@ -0,0 +1,8 @@
+[ng\:cloak],
+[ng-cloak],
+[data-ng-cloak],
+[x-ng-cloak],
+.ng-cloak,
+.x-ng-cloak {
+    display: none !important;
+}
diff --git a/examples/angularjs-todo-app/dist/index.html b/examples/angularjs-todo-app/dist/index.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+
+    <head>
+        <meta charset="UTF-8">
+        <script src="/horizon/horizon.js"></script>
+        <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+        <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+
+    <body ng-app="todomvc" ng-cloak>
+        <section class="todoapp" ng-controller="TodoCtrl as Todo">
+            <header class="header">
+                <h1>todos</h1>
+                <form ng-submit="Todo.addTask()">
+                    <input class="new-todo" placeholder="What needs to be done?" ng-model="Todo.taskTitle" autofocus>
+                </form>
+            </header>
+            <section class="main" ng-show="Todo.tasks.length">
+                <input class="toggle-all" type="checkbox" ng-checked="Todo.allCompleted" ng-click="Todo.toggleAll()">
+                <label for="toggle-all">Mark all as complete</label>
+                <ul class="todo-list">
+                    <li ng-repeat="task in Todo.tasks track by task.id" ng-class="{completed: task.completed, editing: task.id == Todo.editedTask.id}">
+                        <div class="view">
+                            <input class="toggle" type="checkbox" ng-model="task.completed" ng-change="Todo.toggleCompleted(task)">
+                            <label ng-dblclick="Todo.editTask(task)">{{task.title}}</label>
+                            <button class="destroy" ng-click="Todo.removeTask(task)"></button>
+                        </div>
+                        <form ng-submit="Todo.editTaskSave(task)">
+                            <input type="text" id="{{task.id}}" class="edit" ng-model="task.title" ng-blur="Todo.editTaskCancel(task)">
+                        </form>
+                    </li>
+                </ul>
+            </section>
+            <footer class="footer" ng-show="Todo.tasks.length">
+                <span class="todo-count"><strong>{{Todo.remainingCount}}</strong>
+                    <ng-pluralize count="Todo.remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
+                </span>
+                <button class="clear-completed" ng-click="Todo.removeCompletedTasks()" ng-show="Todo.completedCount">Clear completed</button>
+            </footer>
+        </section>
+        <footer class="info">
+            <p>Double-click to edit a todo</p>
+            <p>Created by <a href="https://github.com/endetti">endetti</a></p>
+            <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+        </footer>
+        <script src="node_modules/todomvc-common/base.js"></script>
+        <script src="node_modules/angular/angular.js"></script>
+        <script src="js/app.js"></script>
+        <script src="js/controllers/TodoController.js"></script>
+    </body>
+
+</html>
diff --git a/examples/angularjs-todo-app/dist/js/app.js b/examples/angularjs-todo-app/dist/js/app.js
@@ -0,0 +1 @@
+angular.module('todomvc', []);
diff --git a/examples/angularjs-todo-app/dist/js/controllers/TodoController.js b/examples/angularjs-todo-app/dist/js/controllers/TodoController.js
@@ -0,0 +1,96 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('todomvc')
+        .controller('TodoCtrl', TodoCtrl);
+
+    TodoCtrl.$inject = ['$filter', '$q'];
+
+    function TodoCtrl($filter, $q) {
+        const hz = new Horizon();
+        const Tasks = hz("todomvc_tasks");
+
+        self = this;
+        self.allCompleted = false;
+
+        self.addTask = addTask;
+        self.removeTask = removeTask;
+        self.editTask = editTask;
+        self.editTaskSave = editTaskSave;
+        self.editTaskCancel = editTaskCancel;
+        self.toggleCompleted = toggleCompleted;
+        self.toggleAll = toggleAll;
+        self.removeCompletedTasks = removeCompletedTasks;
+
+        init();
+
+        function init() {
+            Tasks.order("date", "ascending").watch().subscribe(function (tasks) {
+                var defer = $q.defer();
+
+                defer.resolve(tasks);
+
+                defer.promise.then(function (tasks) {
+                    self.remainingCount = $filter('filter')(tasks, { completed: false }).length;
+                    self.completedCount = tasks.length - self.remainingCount;
+                    self.allCompleted = !self.remainingCount;
+                    self.tasks = tasks;
+                });
+            });
+        }
+
+        function addTask() {
+            if (!self.taskTitle) return;
+
+            Tasks.store({
+                title: self.taskTitle.trim(),
+                completed: false,
+                date: new Date()
+            });
+
+            self.taskTitle = '';
+        }
+
+        function removeTask(task) {
+            Tasks.remove(task);
+        }
+
+        function editTask(task) {
+            self.editedTask = task;
+
+            self.taskCopy = angular.copy(task);
+        }
+
+        function editTaskSave(task) {
+            self.editedTask = null;
+
+            Tasks.update(task);
+        }
+
+        function editTaskCancel(task) {
+            task.title = self.taskCopy.title;
+            self.editedTask = null;
+        }
+
+        function toggleCompleted(task) {
+            Tasks.update(task);
+        }
+
+        function toggleAll() {
+            self.tasks.forEach(function (task) {
+                task.completed = !self.allCompleted;
+            });
+
+            toggleCompleted(self.tasks);
+        }
+
+        function removeCompletedTasks() {
+            var completed = self.tasks.filter(function (task) {
+                return task.completed === true;
+            });
+
+            Tasks.remove(completed);
+        }
+    };
+})();
diff --git a/examples/angularjs-todo-app/dist/package.json b/examples/angularjs-todo-app/dist/package.json
@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "dependencies": {
+    "angular": "^1.5.8",
+    "todomvc-app-css": "^2.0.0",
+    "todomvc-common": "^1.0.1"
+  }
+}