Skip to content

T
todomvc
Commit bdb644a3 authored by Eric Bidelman's avatar Eric Bidelman Committed by Sindre Sorhus
Browse files
Options

Close GH-157: Updating Angular demo to v1.0 of the library.

parent 7980e75e
Hide whitespace changes
Inline Side-by-side
Showing with 290 additions and 310 deletions
architecture-examples/angularjs/index.html
View file @ bdb644a3
<!doctype html>
<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
<html ng-app="todomvc">
<head>
<meta charset="utf-8">
<title>AngularJS - TodoMVC</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script src="../../assets/ie.js"></script>
<![endif]-->
<meta charset="utf-8">
<title>AngularJS - TodoMVC</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script src="../../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<div ng:controller="App.Controllers.TodoController" id="todoapp">
<header>
<h1>Todos</h1>
<form id="todo-form" ng:submit="addTodo()">
<input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?">
</form>
</header>
<section id="main" ng:show="hasTodos()">
<input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng:repeat="todo in todos" my:dblclick="editTodo(todo)" ng:class="(todo.done && ' done ') + (todo.editing && ' editing ')">
<div class="view">
<input class="toggle" type="checkbox" name="todo.done">
<label>{{ todo.title }}</label>
<a class="destroy" ng:click="removeTodo(todo)"></a>
</div>
<form ng:submit="finishEditing(todo)">
<input class="edit" type="text" name="todo.title" my:focus="todo.editing" my:blur="finishEditing(todo)">
</form>
</li>
</ul>
</section>
<footer ng:show="hasTodos()">
<a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a>
<div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
</footer>
</div>
<div id="instructions">
Double-click to edit a todo.
</div>
<div id="credits">
Created by <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>.
</div>
<script src="../../assets/base.js"></script>
<script src="js/booter.js"></script>
<script src="js/libs/angular/angular.min.js" ng:autobind></script>
<script src="js/controllers.js"></script>
<script src="js/directive.js"></script>
<div ng-controller="App.Controllers.TodoController" id="todoapp">
<header>
<h1>Todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input type="text" id="new-todo" name="newTodo" ng-model="newTodo" placeholder="What needs to be done?">
</form>
</header>
<section id="main" ng-show="todos.length">
<input type="checkbox" id="toggle-all" ng-click="markAllDone()" ng-checked="remainingTodos().length == 0">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos" ng-dblclick="editTodo(todo)" ng-class="{done: todo.done, editing: todo.editing}">
<div class="view">
<input type="checkbox" class="toggle" name="todo.done" ng-model="todo.done">
<label>{{todo.title}}</label>
<a class="destroy" ng-click="removeTodo(todo)"></a>
</div>
<form ng-submit="finishEditing(todo)">
<input type="text" class="edit" name="todo.title" ng-model="todo.title" my:blur="finishEditing(todo)">
</form>
</li>
</ul>
</section>
<footer ng-show="todos.length">
<a id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneTodos().length">Clear {{doneTodos().length}} items</a>
<div id="todo-count">
<ng-pluralize count="remainingTodos().length" when="todoForms"></ng-pluralize>
</div>
</footer>
</div>
<div id="instructions">
Double-click to edit a todo.
</div>
<div id="credits">
Credits: <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>, <a href="http://ericbidelman.com">Eric Bidelman</a>
</div>
<script src="../../assets/base.js"></script>
<script src="js/booter.js"></script>
<script src="js/libs/angular/angular.min.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
\ No newline at end of file
architecture-examples/angularjs/js/controllers.js
View file @ bdb644a3
/* App Controllers */
App.Controllers.TodoController = function () {
var self = this;
self.newTodo = "";
var retrieveStore = function() {
var store = localStorage.getItem('todo-angularjs');
return ( store && JSON.parse( store ) ) || [];
};
var updateStore = function() {
var isEditing = angular.Array.count(self.todos, function(x) {
return x.editing;
});
if (!isEditing){
localStorage.setItem('todo-angularjs', JSON.stringify(self.todos));
}
};
//not sure if its intended to do so. However, we need a hook to update the store
//whenever angular changes any properties
self.$watch(updateStore);
self.todos = retrieveStore();
self.addTodo = function() {
if (self.newTodo.trim().length === 0) return;
self.todos.push({
title: self.newTodo,
done: false,
editing: false
});
self.newTodo = "";
};
self.editTodo = function(todo) {
//cancel any active editing operation
angular.forEach(self.todos, function(value) {
value.editing = false;
});
todo.editing = true;
};
self.finishEditing = function(todo) {
if (todo.title.trim().length === 0){
self.removeTodo(todo);
}
else{
todo.editing = false;
}
};
self.removeTodo = function(todo) {
angular.Array.remove(self.todos, todo);
};
var countTodos = function(done) {
return function() {
return angular.Array.count(self.todos, function(x) {
return x.done === (done === "done");
});
}
};
var pluralize = function( count, word ) {
return count === 1 ? word : word + 's';
};
self.remainingTodos = countTodos("undone");
self.finishedTodos = countTodos("done");
self.itemsLeftText = function(){
return pluralize(self.remainingTodos(), 'item') + ' left'
};
self.clearItemsText = function(){
var finishedTodos = self.finishedTodos();
return 'Clear ' + finishedTodos + ' completed ' + pluralize(finishedTodos, 'item');
};
self.clearCompletedItems = function() {
var oldTodos = self.todos;
self.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) self.todos.push(todo);
});
self.allChecked = false;
};
self.toggleAllStates = function(){
angular.forEach(self.todos, function(todo){
todo.done = self.allChecked;
})
};
self.hasFinishedTodos = function() {
return self.finishedTodos() > 0;
};
self.hasTodos = function() {
return self.todos.length > 0;
};
var todomvc = angular.module('todomvc', []);
App.Controllers.TodoController = function($scope) {
$scope.todos = retrieveStore();
// Call updateStore() whenever the todos array changes.
$scope.$watch('todos', updateStore, true);
$scope.todoForms = {
0: "You're done!",
one: '{} item left',
other: '{} items left'
};
function retrieveStore() {
var store = localStorage.getItem('todo-angularjs');
return (store && JSON.parse(store)) || [];
};
function updateStore() {
var isEditing = $scope.todos.filter(function(val) {
return val.editing;
}).length;
if (!isEditing) {
localStorage.setItem('todo-angularjs', JSON.stringify($scope.todos));
}
};
$scope.addTodo = function() {
if (this.newTodo.trim().length === 0) {
return;
}
$scope.todos.push({
title: this.newTodo,
done: false,
editing: false
});
this.newTodo = '';
};
$scope.editTodo = function(todo) {
//cancel any active editing operation
$scope.todos.forEach(function(val) {
val.editing = false;
});
todo.editing = true;
};
$scope.finishEditing = function(todo) {
if (todo.title.trim().length === 0) {
$scope.removeTodo(todo);
} else {
todo.editing = false;
}
};
$scope.removeTodo = function(todo) {
for (var i = 0, len = $scope.todos.length; i < len; ++i) {
if (todo === $scope.todos[i]) {
$scope.todos.splice(i, 1);
}
}
};
$scope.remainingTodos = function() {
return $scope.todos.filter(function(val) {
return !val.done;
});
};
$scope.doneTodos = function() {
return $scope.todos.filter(function(val) {
return val.done;
});
}
$scope.clearDoneTodos = function() {
$scope.todos = $scope.remainingTodos();
};
$scope.markAllDone = function() {
var markDone = true;
if (!$scope.remainingTodos().length) {
markDone = false;
}
$scope.todos.forEach(function(todo) {
todo.done = markDone;
});
};
};
architecture-examples/angularjs/js/directive.js deleted 100644 → 0
View file @ 7980e75e
angular.directive('my:blur', function(expression, compiledElement) {
var compiler = this;
return function(linkElement) {
var scope = this;
linkElement.bind('blur', function(event) {
scope.$apply(expression, linkElement);
event.stopPropagation();
});
};
});
angular.directive('my:dblclick', function(expression, compiledElement) {
var compiler = this;
return function(linkElement) {
var scope = this;
linkElement.bind('dblclick', function(event) {
scope.$apply(expression, linkElement);
event.stopPropagation();
});
};
});
angular.directive("my:focus", function(expression, compiledElement){
return function(element){
this.$watch(expression, function(){
if(angular.formatter.boolean.parse(expression)){
element[0].focus();
element[0].select();
}
}, element);
};
});
architecture-examples/angularjs/js/libs/angular/angular.min.js
View file @ bdb644a3
This source diff could not be displayed because it is too large. You can view the blob instead.
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7