Permalink
Browse files

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

  • Loading branch information...
ebidel authored and sindresorhus committed May 4, 2012
1 parent 7980e75 commit bdb644a3a48d60d7f67e2a50baa5612b0ec9d92c
@@ -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>
@@ -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;
+ });
+ };
};
@@ -1,34 +0,0 @@
-
-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);
- };
-});
Oops, something went wrong.

0 comments on commit bdb644a

Please sign in to comment.