Commit b645c677 authored by Stephen Sawchuk's avatar Stephen Sawchuk

[angularjs] use module instead of global variable.

parent ccb41288
/*global angular */ /*global angular */
/*jshint unused:false */
'use strict';
/** /**
* The main TodoMVC app module * The main TodoMVC app module
* *
* @type {angular.Module} * @type {angular.Module}
*/ */
var todomvc = angular.module('todomvc', ['ngRoute']) angular.module('todomvc', ['ngRoute'])
.config(function ($routeProvider) { .config(function ($routeProvider) {
'use strict';
$routeProvider.when('/', { $routeProvider.when('/', {
controller: 'TodoCtrl', controller: 'TodoCtrl',
templateUrl: 'todomvc-index.html' templateUrl: 'todomvc-index.html'
......
/*global todomvc, angular */ /*global angular */
'use strict';
/** /**
* The main controller for the app. The controller: * The main controller for the app. The controller:
* - retrieves and persists the model via the todoStorage service * - retrieves and persists the model via the todoStorage service
* - exposes the model to the template and provides event handlers * - exposes the model to the template and provides event handlers
*/ */
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $routeParams, todoStorage, filterFilter) { angular.module('todomvc')
var todos = $scope.todos = todoStorage.get(); .controller('TodoCtrl', function TodoCtrl($scope, $routeParams, todoStorage, filterFilter) {
'use strict';
$scope.newTodo = '';
$scope.editedTodo = null; var todos = $scope.todos = todoStorage.get();
$scope.$watch('todos', function (newValue, oldValue) {
$scope.remainingCount = filterFilter(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.
$scope.$on('$routeChangeSuccess', function () {
var status = $scope.status = $routeParams.status || '';
$scope.statusFilter = (status === 'active') ?
{ completed: false } : (status === 'completed') ?
{ completed: true } : null;
});
$scope.addTodo = function () { $scope.newTodo = '';
var newTodo = $scope.newTodo.trim(); $scope.editedTodo = null;
if (!newTodo.length) {
return;
}
todos.push({ $scope.$watch('todos', function (newValue, oldValue) {
title: newTodo, $scope.remainingCount = filterFilter(todos, { completed: false }).length;
completed: false $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.
$scope.$on('$routeChangeSuccess', function () {
var status = $scope.status = $routeParams.status || '';
$scope.statusFilter = (status === 'active') ?
{ completed: false } : (status === 'completed') ?
{ completed: true } : null;
}); });
$scope.newTodo = ''; $scope.addTodo = function () {
}; var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
$scope.editTodo = function (todo) { todos.push({
$scope.editedTodo = todo; title: newTodo,
// Clone the original todo to restore it on demand. completed: false
$scope.originalTodo = angular.extend({}, todo); });
};
$scope.doneEditing = function (todo) { $scope.newTodo = '';
$scope.editedTodo = null; };
todo.title = todo.title.trim();
if (!todo.title) { $scope.editTodo = function (todo) {
$scope.removeTodo(todo); $scope.editedTodo = todo;
} // Clone the original todo to restore it on demand.
}; $scope.originalTodo = angular.extend({}, todo);
};
$scope.revertEditing = function (todo) { $scope.doneEditing = function (todo) {
todos[todos.indexOf(todo)] = $scope.originalTodo; $scope.editedTodo = null;
$scope.doneEditing($scope.originalTodo); todo.title = todo.title.trim();
};
$scope.removeTodo = function (todo) { if (!todo.title) {
todos.splice(todos.indexOf(todo), 1); $scope.removeTodo(todo);
}; }
};
$scope.clearCompletedTodos = function () { $scope.revertEditing = function (todo) {
$scope.todos = todos = todos.filter(function (val) { todos[todos.indexOf(todo)] = $scope.originalTodo;
return !val.completed; $scope.doneEditing($scope.originalTodo);
}); };
};
$scope.markAll = function (completed) { $scope.removeTodo = function (todo) {
todos.forEach(function (todo) { todos.splice(todos.indexOf(todo), 1);
todo.completed = !completed; };
});
}; $scope.clearCompletedTodos = function () {
}); $scope.todos = todos = todos.filter(function (val) {
return !val.completed;
});
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
});
/*global todomvc */ /*global angular */
'use strict';
/** /**
* Directive that executes an expression when the element it is applied to gets * Directive that executes an expression when the element it is applied to gets
* an `escape` keydown event. * an `escape` keydown event.
*/ */
todomvc.directive('todoEscape', function () { angular.module('todomvc')
var ESCAPE_KEY = 27; .directive('todoEscape', function () {
return function (scope, elem, attrs) { 'use strict';
elem.bind('keydown', function (event) {
if (event.keyCode === ESCAPE_KEY) { var ESCAPE_KEY = 27;
scope.$apply(attrs.todoEscape);
} return function (scope, elem, attrs) {
}); elem.bind('keydown', function (event) {
}; if (event.keyCode === ESCAPE_KEY) {
}); scope.$apply(attrs.todoEscape);
}
});
};
});
/*global todomvc */ /*global angular */
'use strict';
/** /**
* Directive that places focus on the element it is applied to when the * Directive that places focus on the element it is applied to when the
* expression it binds to evaluates to true * expression it binds to evaluates to true
*/ */
todomvc.directive('todoFocus', function todoFocus($timeout) { angular.module('todomvc')
return function (scope, elem, attrs) { .directive('todoFocus', function todoFocus($timeout) {
scope.$watch(attrs.todoFocus, function (newVal) { 'use strict';
if (newVal) {
$timeout(function () { return function (scope, elem, attrs) {
elem[0].focus(); scope.$watch(attrs.todoFocus, function (newVal) {
}, 0, false); if (newVal) {
} $timeout(function () {
}); elem[0].focus();
}; }, 0, false);
}); }
});
};
});
/*global todomvc */ /*global angular */
'use strict';
/** /**
* Services that persists and retrieves TODOs from localStorage * Services that persists and retrieves TODOs from localStorage
*/ */
todomvc.factory('todoStorage', function () { angular.module('todomvc')
var STORAGE_ID = 'todos-angularjs'; .factory('todoStorage', function () {
'use strict';
return { var STORAGE_ID = 'todos-angularjs';
get: function () {
return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
put: function (todos) { return {
localStorage.setItem(STORAGE_ID, JSON.stringify(todos)); get: function () {
} return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
}; },
});
put: function (todos) {
localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
}
};
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment