Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updating Angular demo to v1.0 of the library #157

Closed
wants to merge 3 commits into from
Closed

Updating Angular demo to v1.0 of the library #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8e5790
Updating demo to AngularJS 1.0
ebidel May 3, 2012
386f29f
Converting tabs to spaces
ebidel May 3, 2012
1fb77fb
Using watch instead of explicit calls
ebidel May 3, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
95 changes: 48 additions & 47 deletions architecture-examples/angularjs/index.html
View file
Open in desktop
@@ -1,53 +1,54 @@
<!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>
196 changes: 92 additions & 104 deletions architecture-examples/angularjs/js/controllers.js
View file
Open in desktop
@@ -1,107 +1,95 @@
/* 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;
});
};
};
34 changes: 0 additions & 34 deletions architecture-examples/angularjs/js/directive.js
View file
Open in desktop

This file was deleted.