Moved to a more conventional angular 2 structure - seperated bootstrap

examples/angular2/app/app.html

+<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" *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 *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
+				<div class="view">
+					<input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
+					<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
+					<button class="destroy" (click)="remove(todo)"></button>
+				</div>
+				<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" *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" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
+	</footer>
+</section>

examples/angular2/app.js → examples/angular2/app/app.js

@@ -8,7 +8,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var core_1 = require('angular2/core');
-var browser_1 = require('angular2/platform/browser');
 var store_1 = require('./services/store');
 var ESC_KEY = 27;
 var ENTER_KEY = 13;
@@ -50,11 +49,12 @@ var TodoApp = (function () {
     TodoApp = __decorate([
         core_1.Component({
             selector: 'todo-app',
-            template: "\n\t\t<section class=\"todoapp\">\n\t\t\t<header class=\"header\">\n\t\t\t\t<h1>todos</h1>\n\t\t\t\t<input class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus=\"\" #newtodo (keyup)=\"addTodo($event, newtodo)\">\n\t\t\t</header>\n\t\t\t<section class=\"main\" *ngIf=\"todoStore.todos.length > 0\">\n\t\t\t\t<input class=\"toggle-all\" type=\"checkbox\" *ngIf=\"todoStore.todos.length\" #toggleall [checked]=\"todoStore.allCompleted()\" (click)=\"todoStore.setAllTo(toggleall)\">\n\t\t\t\t<ul class=\"todo-list\">\n\t\t\t\t\t<li *ngFor=\"#todo of todoStore.todos\" [class.completed]=\"todo.completed\" [class.editing]=\"todo.editing\">\n\t\t\t\t\t\t<div class=\"view\">\n\t\t\t\t\t\t\t<input class=\"toggle\" type=\"checkbox\" (click)=\"toggleCompletion(todo)\" [checked]=\"todo.completed\">\n\t\t\t\t\t\t\t<label (dblclick)=\"editTodo(todo)\">{{todo.title}}</label>\n\t\t\t\t\t\t\t<button class=\"destroy\" (click)=\"remove(todo)\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<input class=\"edit\" *ngIf=\"todo.editing\" [value]=\"todo.title\" #editedtodo (blur)=\"stopEditing(todo, editedtodo)\" (keyup.enter)=\"updateEditingTodo(editedtodo, todo)\" (keyup.escape)=\"cancelEditingTodo(todo)\">\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\t\t\t<footer class=\"footer\" *ngIf=\"todoStore.todos.length > 0\">\n\t\t\t\t<span class=\"todo-count\"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>\n\t\t\t\t<button class=\"clear-completed\" *ngIf=\"todoStore.getCompleted().length > 0\" (click)=\"removeCompleted()\">Clear completed</button>\n\t\t\t</footer>\n\t\t</section>"
+            templateUrl: 'app/app.html'
         }), 
         __metadata('design:paramtypes', [])
     ], TodoApp);
     return TodoApp;
 })();
-browser_1.bootstrap(TodoApp);
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TodoApp;
 //# sourceMappingURL=app.js.map
\ No newline at end of file

examples/angular2/app.ts → examples/angular2/app/app.ts

 import {Component} from 'angular2/core';
-import {bootstrap} from 'angular2/platform/browser';
 import {TodoStore, Todo} from './services/store';
 
 const ESC_KEY = 27;
@@ -7,32 +6,9 @@ const ENTER_KEY = 13;
 
 @Component({
 	selector: 'todo-app',
-	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" *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 *ngFor="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
-						<div class="view">
-							<input class="toggle" type="checkbox" (click)="toggleCompletion(todo)" [checked]="todo.completed">
-							<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
-							<button class="destroy" (click)="remove(todo)"></button>
-						</div>
-						<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" *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" *ngIf="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
-			</footer>
-		</section>`
+	templateUrl: 'app/app.html'
 })
-class TodoApp {
+export default class TodoApp {
 	todoStore: TodoStore;
 	constructor() {
 		this.todoStore = new TodoStore();
@@ -71,5 +47,3 @@ class TodoApp {
 		}
 	}
 }
-
-bootstrap(TodoApp);

examples/angular2/app/bootstrap.js

+var browser_1 = require('angular2/platform/browser');
+var app_1 = require('./app');
+browser_1.bootstrap(app_1.default);
+//# sourceMappingURL=bootstrap.js.map
\ No newline at end of file

examples/angular2/app/bootstrap.ts

+import {bootstrap} from 'angular2/platform/browser';
+import TodoApp from './app'
+
+bootstrap(TodoApp);

examples/angular2/index.html

@@ -27,12 +27,9 @@
 						format: 'cjs',
 						defaultExtension: 'js'
 					}
-				},
-				map: {
-					'app': './'
 				}
 			});
-			System.import('app/app');
+			System.import('app/bootstrap');
 		</script>
 	</body>
 </html>

examples/angular2/tsconfig.json

@@ -10,6 +10,6 @@
     "noImplicitAny": false
   },
   "files": [
-    "app.ts"
+    "app/bootstrap.ts"
   ]
 }