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
Show whitespace changes
Inline Side-by-side
Showing with 290 additions and 310 deletions
architecture-examples/angularjs/index.html
View file @ bdb644a3
<!doctype html> <!doctype html>
<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org"> <html ng-app="todomvc">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>AngularJS - TodoMVC</title> <title>AngularJS - TodoMVC</title>
...@@ -10,44 +10,45 @@ ...@@ -10,44 +10,45 @@
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<div ng:controller="App.Controllers.TodoController" id="todoapp"> <div ng-controller="App.Controllers.TodoController" id="todoapp">
<header> <header>
<h1>Todos</h1> <h1>Todos</h1>
<form id="todo-form" ng:submit="addTodo()"> <form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?"> <input type="text" id="new-todo" name="newTodo" ng-model="newTodo" placeholder="What needs to be done?">
</form> </form>
</header> </header>
<section id="main" ng:show="hasTodos()"> <section id="main" ng-show="todos.length">
<input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()"> <input type="checkbox" id="toggle-all" ng-click="markAllDone()" ng-checked="remainingTodos().length == 0">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
<ul id="todo-list"> <ul id="todo-list">
<li ng:repeat="todo in todos" my:dblclick="editTodo(todo)" ng:class="(todo.done && ' done ') + (todo.editing && ' editing ')"> <li ng-repeat="todo in todos" ng-dblclick="editTodo(todo)" ng-class="{done: todo.done, editing: todo.editing}">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" name="todo.done"> <input type="checkbox" class="toggle" name="todo.done" ng-model="todo.done">
<label>{{ todo.title }}</label> <label>{{todo.title}}</label>
<a class="destroy" ng:click="removeTodo(todo)"></a> <a class="destroy" ng-click="removeTodo(todo)"></a>
</div> </div>
<form ng:submit="finishEditing(todo)"> <form ng-submit="finishEditing(todo)">
<input class="edit" type="text" name="todo.title" my:focus="todo.editing" my:blur="finishEditing(todo)"> <input type="text" class="edit" name="todo.title" ng-model="todo.title" my:blur="finishEditing(todo)">
</form> </form>
</li> </li>
</ul> </ul>
</section> </section>
<footer ng:show="hasTodos()"> <footer ng-show="todos.length">
<a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a> <a id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneTodos().length">Clear {{doneTodos().length}} items</a>
<div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div> <div id="todo-count">
<ng-pluralize count="remainingTodos().length" when="todoForms"></ng-pluralize>
</div>
</footer> </footer>
</div> </div>
<div id="instructions"> <div id="instructions">
Double-click to edit a todo. Double-click to edit a todo.
</div> </div>
<div id="credits"> <div id="credits">
Created by <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>. Credits: <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>, <a href="http://ericbidelman.com">Eric Bidelman</a>
</div> </div>
<script src="../../assets/base.js"></script> <script src="../../assets/base.js"></script>
<script src="js/booter.js"></script> <script src="js/booter.js"></script>
<script src="js/libs/angular/angular.min.js" ng:autobind></script> <script src="js/libs/angular/angular.min.js"></script>
<script src="js/controllers.js"></script> <script src="js/controllers.js"></script>
<script src="js/directive.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
architecture-examples/angularjs/js/controllers.js
View file @ bdb644a3
/* App Controllers */ /* App Controllers */
App.Controllers.TodoController = function () { var todomvc = angular.module('todomvc', []);
var self = this;
self.newTodo = ""; App.Controllers.TodoController = function($scope) {
$scope.todos = retrieveStore();
var retrieveStore = function() { // Call updateStore() whenever the todos array changes.
var store = localStorage.getItem('todo-angularjs'); $scope.$watch('todos', updateStore, true);
return ( store && JSON.parse( store ) ) || [];
$scope.todoForms = {
0: "You're done!",
one: '{} item left',
other: '{} items left'
}; };
var updateStore = function() { function retrieveStore() {
var isEditing = angular.Array.count(self.todos, function(x) { var store = localStorage.getItem('todo-angularjs');
return x.editing; return (store && JSON.parse(store)) || [];
});
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 function updateStore() {
//whenever angular changes any properties var isEditing = $scope.todos.filter(function(val) {
self.$watch(updateStore); return val.editing;
}).length;
self.todos = retrieveStore(); if (!isEditing) {
localStorage.setItem('todo-angularjs', JSON.stringify($scope.todos));
}
};
self.addTodo = function() { $scope.addTodo = function() {
if (self.newTodo.trim().length === 0) return; if (this.newTodo.trim().length === 0) {
return;
}
self.todos.push({ $scope.todos.push({
title: self.newTodo, title: this.newTodo,
done: false, done: false,
editing: false editing: false
}); });
self.newTodo = "";
this.newTodo = '';
}; };
self.editTodo = function(todo) { $scope.editTodo = function(todo) {
//cancel any active editing operation //cancel any active editing operation
angular.forEach(self.todos, function(value) { $scope.todos.forEach(function(val) {
value.editing = false; val.editing = false;
}); });
todo.editing = true; todo.editing = true;
}; };
self.finishEditing = function(todo) { $scope.finishEditing = function(todo) {
if (todo.title.trim().length === 0){ if (todo.title.trim().length === 0) {
self.removeTodo(todo); $scope.removeTodo(todo);
} } else {
else{
todo.editing = false; todo.editing = false;
} }
}; };
self.removeTodo = function(todo) { $scope.removeTodo = function(todo) {
angular.Array.remove(self.todos, todo); for (var i = 0, len = $scope.todos.length; i < len; ++i) {
}; if (todo === $scope.todos[i]) {
$scope.todos.splice(i, 1);
var countTodos = function(done) { }
return function() {
return angular.Array.count(self.todos, function(x) {
return x.done === (done === "done");
});
} }
}; };
var pluralize = function( count, word ) { $scope.remainingTodos = function() {
return count === 1 ? word : word + 's'; return $scope.todos.filter(function(val) {
}; return !val.done;
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(){ $scope.doneTodos = function() {
angular.forEach(self.todos, function(todo){ return $scope.todos.filter(function(val) {
todo.done = self.allChecked; return val.done;
}) });
}; }
self.hasFinishedTodos = function() { $scope.clearDoneTodos = function() {
return self.finishedTodos() > 0; $scope.todos = $scope.remainingTodos();
}; };
self.hasTodos = function() { $scope.markAllDone = function() {
return self.todos.length > 0; 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