Skip to content

Commit bdb644a

Browse files
ebidelsindresorhus
ebidel
authored and
sindresorhus
committed
Close tastejsGH-157: Updating Angular demo to v1.0 of the library.
1 parent 7980e75 commit bdb644a

File tree

4 files changed

+290
-310
lines changed

4 files changed

+290
-310
lines changed

‎architecture-examples/angularjs/index.html

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,54 @@
11
<!doctype html>
2-
<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
2+
<html ng-app="todomvc">
33
<head>
4-
<meta charset="utf-8">
5-
<title>AngularJS - TodoMVC</title>
6-
<link rel="stylesheet" href="css/base.css">
7-
<link rel="stylesheet" href="css/app.css">
8-
<!--[if IE]>
9-
<script src="http://github.com/assets/ie.js"></script>
10-
<![endif]-->
4+
<meta charset="utf-8">
5+
<title>AngularJS - TodoMVC</title>
6+
<link rel="stylesheet" href="css/base.css">
7+
<link rel="stylesheet" href="css/app.css">
8+
<!--[if IE]>
9+
<script src="http://github.com/assets/ie.js"></script>
10+
<![endif]-->
1111
</head>
1212
<body>
13-
<div ng:controller="App.Controllers.TodoController" id="todoapp">
14-
<header>
15-
<h1>Todos</h1>
16-
<form id="todo-form" ng:submit="addTodo()">
17-
<input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?">
18-
</form>
19-
</header>
20-
<section id="main" ng:show="hasTodos()">
21-
<input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()">
22-
<label for="toggle-all">Mark all as complete</label>
23-
<ul id="todo-list">
24-
<li ng:repeat="todo in todos" my:dblclick="editTodo(todo)" ng:class="(todo.done && ' done ') + (todo.editing && ' editing ')">
25-
<div class="view">
26-
<input class="toggle" type="checkbox" name="todo.done">
27-
<label>{{ todo.title }}</label>
28-
<a class="destroy" ng:click="removeTodo(todo)"></a>
29-
</div>
30-
<form ng:submit="finishEditing(todo)">
31-
<input class="edit" type="text" name="todo.title" my:focus="todo.editing" my:blur="finishEditing(todo)">
32-
</form>
33-
</li>
34-
</ul>
35-
</section>
36-
<footer ng:show="hasTodos()">
37-
<a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a>
38-
<div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
39-
</footer>
40-
</div>
41-
<div id="instructions">
42-
Double-click to edit a todo.
43-
</div>
44-
<div id="credits">
45-
Created by <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>.
46-
</div>
47-
<script src="../../assets/base.js"></script>
48-
<script src="js/booter.js"></script>
49-
<script src="js/libs/angular/angular.min.js" ng:autobind></script>
50-
<script src="js/controllers.js"></script>
51-
<script src="js/directive.js"></script>
13+
<div ng-controller="App.Controllers.TodoController" id="todoapp">
14+
<header>
15+
<h1>Todos</h1>
16+
<form id="todo-form" ng-submit="addTodo()">
17+
<input type="text" id="new-todo" name="newTodo" ng-model="newTodo" placeholder="What needs to be done?">
18+
</form>
19+
</header>
20+
<section id="main" ng-show="todos.length">
21+
<input type="checkbox" id="toggle-all" ng-click="markAllDone()" ng-checked="remainingTodos().length == 0">
22+
<label for="toggle-all">Mark all as complete</label>
23+
<ul id="todo-list">
24+
<li ng-repeat="todo in todos" ng-dblclick="editTodo(todo)" ng-class="{done: todo.done, editing: todo.editing}">
25+
<div class="view">
26+
<input type="checkbox" class="toggle" name="todo.done" ng-model="todo.done">
27+
<label>{{todo.title}}</label>
28+
<a class="destroy" ng-click="removeTodo(todo)"></a>
29+
</div>
30+
<form ng-submit="finishEditing(todo)">
31+
<input type="text" class="edit" name="todo.title" ng-model="todo.title" my:blur="finishEditing(todo)">
32+
</form>
33+
</li>
34+
</ul>
35+
</section>
36+
<footer ng-show="todos.length">
37+
<a id="clear-completed" ng-click="clearDoneTodos()" ng-show="doneTodos().length">Clear {{doneTodos().length}} items</a>
38+
<div id="todo-count">
39+
<ng-pluralize count="remainingTodos().length" when="todoForms"></ng-pluralize>
40+
</div>
41+
</footer>
42+
</div>
43+
<div id="instructions">
44+
Double-click to edit a todo.
45+
</div>
46+
<div id="credits">
47+
Credits: <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>, <a href="http://ericbidelman.com">Eric Bidelman</a>
48+
</div>
49+
<script src="../../assets/base.js"></script>
50+
<script src="js/booter.js"></script>
51+
<script src="js/libs/angular/angular.min.js"></script>
52+
<script src="js/controllers.js"></script>
5253
</body>
5354
</html>

‎architecture-examples/angularjs/js/controllers.js

Lines changed: 92 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,95 @@
11
/* App Controllers */
22

