Implement backend API to Angular.

zhuguoxi · Nov 3, 2014 · f94b112 · f94b112
1 parent 258e172
commit f94b112
Show file tree

Hide file tree

Showing 10 changed files with 363 additions and 105 deletions.
diff --git a/examples/angularjs/bower.json b/examples/angularjs/bower.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "dependencies": {
     "angular": "1.3.0",
-    "todomvc-common": "~0.1.4"
+    "todomvc-common": "~0.3.0"
   },
   "devDependencies": {
     "angular-mocks": "1.3.0",

diff --git a/examples/angularjs/bower_components/todomvc-common/base.js b/examples/angularjs/bower_components/todomvc-common/base.js
@@ -171,25 +171,42 @@
 			framework = document.querySelector('[data-framework]').dataset.framework;
 		}
 
+		this.template = template;
 
-		if (template && learnJSON[framework]) {
+		if (learnJSON.backend) {
+			this.frameworkJSON = learnJSON.backend;
+			this.append({
+				backend: true
+			});
+		} else if (learnJSON[framework]) {
 			this.frameworkJSON = learnJSON[framework];
-			this.template = template;
-
 			this.append();
 		}
 	}
 
-	Learn.prototype.append = function () {
+	Learn.prototype.append = function (opts) {
 		var aside = document.createElement('aside');
 		aside.innerHTML = _.template(this.template, this.frameworkJSON);
 		aside.className = 'learn';
 
-		// Localize demo links
-		var demoLinks = aside.querySelectorAll('.demo-link');
-		Array.prototype.forEach.call(demoLinks, function (demoLink) {
-			demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
-		});
+		if (opts && opts.backend) {
+			// Remove demo link
+			var sourceLinks = aside.querySelector('.source-links');
+			var heading = sourceLinks.firstElementChild;
+			var sourceLink = sourceLinks.lastElementChild;
+			// Correct link path
+			var href = sourceLink.getAttribute('href');
+			sourceLink.setAttribute('href', href.substr(href.lastIndexOf('http')));
+			sourceLinks.innerHTML = heading.outerHTML + sourceLink.outerHTML;
+		} else {
+			// Localize demo links
+			var demoLinks = aside.querySelectorAll('.demo-link');
+			Array.prototype.forEach.call(demoLinks, function (demoLink) {
+				if (demoLink.getAttribute('href').substr(0, 4) !== 'http') {
+					demoLink.setAttribute('href', findRoot() + demoLink.getAttribute('href'));
+				}
+			});
+		}
 
 		document.body.className = (document.body.className + ' learn-bar').trim();
 		document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);

diff --git a/examples/angularjs/index.html b/examples/angularjs/index.html
@@ -14,7 +14,7 @@
 				<header id="header">
 					<h1>todos</h1>
 					<form id="todo-form" ng-submit="addTodo()">
-						<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
+						<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" ng-disabled="saving" autofocus>
 					</form>
 				</header>
 				<section id="main" ng-show="todos.length" ng-cloak>
@@ -23,12 +23,12 @@ <h1>todos</h1>
 					<ul id="todo-list">
 						<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
 							<div class="view">
-								<input class="toggle" type="checkbox" ng-model="todo.completed">
+								<input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="toggleCompleted(todo)">
 								<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
 								<button class="destroy" ng-click="removeTodo(todo)"></button>
 							</div>
-							<form ng-submit="doneEditing(todo)">
-								<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
+							<form ng-submit="saveEdits(todo, 'submit')">
+								<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo == editedTodo">
 							</form>
 						</li>
 					</ul>

diff --git a/examples/angularjs/js/app.js b/examples/angularjs/js/app.js
@@ -9,13 +9,24 @@ angular.module('todomvc', ['ngRoute'])
 	.config(function ($routeProvider) {
 		'use strict';
 
-		$routeProvider.when('/', {
+		var routeConfig = {
 			controller: 'TodoCtrl',
-			templateUrl: 'todomvc-index.html'
-		}).when('/:status', {
-			controller: 'TodoCtrl',
-			templateUrl: 'todomvc-index.html'
-		}).otherwise({
-			redirectTo: '/'
-		});
+			templateUrl: 'todomvc-index.html',
+			resolve: {
+				store: function (todoStorage) {
+					// Get the correct module (API or localStorage).
+					return todoStorage.then(function (module) {
+						module.get(); // Fetch the todo records in the background.
+						return module;
+					});
+				}
+			}
+		};
+
+		$routeProvider
+			.when('/', routeConfig)
+			.when('/:status', routeConfig)
+			.otherwise({
+				redirectTo: '/'
+			});
 	});
diff --git a/examples/angularjs/js/controllers/todoCtrl.js b/examples/angularjs/js/controllers/todoCtrl.js
@@ -6,21 +6,18 @@
  * - exposes the model to the template and provides event handlers
  */
 angular.module('todomvc')
-	.controller('TodoCtrl', function TodoCtrl($scope, $routeParams, $filter, todoStorage) {
+	.controller('TodoCtrl', function TodoCtrl($scope, $routeParams, $filter, store) {
 		'use strict';
 
-		var todos = $scope.todos = todoStorage.get();
+		var todos = $scope.todos = store.todos;
 
 		$scope.newTodo = '';
 		$scope.editedTodo = null;
 
-		$scope.$watch('todos', function (newValue, oldValue) {
+		$scope.$watch('todos', function () {
 			$scope.remainingCount = $filter('filter')(todos, { completed: false }).length;
 			$scope.completedCount = todos.length - $scope.remainingCount;
 			$scope.allChecked = !$scope.remainingCount;
-			if (newValue !== oldValue) { // This prevents unneeded calls to the local storage
-				todoStorage.put(todos);
-			}
 		}, true);
 
 		// Monitor the current route for changes and adjust the filter accordingly.
@@ -33,17 +30,23 @@ angular.module('todomvc')
 		});
 
 		$scope.addTodo = function () {
-			var newTodo = $scope.newTodo.trim();
-			if (!newTodo.length) {
+			var newTodo = {
+				title: $scope.newTodo.trim(),
+				completed: false
+			};
+
+			if (!newTodo.title) {
 				return;
 			}
 
-			todos.push({
-				title: newTodo,
-				completed: false
-			});
-
-			$scope.newTodo = '';
+			$scope.saving = true;
+			store.insert(newTodo)
+				.then(function success() {
+					$scope.newTodo = '';
+				})
+				.finally(function () {
+					$scope.saving = false;
+				});
 		};
 
 		$scope.editTodo = function (todo) {
@@ -52,33 +55,71 @@ angular.module('todomvc')
 			$scope.originalTodo = angular.extend({}, todo);
 		};
 
-		$scope.doneEditing = function (todo) {
-			$scope.editedTodo = null;
+		$scope.saveEdits = function (todo, event) {
+			// Blur events are automatically triggered after the form submit event.
+			// This does some unfortunate logic handling to prevent saving twice.
+			if (event === 'blur' && $scope.saveEvent === 'submit') {
+				$scope.saveEvent = null;
+				return;
+			}
+
+			$scope.saveEvent = event;
+
+			if ($scope.reverted) {
+				// Todo edits were reverted-- don't save.
+				$scope.reverted = null;
+				return;
+			}
+
 			todo.title = todo.title.trim();
 
-			if (!todo.title) {
-				$scope.removeTodo(todo);
+			if (todo.title === $scope.originalTodo.title) {
+				return;
 			}
+
+			store[todo.title ? 'put' : 'delete'](todo)
+				.then(function success() {}, function error() {
+					todo.title = $scope.originalTodo.title;
+				})
+				.finally(function () {
+					$scope.editedTodo = null;
+				});
 		};
 
-		$scope.revertEditing = function (todo) {
+		$scope.revertEdits = function (todo) {
 			todos[todos.indexOf(todo)] = $scope.originalTodo;
-			$scope.doneEditing($scope.originalTodo);
+			$scope.editedTodo = null;
+			$scope.originalTodo = null;
+			$scope.reverted = true;
 		};
 
 		$scope.removeTodo = function (todo) {
-			todos.splice(todos.indexOf(todo), 1);
+			store.delete(todo);
+		};
+
+		$scope.saveTodo = function (todo) {
+			store.put(todo);
+		};
+
+		$scope.toggleCompleted = function (todo, completed) {
+			if (angular.isDefined(completed)) {
+				todo.completed = completed;
+			}
+			store.put(todo, todos.indexOf(todo))
+				.then(function success() {}, function error() {
+					todo.completed = !todo.completed;
+				});
 		};
 
 		$scope.clearCompletedTodos = function () {
-			$scope.todos = todos = todos.filter(function (val) {
-				return !val.completed;
-			});
+			store.clearCompleted();
 		};
 
 		$scope.markAll = function (completed) {
 			todos.forEach(function (todo) {
-				todo.completed = !completed;
+				if (todo.completed !== completed) {
+					$scope.toggleCompleted(todo, completed);
+				}
 			});
 		};
 	});