To Do List

├── .gitignore ├── index.html ├── js ├── app.js ├── controllers │ └── todoCtrl.js ├── directives │ ├── todoEscape.js │ └── todoFocus.js └── services │ └── todoStorage.js ├── node_modules ├── angular-resource │ └── angular-resource.js ├── angular-route │ └── angular-route.js ├── angular │ └── angular.js ├── todomvc-app-css │ └── index.css └── todomvc-common │ ├── base.css │ └── base.js ├── package.json ├── readme.md └── test ├── config └── karma.conf.js └── unit ├── directivesSpec.js └── todoCtrlSpec.js /.gitignore: -------------------------------------------------------------------------------- 1 | test/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To Do List 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | /*global angular */ 2 | 3 | /** 4 | * The main TodoMVC app module 5 | * 6 | * @type {angular.Module} 7 | */ 8 | angular.module('todomvc', ['ngRoute', 'ngResource']) 9 | .config(function ($routeProvider) { 10 | 'use strict'; 11 | 12 | var routeConfig = { 13 | controller: 'TodoCtrl', 14 | templateUrl: 'todomvc-index.html', 15 | resolve: { 16 | store: function (todoStorage) { 17 | // Get the correct module (API or localStorage). 18 | return todoStorage.then(function (module) { 19 | module.get(); // Fetch the todo records in the background. 20 | return module; 21 | }); 22 | } 23 | } 24 | }; 25 | 26 | $routeProvider 27 | .when('/', routeConfig) 28 | .when('/:status', routeConfig) 29 | .otherwise({ 30 | redirectTo: '/' 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /js/controllers/todoCtrl.js: -------------------------------------------------------------------------------- 1 | /*global angular */ 2 | 3 | /** 4 | * The main controller for the app. The controller: 5 | * - retrieves and persists the model via the todoStorage service 6 | * - exposes the model to the template and provides event handlers 7 | */ 8 | angular.module('todomvc') 9 | .controller('TodoCtrl', function TodoCtrl($scope, $routeParams, $filter, store) { 10 | 'use strict'; 11 | 12 | var todos = $scope.todos = store.todos; 13 | 14 | $scope.newTodo = ''; 15 | $scope.editedTodo = null; 16 | 17 | $scope.$watch('todos', function () { 18 | $scope.remainingCount = $filter('filter')(todos, { completed: false }).length -1; 19 | $scope.completedCount = todos.length - $scope.remainingCount; 20 | $scope.allChecked = !$scope.remainingCount; 21 | }, true); 22 | 23 | // Monitor the current route for changes and adjust the filter accordingly. 24 | $scope.$on('$routeChangeSuccess', function () { 25 | var status = $scope.status = $routeParams.status || ''; 26 | $scope.statusFilter = (status === 'active') ? 27 | { completed: false } : (status === 'completed') ? 28 | { completed: true } : {}; 29 | }); 30 | 31 | $scope.addTodo = function () { 32 | var newTodo = { 33 | title: $scope.newTodo.trim(), 34 | completed: false 35 | }; 36 | 37 | if (!newTodo.title) { 38 | return; 39 | } 40 | 41 | $scope.saving = true; 42 | store.insert(newTodo) 43 | .then(function success() { 44 | $scope.newTodo = ' '; 45 | }) 46 | .finally(function () { 47 | $scope.saving = false; 48 | }); 49 | }; 50 | 51 | $scope.editTodo = function (todo) { 52 | $scope.editedTodo = todo; 53 | // Clone the original todo to restore it on demand. 54 | $scope.originalTodo = angular.extend({}, todo); 55 | }; 56 | 57 | $scope.saveEdits = function (todo, event) { 58 | // Blur events are automatically triggered after the form submit event. 59 | // This does some unfortunate logic handling to prevent saving twice. 60 | if (event === 'blur' && $scope.saveEvent === 'submit') { 61 | $scope.saveEvent = null; 62 | return; 63 | } 64 | 65 | $scope.saveEvent = event; 66 | 67 | if ($scope.reverted) { 68 | // Todo edits were reverted-- don't save. 69 | $scope.reverted = null; 70 | return; 71 | } 72 | 73 | todo.title = todo.title.trim(); 74 | 75 | if (todo.title === $scope.originalTodo.title) { 76 | $scope.editedTodo = null; 77 | return; 78 | } 79 | 80 | store[todo.title ? 'put' : 'delete'](todo) 81 | .then(function success() {}, function error() { 82 | todo.title = $scope.originalTodo.title; 83 | }) 84 | .finally(function () { 85 | $scope.editedTodo = null; 86 | }); 87 | }; 88 | 89 | $scope.revertEdits = function (todo) { 90 | todos[todos.indexOf(todo)] = $scope.originalTodo; 91 | $scope.editedTodo = null; 92 | $scope.originalTodo = null; 93 | $scope.reverted = true; 94 | }; 95 | 96 | $scope.removeTodo = function (todo) { 97 | store.delete(todo); 98 | }; 99 | 100 | $scope.saveTodo = function (todo) { 101 | store.put(todo); 102 | }; 103 | 104 | $scope.toggleCompleted = function (todo, completed) { 105 | if (angular.isDefined(completed)) { 106 | todo.completed = completed; 107 | } 108 | store.put(todo, todos.indexOf(todo)) 109 | .then(function success() {}, function error() { 110 | todo.completed = !todo.completed; 111 | }); 112 | }; 113 | 114 | $scope.clearCompletedTodos = function () { 115 | store.clearCompleted(); 116 | }; 117 | 118 | $scope.markAll = function (completed) { 119 | todos.forEach(function (todo) { 120 | //if (todo.completed !== completed) { 121 | $scope.toggleCompleted(todo, completed); 122 | //} 123 | }); 124 | }; 125 | }); 126 | -------------------------------------------------------------------------------- /js/directives/todoEscape.js: -------------------------------------------------------------------------------- 1 | /*global angular */ 2 | 3 | /** 4 | * Directive that executes an expression when the element it is applied to gets 5 | * an `escape` keydown event. 6 | */ 7 | angular.module('todomvc') 8 | .directive('todoEscape', function () { 9 | 'use strict'; 10 | 11 | var ESCAPE_KEY = 27; 12 | 13 | return function (scope, elem, attrs) { 14 | elem.bind('keydown', function (event) { 15 | if (event.keyCode === ESCAPE_KEY) { 16 | scope.$apply(attrs.todoEscape); 17 | } 18 | }); 19 | 20 | scope.$on('$destroy', function () { 21 | elem.unbind('keydown'); 22 | }); 23 | }; 24 | }); 25 | -------------------------------------------------------------------------------- /js/directives/todoFocus.js: -------------------------------------------------------------------------------- 1 | /*global angular */ 2 | 3 | /** 4 | * Directive that places focus on the element it is applied to when the 5 | * expression it binds to evaluates to true 6 | */ 7 | angular.module('todomvc') 8 | .directive('todoFocus', function todoFocus($timeout) { 9 | 'use strict'; 10 | 11 | return function (scope, elem, attrs) { 12 | scope.$watch(attrs.todoFocus, function (newVal) { 13 | if (newVal) { 14 | $timeout(function () { 15 | elem[0].focus(); 16 | }, 0, false); 17 | } 18 | }); 19 | }; 20 | }); 21 | -------------------------------------------------------------------------------- /js/services/todoStorage.js: -------------------------------------------------------------------------------- 1 | /*global angular */ 2 | 3 | /** 4 | * Services that persists and retrieves todos from localStorage or a backend API 5 | * if available. 6 | * 7 | * They both follow the same API, returning promises for all changes to the 8 | * model. 9 | */ 10 | angular.module('todomvc') 11 | .factory('todoStorage', function ($http, $injector) { 12 | 'use strict'; 13 | 14 | // Detect if an API backend is present. If so, return the API module, else 15 | // hand off the localStorage adapter 16 | return $http.get('/api') 17 | .then(function () { 18 | return $injector.get('api'); 19 | }, function () { 20 | return $injector.get('localStorage'); 21 | }); 22 | }) 23 | 24 | .factory('api', function ($resource) { 25 | 'use strict'; 26 | 27 | var store = { 28 | todos: [], 29 | 30 | api: $resource('/api/todos/:id', null, 31 | { 32 | update: { method:'PUT' } 33 | } 34 | ), 35 | 36 | clearCompleted: function () { 37 | var originalTodos = store.todos.slice(0); 38 | 39 | var incompleteTodos = store.todos.filter(function (todo) { 40 | return !todo.completed; 41 | }); 42 | 43 | angular.copy(incompleteTodos, store.todos); 44 | 45 | return store.api.delete(function () { 46 | }, function error() { 47 | angular.copy(originalTodos, store.todos); 48 | }); 49 | }, 50 | 51 | delete: function (todo) { 52 | var originalTodos = store.todos.slice(0); 53 | 54 | store.todos.splice(store.todos.indexOf(todo), 1); 55 | return store.api.delete({ id: todo.id }, 56 | function () { 57 | }, function error() { 58 | angular.copy(originalTodos, store.todos); 59 | }); 60 | }, 61 | 62 | get: function () { 63 | return store.api.query(function (resp) { 64 | angular.copy(resp, store.todos); 65 | }); 66 | }, 67 | 68 | insert: function (todo) { 69 | var originalTodos = store.todos.slice(0); 70 | 71 | return store.api.save(todo, 72 | function success(resp) { 73 | todo.id = resp.id; 74 | store.todos.push(todo); 75 | }, function error() { 76 | angular.copy(originalTodos, store.todos); 77 | }) 78 | .$promise; 79 | }, 80 | 81 | put: function (todo) { 82 | return store.api.update({ id: todo.id }, todo) 83 | .$promise; 84 | } 85 | }; 86 | 87 | return store; 88 | }) 89 | 90 | .factory('localStorage', function ($q) { 91 | 'use strict'; 92 | 93 | var STORAGE_ID = 'todos-angularjs'; 94 | 95 | var store = { 96 | todos: [], 97 | 98 | _getFromLocalStorage: function () { 99 | return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]'); 100 | }, 101 | 102 | _saveToLocalStorage: function (todos) { 103 | localStorage.setItem(STORAGE_ID, JSON.stringify(todos)); 104 | }, 105 | 106 | clearCompleted: function () { 107 | var deferred = $q.defer(); 108 | 109 | var incompleteTodos = store.todos.filter(function (todo) { 110 | return !todo.completed; 111 | }); 112 | 113 | angular.copy(incompleteTodos, store.todos); 114 | 115 | store._saveToLocalStorage(store.todos); 116 | deferred.resolve(store.todos); 117 | 118 | return deferred.promise; 119 | }, 120 | 121 | delete: function (todo) { 122 | var deferred = $q.defer(); 123 | 124 | store.todos.splice(store.todos.indexOf(todo), 1); 125 | 126 | store._saveToLocalStorage(store.todos); 127 | deferred.resolve(store.todos); 128 | 129 | return deferred.promise; 130 | }, 131 | 132 | get: function () { 133 | var deferred = $q.defer(); 134 | 135 | angular.copy(store._getFromLocalStorage(), store.todos); 136 | deferred.resolve(store.todos); 137 | 138 | return deferred.promise; 139 | }, 140 | 141 | insert: function (todo) { 142 | var deferred = $q.defer(); 143 | 144 | store.todos.push(todo); 145 | 146 | store._saveToLocalStorage(store.todos); 147 | deferred.resolve(store.todos); 148 | 149 | return deferred.promise; 150 | }, 151 | 152 | put: function (todo, index) { 153 | var deferred = $q.defer(); 154 | 155 | store.todos[index] = todo; 156 | 157 | store._saveToLocalStorage(store.todos); 158 | deferred.resolve(store.todos); 159 | 160 | return deferred.promise; 161 | } 162 | }; 163 | 164 | return store; 165 | }); 166 | -------------------------------------------------------------------------------- /node_modules/angular-resource/angular-resource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license AngularJS v1.4.3 3 | * (c) 2010-2015 Google, Inc. http://angularjs.org 4 | * License: MIT 5 | */ 6 | (function(window, angular, undefined) {'use strict'; 7 | 8 | var $resourceMinErr = angular.$$minErr('$resource'); 9 | 10 | // Helper functions and regex to lookup a dotted path on an object 11 | // stopping at undefined/null. The path must be composed of ASCII 12 | // identifiers (just like $parse) 13 | var MEMBER_NAME_REGEX = /^(\.[a-zA-Z_$@][0-9a-zA-Z_$@]*)+$/; 14 | 15 | function isValidDottedPath(path) { 16 | return (path != null && path !== '' && path !== 'hasOwnProperty' && 17 | MEMBER_NAME_REGEX.test('.' + path)); 18 | } 19 | 20 | function lookupDottedPath(obj, path) { 21 | if (!isValidDottedPath(path)) { 22 | throw $resourceMinErr('badmember', 'Dotted member path "@{0}" is invalid.', path); 23 | } 24 | var keys = path.split('.'); 25 | for (var i = 0, ii = keys.length; i < ii && obj !== undefined; i++) { 26 | var key = keys[i]; 27 | obj = (obj !== null) ? obj[key] : undefined; 28 | } 29 | return obj; 30 | } 31 | 32 | /** 33 | * Create a shallow copy of an object and clear other fields from the destination 34 | */ 35 | function shallowClearAndCopy(src, dst) { 36 | dst = dst || {}; 37 | 38 | angular.forEach(dst, function(value, key) { 39 | delete dst[key]; 40 | }); 41 | 42 | for (var key in src) { 43 | if (src.hasOwnProperty(key) && !(key.charAt(0) === '$' && key.charAt(1) === '$')) { 44 | dst[key] = src[key]; 45 | } 46 | } 47 | 48 | return dst; 49 | } 50 | 51 | /** 52 | * @ngdoc module 53 | * @name ngResource 54 | * @description 55 | * 56 | * # ngResource 57 | * 58 | * The `ngResource` module provides interaction support with RESTful services 59 | * via the $resource service. 60 | * 61 | * 62 | *

63 | * 64 | * See {@link ngResource.$resource `$resource`} for usage. 65 | */ 66 | 67 | /** 68 | * @ngdoc service 69 | * @name $resource 70 | * @requires $http 71 | * 72 | * @description 73 | * A factory which creates a resource object that lets you interact with 74 | * [RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer) server-side data sources. 75 | * 76 | * The returned resource object has action methods which provide high-level behaviors without 77 | * the need to interact with the low level {@link ng.$http $http} service. 78 | * 79 | * Requires the {@link ngResource `ngResource`} module to be installed. 80 | * 81 | * By default, trailing slashes will be stripped from the calculated URLs, 82 | * which can pose problems with server backends that do not expect that 83 | * behavior. This can be disabled by configuring the `$resourceProvider` like 84 | * this: 85 | * 86 | * ```js 87 | app.config(['$resourceProvider', function($resourceProvider) { 88 | // Don't strip trailing slashes from calculated URLs 89 | $resourceProvider.defaults.stripTrailingSlashes = false; 90 | }]); 91 | * ``` 92 | * 93 | * @param {string} url A parameterized URL template with parameters prefixed by `:` as in 94 | * `/user/:username`. If you are using a URL with a port number (e.g. 95 | * `http://example.com:8080/api`), it will be respected. 96 | * 97 | * If you are using a url with a suffix, just add the suffix, like this: 98 | * `$resource('http://example.com/resource.json')` or `$resource('http://example.com/:id.json')` 99 | * or even `$resource('http://example.com/resource/:resource_id.:format')` 100 | * If the parameter before the suffix is empty, :resource_id in this case, then the `/.` will be 101 | * collapsed down to a single `.`. If you need this sequence to appear and not collapse then you 102 | * can escape it with `/\.`. 103 | * 104 | * @param {Object=} paramDefaults Default values for `url` parameters. These can be overridden in 105 | * `actions` methods. If any of the parameter value is a function, it will be executed every time 106 | * when a param value needs to be obtained for a request (unless the param was overridden). 107 | * 108 | * Each key value in the parameter object is first bound to url template if present and then any 109 | * excess keys are appended to the url search query after the `?`. 110 | * 111 | * Given a template `/path/:verb` and parameter `{verb:'greet', salutation:'Hello'}` results in 112 | * URL `/path/greet?salutation=Hello`. 113 | * 114 | * If the parameter value is prefixed with `@` then the value for that parameter will be extracted 115 | * from the corresponding property on the `data` object (provided when calling an action method). For 116 | * example, if the `defaultParam` object is `{someParam: '@someProp'}` then the value of `someParam` 117 | * will be `data.someProp`. 118 | * 119 | * @param {Object.