3-
App.Controllers.TodoController = function () {
4-
var self = this;
5-
6-
self.newTodo = "";
7-
8-
var retrieveStore = function() {
9-
var store = localStorage.getItem('todo-angularjs');
10-
return ( store && JSON.parse( store ) ) || [];
11-
};
12-
13-
var updateStore = function() {
14-
var isEditing = angular.Array.count(self.todos, function(x) {
15-
return x.editing;
16-
});
17-
if (!isEditing){
18-
localStorage.setItem('todo-angularjs', JSON.stringify(self.todos));
19-
}
20-
};
21-
22-
//not sure if its intended to do so. However, we need a hook to update the store
23-
//whenever angular changes any properties
24-
self.$watch(updateStore);
25-
26-
self.todos = retrieveStore();
27-
28-
self.addTodo = function() {
29-
if (self.newTodo.trim().length === 0) return;
30-
31-
self.todos.push({
32-
title: self.newTodo,
33-
done: false,
34-
editing: false
35-
});
36-
self.newTodo = "";
37-
};
38-
39-
self.editTodo = function(todo) {
40-
//cancel any active editing operation
41-
angular.forEach(self.todos, function(value) {
42-
value.editing = false;
43-
});
44-
todo.editing = true;
45-
};
46-
47-
self.finishEditing = function(todo) {
48-
if (todo.title.trim().length === 0){
49-
self.removeTodo(todo);
50-
}
51-
else{
52-
todo.editing = false;
53-
}
54-
};
55-
56-
self.removeTodo = function(todo) {
57-
angular.Array.remove(self.todos, todo);
58-
};
59-
60-
var countTodos = function(done) {
61-
return function() {
62-
return angular.Array.count(self.todos, function(x) {
63-
return x.done === (done === "done");
64-
});
65-
}
66-
};
67-
68-
var pluralize = function( count, word ) {
69-
return count === 1 ? word : word + 's';
70-
};
71-
72-
self.remainingTodos = countTodos("undone");
73-
74-
self.finishedTodos = countTodos("done");
75-
76-
self.itemsLeftText = function(){
77-
return pluralize(self.remainingTodos(), 'item') + ' left'
78-
};
79-
80-
self.clearItemsText = function(){
81-
var finishedTodos = self.finishedTodos();
82-
return 'Clear ' + finishedTodos + ' completed ' + pluralize(finishedTodos, 'item');
83-
};
84-
85-
self.clearCompletedItems = function() {
86-
var oldTodos = self.todos;
87-
self.todos = [];
88-
angular.forEach(oldTodos, function(todo) {
89-
if (!todo.done) self.todos.push(todo);
90-
});
91-
self.allChecked = false;
92-
};
93-
94-
self.toggleAllStates = function(){
95-
angular.forEach(self.todos, function(todo){
96-
todo.done = self.allChecked;
97-
})
98-
};
99-
100-
self.hasFinishedTodos = function() {
101-
return self.finishedTodos() > 0;
102-
};
103-
104-
self.hasTodos = function() {
105-
return self.todos.length > 0;
106-
};
3+
var todomvc = angular.module('todomvc', []);
4+
5+
App.Controllers.TodoController = function($scope) {
6+
$scope.todos = retrieveStore();
7+
8+
// Call updateStore() whenever the todos array changes.
9+
$scope.$watch('todos', updateStore, true);
10+
11+
$scope.todoForms = {
12+
0: "You're done!",
13+
one: '{} item left',
14+
other: '{} items left'
15+
};
16+
17+
function retrieveStore() {
18+
var store = localStorage.getItem('todo-angularjs');
19+
return (store && JSON.parse(store)) || [];
20+
};
21+
22+
function updateStore() {
23+
var isEditing = $scope.todos.filter(function(val) {
24+
return val.editing;
25+
}).length;
26+
27+
if (!isEditing) {
28+
localStorage.setItem('todo-angularjs', JSON.stringify($scope.todos));
29+
}
30+
};
31+
32+
$scope.addTodo = function() {
33+
if (this.newTodo.trim().length === 0) {
34+
return;
35+
}
36+
37+
$scope.todos.push({
38+
title: this.newTodo,
39+
done: false,
40+
editing: false
41+
});
42+
43+
this.newTodo = '';
44+
};
45+
46+
$scope.editTodo = function(todo) {
47+
//cancel any active editing operation
48+
$scope.todos.forEach(function(val) {
49+
val.editing = false;
50+
});
51+
todo.editing = true;
52+
};
53+
54+
$scope.finishEditing = function(todo) {
55+
if (todo.title.trim().length === 0) {
56+
$scope.removeTodo(todo);
57+
} else {
58+
todo.editing = false;
59+
}
60+
};
61+
62+
$scope.removeTodo = function(todo) {
63+
for (var i = 0, len = $scope.todos.length; i < len; ++i) {
64+
if (todo === $scope.todos[i]) {
65+
$scope.todos.splice(i, 1);
66+
}
67+
}
68+
};
69+
70+
$scope.remainingTodos = function() {
71+
return $scope.todos.filter(function(val) {
72+
return !val.done;
73+
});
74+
};
75+
76+
$scope.doneTodos = function() {
77+
return $scope.todos.filter(function(val) {
78+
return val.done;
79+
});
80+
}
81+
82+
$scope.clearDoneTodos = function() {
83+
$scope.todos = $scope.remainingTodos();
84+
};
85+
86+
$scope.markAllDone = function() {
87+
var markDone = true;
88+
if (!$scope.remainingTodos().length) {
89+
markDone = false;
90+
}
91+
$scope.todos.forEach(function(todo) {
92+
todo.done = markDone;
93+
});
94+
};
10795
};

‎architecture-examples/angularjs/js/directive.js

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)