Skip to content
Browse files

Updating demo to AngularJS 1.0

  • Loading branch information...
1 parent 128d3e5 commit d8e5790e8149f21b3482cde9ef611520d6f67c92 @ebidel committed May 2, 2012
View
37 architecture-examples/angularjs/index.html
@@ -1,5 +1,5 @@
<!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>
@@ -10,44 +10,45 @@
<![endif]-->
</head>
<body>
- <div ng:controller="App.Controllers.TodoController" id="todoapp">
+ <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 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="hasTodos()">
- <input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()">
+ <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" 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">
- <input class="toggle" type="checkbox" name="todo.done">
- <label>{{ todo.title }}</label>
- <a class="destroy" ng:click="removeTodo(todo)"></a>
+ <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 class="edit" type="text" name="todo.title" my:focus="todo.editing" my:blur="finishEditing(todo)">
+ <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="hasTodos()">
- <a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a>
- <div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
+ <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">
- 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>
<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/libs/angular/angular.min.js"></script>
<script src="js/controllers.js"></script>
- <script src="js/directive.js"></script>
</body>
</html>
View
204 architecture-examples/angularjs/js/controllers.js
@@ -1,107 +1,103 @@
/* 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();
+ //$scope.todos = retrieveStore();
+
+ $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));
+ }
+ };
+
+ //not sure if its intended to do so. However, we need a hook to update the store
+ //whenever angular changes any properties
+ //$scope.$watch($scope.todos, updateStore);
+
+ $scope.addTodo = function() {
+ if (this.newTodo.trim().length === 0) {
+ return;
+ }
+
+ $scope.todos.push({
+ title: this.newTodo,
+ done: false,
+ editing: false
+ });
+
+ this.newTodo = '';
+
+ updateStore();
+ };
+
+ $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;
+ }
+ updateStore();
+ };
+
+ $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);
+ }
+ }
+
+ updateStore();
+ };
+
+ $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();
+ updateStore();
+ };
+
+ $scope.markAllDone = function() {
+ var markDone = true;
+ if (!$scope.remainingTodos().length) {
+ markDone = false;
+ }
+ $scope.todos.forEach(function(todo) {
+ todo.done = markDone;
+ });
+ };
};
View
34 architecture-examples/angularjs/js/directive.js
@@ -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);
- };
-});
View
275 architecture-examples/angularjs/js/libs/angular/angular.min.js
150 additions, 125 deletions not shown because the diff is too large. Please use a local Git client to view these changes.

0 comments on commit d8e5790

Please sign in to comment.
Something went wrong with that request. Please try again.