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> <!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>
<link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
<!--[if IE]> <!--[if IE]>
<script src="../../assets/ie.js"></script> <script src="../../assets/ie.js"></script>
<![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">
</footer> <ng-pluralize count="remainingTodos().length" when="todoForms"></ng-pluralize>
</div> </div>
<div id="instructions"> </footer>
Double-click to edit a todo. </div>
</div> <div id="instructions">
<div id="credits"> Double-click to edit a todo.
Created by <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>. </div>
</div> <div id="credits">
<script src="../../assets/base.js"></script> Credits: <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>, <a href="http://ericbidelman.com">Eric Bidelman</a>
<script src="js/booter.js"></script> </div>
<script src="js/libs/angular/angular.min.js" ng:autobind></script> <script src="../../assets/base.js"></script>
<script src="js/controllers.js"></script> <script src="js/booter.js"></script>
<script src="js/directive.js"></script> <script src="js/libs/angular/angular.min.js"></script>
<script src="js/controllers.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;
App.Controllers.TodoController = function($scope) {
self.newTodo = ""; $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!",
var updateStore = function() { one: '{} item left',
var isEditing = angular.Array.count(self.todos, function(x) { other: '{} items left'
return x.editing; };
});
if (!isEditing){ function retrieveStore() {
localStorage.setItem('todo-angularjs', JSON.stringify(self.todos)); var store = localStorage.getItem('todo-angularjs');
} return (store && JSON.parse(store)) || [];
}; };
//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) {
self.addTodo = function() { localStorage.setItem('todo-angularjs', JSON.stringify($scope.todos));
if (self.newTodo.trim().length === 0) return; }
};
self.todos.push({
title: self.newTodo, $scope.addTodo = function() {
done: false, if (this.newTodo.trim().length === 0) {
editing: false return;
}); }
self.newTodo = "";
}; $scope.todos.push({
title: this.newTodo,
self.editTodo = function(todo) { done: false,
//cancel any active editing operation editing: false
angular.forEach(self.todos, function(value) { });
value.editing = false;
}); this.newTodo = '';
todo.editing = true; };
};
$scope.editTodo = function(todo) {
self.finishEditing = function(todo) { //cancel any active editing operation
if (todo.title.trim().length === 0){ $scope.todos.forEach(function(val) {
self.removeTodo(todo); val.editing = false;
} });
else{ todo.editing = true;
todo.editing = false; };
}
}; $scope.finishEditing = function(todo) {
if (todo.title.trim().length === 0) {
self.removeTodo = function(todo) { $scope.removeTodo(todo);
angular.Array.remove(self.todos, todo); } else {
}; todo.editing = false;
}
var countTodos = function(done) { };
return function() {
return angular.Array.count(self.todos, function(x) { $scope.removeTodo = function(todo) {
return x.done === (done === "done"); for (var i = 0, len = $scope.todos.length; i < len; ++i) {
}); if (todo === $scope.todos[i]) {
} $scope.todos.splice(i, 1);
}; }
}
var pluralize = function( count, word ) { };
return count === 1 ? word : word + 's';
}; $scope.remainingTodos = function() {
return $scope.todos.filter(function(val) {
self.remainingTodos = countTodos("undone"); return !val.done;
});
self.finishedTodos = countTodos("done"); };
self.itemsLeftText = function(){ $scope.doneTodos = function() {
return pluralize(self.remainingTodos(), 'item') + ' left' return $scope.todos.filter(function(val) {
}; return val.done;
});
self.clearItemsText = function(){ }
var finishedTodos = self.finishedTodos();
return 'Clear ' + finishedTodos + ' completed ' + pluralize(finishedTodos, 'item'); $scope.clearDoneTodos = function() {
}; $scope.todos = $scope.remainingTodos();
};
self.clearCompletedItems = function() {
var oldTodos = self.todos; $scope.markAllDone = function() {
self.todos = []; var markDone = true;
angular.forEach(oldTodos, function(todo) { if (!$scope.remainingTodos().length) {
if (!todo.done) self.todos.push(todo); markDone = false;
}); }
self.allChecked = false; $scope.todos.forEach(function(todo) {
}; todo.done = markDone;
});
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;
};
}; };
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