Merge pull request #760 from passy/angular-ts-xxmas-upgrade

AngularJS+Typescript: Upgrade to 1.2.6

labs/architecture-examples/typescript-angular/bower.json

@@ -2,7 +2,7 @@
   "name": "todomvc-typescript-angular",
   "version": "0.0.0",
   "dependencies": {
-    "angular": "~1.0.5",
+    "angular": "1.2.6",
     "todomvc-common": "~0.1.6"
   }
 }

labs/architecture-examples/typescript-angular/index.html

@@ -19,7 +19,7 @@
 				<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="vm.markAll(allChecked)">
 				<label for="toggle-all">Mark all as complete</label>
 				<ul id="todo-list">
-					<li ng-repeat="todo in todos | filter:statusFilter" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
+					<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
 						<div class="view">
 							<input class="toggle" type="checkbox" ng-model="todo.completed">
 							<label ng-dblclick="vm.editTodo(todo)">{{todo.title}}</label>

labs/architecture-examples/typescript-angular/js/Application.js

@@ -134,11 +134,12 @@ var todos;
         };
 
         TodoCtrl.prototype.addTodo = function () {
-            if (!this.$scope.newTodo.length) {
+            var newTodo = this.$scope.newTodo.trim();
+            if (!newTodo.length) {
                 return;
             }
 
-            this.todos.push(new todos.TodoItem(this.$scope.newTodo, false));
+            this.todos.push(new todos.TodoItem(newTodo, false));
             this.$scope.newTodo = '';
         };
 
@@ -148,6 +149,7 @@ var todos;
 
         TodoCtrl.prototype.doneEditing = function (todoItem) {
             this.$scope.editedTodo = null;
+            todoItem.title = todoItem.title.trim();
             if (!todoItem.title) {
                 this.removeTodo(todoItem);
             }

labs/architecture-examples/typescript-angular/js/Application.ts

@@ -13,4 +13,4 @@ module todos {
             .directive('todoBlur', todoBlur)
             .directive('todoFocus', todoFocus)
             .service('todoStorage', TodoStorage);
-}
\ No newline at end of file
+}

labs/architecture-examples/typescript-angular/js/_all.ts

-/// <reference path='libs/jquery.d.ts' />
-/// <reference path='libs/angular.d.ts' />
+/// <reference path='libs/jquery/jquery.d.ts' />
+/// <reference path='libs/angular/angular.d.ts' />
 /// <reference path='models/TodoItem.ts' />
 /// <reference path='interfaces/ITodoScope.ts' />
 /// <reference path='interfaces/ITodoStorage.ts' />

labs/architecture-examples/typescript-angular/js/controllers/TodoCtrl.js

+/// <reference path='../_all.ts' />
+var todos;
+(function (todos) {
+    'use strict';
+
+    /**
+    * The main controller for the app. The controller:
+    * - retrieves and persists the model via the todoStorage service
+    * - exposes the model to the template and provides event handlers
+    */
+    var TodoCtrl = (function () {
+        // dependencies are injected via AngularJS $injector
+        // controller's name is registered in Application.ts and specified from ng-controller attribute in index.html
+        function TodoCtrl($scope, $location, todoStorage, filterFilter) {
+            var _this = this;
+            this.$scope = $scope;
+            this.$location = $location;
+            this.todoStorage = todoStorage;
+            this.filterFilter = filterFilter;
+            this.todos = $scope.todos = todoStorage.get();
+
+            $scope.newTodo = '';
+            $scope.editedTodo = null;
+
+            // 'vm' stands for 'view model'. We're adding a reference to the controller to the scope
+            // for its methods to be accessible from view / HTML
+            $scope.vm = this;
+
+            // watching for events/changes in scope, which are caused by view/user input
+            // if you subscribe to scope or event with lifetime longer than this controller, make sure you unsubscribe.
+            $scope.$watch('todos', function () {
+                return _this.onTodos();
+            }, true);
+            $scope.$watch('location.path()', function (path) {
+                return _this.onPath(path);
+            });
+
+            if ($location.path() === '')
+                $location.path('/');
+            $scope.location = $location;
+        }
+        TodoCtrl.prototype.onPath = function (path) {
+            this.$scope.statusFilter = (path === '/active') ? { completed: false } : (path === '/completed') ? { completed: true } : null;
+        };
+
+        TodoCtrl.prototype.onTodos = function () {
+            this.$scope.remainingCount = this.filterFilter(this.todos, { completed: false }).length;
+            this.$scope.doneCount = this.todos.length - this.$scope.remainingCount;
+            this.$scope.allChecked = !this.$scope.remainingCount;
+            this.todoStorage.put(this.todos);
+        };
+
+        TodoCtrl.prototype.addTodo = function () {
+            if (!this.$scope.newTodo.length) {
+                return;
+            }
+
+            this.todos.push(new todos.TodoItem(this.$scope.newTodo, false));
+            this.$scope.newTodo = '';
+        };
+
+        TodoCtrl.prototype.editTodo = function (todoItem) {
+            this.$scope.editedTodo = todoItem;
+        };
+
+        TodoCtrl.prototype.doneEditing = function (todoItem) {
+            this.$scope.editedTodo = null;
+            if (!todoItem.title) {
+                this.removeTodo(todoItem);
+            }
+        };
+
+        TodoCtrl.prototype.removeTodo = function (todoItem) {
+            this.todos.splice(this.todos.indexOf(todoItem), 1);
+        };
+
+        TodoCtrl.prototype.clearDoneTodos = function () {
+            this.$scope.todos = this.todos = this.todos.filter(function (todoItem) {
+                return !todoItem.completed;
+            });
+        };
+
+        TodoCtrl.prototype.markAll = function (completed) {
+            this.todos.forEach(function (todoItem) {
+                todoItem.completed = completed;
+            });
+        };
+        TodoCtrl.$inject = [
+            '$scope',
+            '$location',
+            'todoStorage',
+            'filterFilter'
+        ];
+        return TodoCtrl;
+    })();
+    todos.TodoCtrl = TodoCtrl;
+})(todos || (todos = {}));

labs/architecture-examples/typescript-angular/js/controllers/TodoCtrl.ts

@@ -63,11 +63,12 @@ module todos {
 		}
 
 		addTodo() {
-			if (!this.$scope.newTodo.length) {
+			var newTodo : string = this.$scope.newTodo.trim();
+			if (!newTodo.length) {
 				return;
 			}
 
-			this.todos.push(new TodoItem(this.$scope.newTodo, false));
+			this.todos.push(new TodoItem(newTodo, false));
 			this.$scope.newTodo = '';
 		}
 
@@ -77,6 +78,7 @@ module todos {
 
 		doneEditing(todoItem: TodoItem) {
 			this.$scope.editedTodo = null;
+			todoItem.title = todoItem.title.trim();
 			if (!todoItem.title) {
 				this.removeTodo(todoItem);
 			}

labs/architecture-examples/typescript-angular/js/directives/TodoBlur.js

+/// <reference path='../_all.ts' />
+var todos;
+(function (todos) {
+    'use strict';
+
+    /**
+    * Directive that executes an expression when the element it is applied to loses focus.
+    */
+    function todoBlur() {
+        return {
+            link: function ($scope, element, attributes) {
+                element.bind('blur', function () {
+                    $scope.$apply(attributes.todoBlur);
+                });
+            }
+        };
+    }
+    todos.todoBlur = todoBlur;
+})(todos || (todos = {}));

labs/architecture-examples/typescript-angular/js/directives/TodoFocus.js

+/// <reference path='../_all.ts' />
+var todos;
+(function (todos) {
+    'use strict';
+
+    /**
+    * Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
+    */
+    function todoFocus($timeout) {
+        return {
+            link: function ($scope, element, attributes) {
+                $scope.$watch(attributes.todoFocus, function (newval) {
+                    if (newval) {
+                        $timeout(function () {
+                            return element[0].focus();
+                        }, 0, false);
+                    }
+                });
+            }
+        };
+    }
+    todos.todoFocus = todoFocus;
+
+    todoFocus.$inject = ['$timeout'];
+})(todos || (todos = {}));

labs/architecture-examples/typescript-angular/js/interfaces/ITodoScope.js

+/// <reference path='../_all.ts' />

labs/architecture-examples/typescript-angular/js/interfaces/ITodoStorage.js

+/// <reference path='../_all.ts' />

labs/architecture-examples/typescript-angular/js/models/TodoItem.js

+/// <reference path='../_all.ts' />
+var todos;
+(function (todos) {
+    'use strict';
+
+    var TodoItem = (function () {
+        function TodoItem(title, completed) {
+            this.title = title;
+            this.completed = completed;
+        }
+        return TodoItem;
+    })();
+    todos.TodoItem = TodoItem;
+})(todos || (todos = {}));

labs/architecture-examples/typescript-angular/js/services/TodoStorage.js

+/// <reference path='../_all.ts' />
+var todos;
+(function (todos) {
+    'use strict';
+
+    /**
+    * Services that persists and retrieves TODOs from localStorage.
+    */
+    var TodoStorage = (function () {
+        function TodoStorage() {
+            this.STORAGE_ID = 'todos-angularjs-typescript';
+        }
+        TodoStorage.prototype.get = function () {
+            return JSON.parse(localStorage.getItem(this.STORAGE_ID) || '[]');
+        };
+
+        TodoStorage.prototype.put = function (todos) {
+            localStorage.setItem(this.STORAGE_ID, JSON.stringify(todos));
+        };
+        return TodoStorage;
+    })();
+    todos.TodoStorage = TodoStorage;
+})(todos || (todos = {}));

labs/architecture-examples/typescript-angular/readme.md

@@ -42,7 +42,7 @@ It's attractive to people with a background in strongly typed languages, who are
 ### Editors
 A great editor for TypeScript is Visual Studio 2012 with [TypeScript](http://go.microsoft.com/fwlink/?LinkID=266563) and  [Web Essentials 2012](http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6) plugins.
 
-Webstorm is [coming soon](http://joeriks.com/2012/11/20/a-first-look-at-the-typescript-support-in-webstorm-6-eap/).
+Webstorm has [support for TypeScript](http://blog.jetbrains.com/webstorm/2013/11/enjoy-typescript-in-webstorm/) as well.
 
 
 ### Ambient declarations