Updated to Angular 2 beta

Updated app to Angular 2 beta
  + Removed @view decorator
  + Changed directives from snake-case to camel-case
  + Added new dependency to Rx
  + Removed olf dependency to traceur (not sure this was actually needed?)

Changes to build process
 + Moved typescript configration to tsconfig.json in order to make it a little easier to understand / visualise

Updated README

examples/angular2/.gitignore

@@ -1,36 +1,33 @@
 node_modules/.bin
 
+# ignore the source / documentation of each node module, but retain the
+# distribution builds
+
 node_modules/node-uuid
 !node_modules/node-uuid/uuid.js
 
 node_modules/store.js
-node_modules/store.js/store.js
-
-node_modules/systemjs/bower.json
-node_modules/systemjs/.npmignore
-node_modules/systemjs/.agignore
-node_modules/systemjs/test
-node_modules/systemjs/package.json
-node_modules/systemjs/LICENSE
-node_modules/systemjs/Makefile
-node_modules/systemjs/README.md
-node_modules/systemjs/lib
-node_modules/systemjs/node_modules
-node_modules/systemjs/dist/
-!node_modules/systemjs/dist/system.js.map
-!node_modules/systemjs/dist/system.js
-!node_modules/systemjs/dist/es6-module-loader.js
+!node_modules/store.js/store.js
 
-node_modules/tsd
-node_modules/typescript
+node_modules/systemjs
+!node_modules/systemjs/dist/system.src.js
 
 node_modules/todomvc-app-css
 !node_modules/todomvc-app-css/index.css
 
 node_modules/todomvc-common
 !node_modules/todomvc-common/base.css
 
-node_modules/bower-traceur-runtime
-node_modules/bower-traceur-runtime/traceur-runtime.js
+node_modules/angular2
+!node_modules/angular2/bundles/angular2-polyfills.js
+!node_modules/angular2/bundles/angular2.dev.js
+
+node_modules/rxjs
+!node_modules/rxjs/bundles/Rx.js
+
+# Ignore development dependencies
+node_modules/tsd
+node_modules/typescript
+
 
 typings

examples/angular2/app.ts

@@ -1,37 +1,34 @@
-/// <reference path="typings/angular2/angular2.d.ts" />
-import {Component, View, bootstrap, NgIf, NgFor} from 'angular2/angular2';
-import {TodoStore, Todo} from 'services/store';
+import {Component} from 'angular2/core';
+import {bootstrap} from 'angular2/platform/browser';
+import {TodoStore, Todo} from './services/store';
 
 const ESC_KEY = 27;
 const ENTER_KEY = 13;
 
 @Component({
 	selector: 'todo-app',
-})
-@View({
-	directives: [NgIf, NgFor],
 	template: `
 		<section class="todoapp">
 			<header class="header">
 				<h1>todos</h1>
 				<input class="new-todo" placeholder="What needs to be done?" autofocus="" #newtodo (keyup)="addTodo($event, newtodo)">
 			</header>
-			<section class="main" *ng-if="todoStore.todos.length > 0">
-				<input class="toggle-all" type="checkbox" *ng-if="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall)">
+			<section class="main" *ngIf="todoStore.todos.length > 0">
+				<input class="toggle-all" type="checkbox" *ngIf="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall)">
 				<ul class="todo-list">
-					<li *ng-for="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
+					<li *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
 						<div class="view">
 							<input class="toggle" type="checkbox" (click)="toggleCompletion(todo.uid)" [checked]="todo.completed">
 							<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
 							<button class="destroy" (click)="remove(todo.uid)"></button>
 						</div>
-						<input class="edit" *ng-if="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo)" (keyup.enter)="updateEditingTodo(editedtodo, todo)" (keyup.escape)="cancelEditingTodo(todo)">
+						<input class="edit" *ngIf="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo)" (keyup.enter)="updateEditingTodo(editedtodo, todo)" (keyup.escape)="cancelEditingTodo(todo)">
 					</li>
 				</ul>
 			</section>
-			<footer class="footer" *ng-if="todoStore.todos.length > 0">
+			<footer class="footer" *ngIf="todoStore.todos.length > 0">
 				<span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
-				<button class="clear-completed" *ng-if="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
+				<button class="clear-completed" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
 			</footer>
 		</section>`
 })

examples/angular2/index.html

@@ -5,10 +5,10 @@
 		<title>Angular2 • TodoMVC</title>
 		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
 		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
-		<script src="node_modules/bower-traceur-runtime/traceur-runtime.js"></script>
-		<script src="node_modules/systemjs/dist/system.js"></script>
-		<script src="node_modules/store.js/store.js"></script>
-		<script src="vendor/angular2.dev.js"></script>
+		<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
+		<script src="node_modules/systemjs/dist/system.src.js"></script>
+		<script src="node_modules/rxjs/bundles/Rx.js"></script>
+		<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
 	</head>
 	<body>
 		<todo-app></todo-app>
@@ -21,8 +21,20 @@
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
 		<script>
-			System.paths['node-uuid'] = 'node_modules/node-uuid/uuid.js';
-			System.import('app');
+			System.config({
+				packages: {
+					'app': {
+						format: 'cjs',
+						defaultExtension: 'js'
+					}
+				},
+				map: {
+					'node-uuid': 'node_modules/node-uuid/uuid.js',
+					'store.js': 'node_modules/store.js/store.js',
+					'app': './',
+				}
+			});
+			System.import('app/app');
 		</script>
 	</body>
 </html>