Angular 2 es6 + atscript syntax binding

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    
		
		<main-content></main-content>
		
		<script src="https://cdn.rawgit.com/angular/quickstart/master/dist/es6-shim.js"></script>
 <script type="text/javascript">
				System.paths = {
						'angular2/*': 'https://cdn.rawgit.com/angular/quickstart/master/angular2/*.js', // Angular
						'rtts_assert/*': 'https://cdn.rawgit.com/angular/quickstart/master/rtts_assert/*.js', //Runtime assertions
			    	'body': 'body.es6', 
						'header': 'header.es6', 
						'todos': 'todos.es6', 
						'app': 'app.es6' 
				};

				// Kick off the application
				System.import('app')
						.then(function (module) {
								return module.main();
						});
		</script>
 
  </body>

</html>

// Code goes here

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #eaeaea;
  color: #4d4d4d;
  width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
@charset "utf-8";

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

button,
input[type="checkbox"] {
  outline: none;
}

.hidden {
  display: none;
}

.visible {
  display: block !important;
}

#todoapp {
  background: #fff;
  margin: 130px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
  0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#todoapp input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp h1 {
  position: absolute;
  top: -155px;
  width: 100%;
  font-size: 100px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.15);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  -ms-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

#new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  outline: none;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

#new-todo {
  padding: 16px 16px 16px 60px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}

#main {
  position: relative;
  z-index: 2;
  border-top: 1px solid #e6e6e6;
}

label[for='toggle-all'] {
  display: none;
}

#toggle-all {
  position: absolute;
  top: -55px;
  left: -12px;
  width: 60px;
  height: 34px;
  text-align: center;
  border: none; /* Mobile Safari */
}

#toggle-all:before {
  content: '❯';
  font-size: 22px;
  color: #e6e6e6;
  padding: 10px 27px 10px 27px;
}

#toggle-all:checked:before {
  color: #737373;
}

#todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
}

#todo-list li:last-child {
  border-bottom: none;
}

#todo-list li.editing {
  border-bottom: none;
  padding: 0;
}

#todo-list li.editing .edit {
  display: block;
  width: 506px;
  padding: 13px 17px 12px 17px;
  margin: 0 0 0 43px;
}

#todo-list li.editing .view {
  display: none;
}

#todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

#todo-list li .toggle:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}

#todo-list li .toggle:checked:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}

#todo-list li label {
  white-space: pre;
  word-break: break-word;
  padding: 15px 60px 15px 15px;
  margin-left: 45px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

#todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

#todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

#todo-list li .destroy:hover {
  color: #af5b5e;
}

#todo-list li .destroy:after {
  content: '×';
}

#todo-list li:hover .destroy {
  display: block;
}

#todo-list li .edit {
  display: none;
}

#todo-list li.editing:last-child {
  margin-bottom: -1px;
}

#footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

#footer:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
  0 8px 0 -3px #f6f6f6,
  0 9px 1px -3px rgba(0, 0, 0, 0.2),
  0 16px 0 -6px #f6f6f6,
  0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

#todo-count {
  float: left;
  text-align: left;
}

#todo-count strong {
  font-weight: 300;
}

#filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

#filters li {
  display: inline;
}

#filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

#filters li a.selected,
#filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

#filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

#clear-completed,
html #clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
  visibility: hidden;
  position: relative;
}

#clear-completed::after {
  visibility: visible;
  content: 'Clear completed';
  position: absolute;
  right: 0;
  white-space: nowrap;
}

#clear-completed:hover::after {
  text-decoration: underline;
}

#info {
  margin: 65px auto 0;
  color: #bfbfbf;
  font-size: 10px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

#info p {
  line-height: 1;
}

#info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

#info a:hover {
  text-decoration: underline;
}

/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #toggle-all,
  #todo-list li .toggle {
    background: none;
  }

  #todo-list li .toggle {
    height: 40px;
  }

  #toggle-all {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-appearance: none;
    appearance: none;
  }
}

@media (max-width: 430px) {
  #footer {
    height: 50px;
  }

  #filters {
    bottom: 10px;
  }
}

Leverages github.com/angular/quickstart

import {bootstrap} from 'angular2/angular2';
import {TodoApp} from 'body';

export function main() {
  return bootstrap(TodoApp);
}

import {bootstrap, Component, Template, For} from 'angular2/angular2';
import {Store, Todo, TodoFactory} from 'todos';
import { HeaderContent } from 'header';

@Component({
  selector: 'main-content',
  services: [
    Store,
    TodoFactory
  ]
})
@Template({
  url: 'body.html',
  directives: [HeaderContent, For]
})


export class TodoApp { 
  todoStore: Store;
  todoEdit: Todo;
  factory: TodoFactory;
  headerContent: HeaderContent;
  testcontent: string;
  
  constructor(store: Store, factory: TodoFactory) {
    this.todoStore = store;
    this.todoEdit = null;
    this.factory = factory;
    this.headerContent = new HeaderContent();
    this.testcontent= 'test';
  }

  enterTodo($event, inputElement) {
    if($event.which === 13) { // ENTER_KEY
      this.addTodo(inputElement.value);
      inputElement.value = '';
    }
  }

  editTodo(todo: Todo) {
    this.todoEdit = todo;
  }

  doneEditing($event, todo: Todo) {
  this.testcontent = 'change1';
this.headerContent.updateTitle("test2");
    var which = $event.which;
    var target = $event.target;
    if(which === 13) {
      todo.title = target.value;
      
  alert(target.value);
  
      this.headerContent.updateTitle(target.value);
      this.todoStore.save(todo);
      this.todoEdit = null;
    } else if (which === 27) {
      this.todoEdit = null;
      target.value = todo.title;
    }
  }

  addTodo(newTitle: string) {
    this.todoStore.add(this.factory.create(newTitle, false));
  }

  completeMe(todo: Todo) {
    todo.completed = !todo.completed;
  }

  deleteMe(todo: Todo) {
    this.todoStore.remove(todo);
  }

  toggleAll($event) {
    var isComplete = $event.target.checked;
    this.todoStore.list.forEach((todo) => {
      todo.completed = isComplete;
      this.todoStore.save(todo);
    });
  }

  clearCompleted() {
    this.todoStore.removeBy((todo) => todo.completed);
  }
}

<style>@import "css/base.css";</style>


		<header-content>
		</header-content>

<section id="todoapp">

  <header id="header">
    <input
      id="new-todo"
      placeholder="What needs to be done?"
      autofocus
      #newtodo
      (keyup)="enterTodo($event, newtodo)">
  </header>

  <section id="main">
    <input id="toggle-all" type="checkbox" (click)="toggleAll($event)">
    <label for="toggle-all">Mark all as complete</label>

    <ul id="todo-list">

      <li *for="#todo of todoStore.list">

        <div class="view"
            [class.hidden]="todoEdit == todo">

          <input class="toggle" type="checkbox"
                 (click)="completeMe(todo)"
                 [checked]="todo.completed">

          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
          <button class="destroy" (click)="deleteMe(todo)"></button>

        </div>

        <div>

          <input class="edit"
            [class.visible]="todoEdit == todo"
            [value]="todo.title"
            (keyup)="doneEditing($event, todo)">

        </div>

      </li>
    </ul>

  </section>

  <footer id="footer">
    <span id="todo-count"></span>
    <div [class.hidden]="true"></div>
    <ul id="filters">
      <li>
        <a href="#/" class="selected">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button id="clear-completed" (click)="clearCompleted()">Clear completed</button>
  </footer>

</section>

<footer id="info">
  <p>{{headerContent.title}} Shamelessly ripped off from <a href="http://twitter.com/angularjs">The Angular Team {{testcontent}}</a></p>
</footer>
  <p>Please star and fork if you like it!</p>

import {Component, Template } from 'angular2/angular2';

@Component({
  selector: 'header-content' 
})
@Template({
  url: 'header.html'
})


export class HeaderContent { 
  title: string;
  constructor() {
     this.title = 'todo';
  }
  updateTitle(t: string) {
  alert(t);
     this.title=t;
  }
}


<section id="todoapp">
  <header id="header">
    <h1>{{title}}</h1>
    </header>
    </section>

import {ListWrapper, List} from 'angular2/src/facade/collection';

// base model for RecordStore
export class KeyModel {
  _key: number;
  constructor(key: number) {
    this._key = key;
  }
}

export class Todo extends KeyModel {
  title: string;
  completed: boolean;

  constructor(key: number, theTitle: string, isCompleted: boolean) {
    super(key);
    this.title = theTitle;
    this.completed = isCompleted;
  }
}

export class TodoFactory {
  _uid: number;

  constructor() {
    this._uid = 0;
  }

  nextUid() {
    this._uid = this._uid + 1;
    return this._uid;
  }

  create(title: string, isCompleted: boolean) {
    return new Todo(this.nextUid(), title, isCompleted);
  }
}

// Store manages any generic item that inherits from KeyModel
export class Store {
  list: List<KeyModel>;

  constructor() {
    this.list = [];
  }

  add(record: KeyModel) {
    this.list.push(record);
  }

  remove(record: KeyModel) {
    this.spliceOut(record);
  }

  removeBy(callback: Function) {
    var records = ListWrapper.filter(this.list, callback);
    ListWrapper.removeAll(this.list, records);
  }

  spliceOut(record: KeyModel) {
    var i = this.indexFor(record);
    if( i > -1 ) {
      return this.list.splice(i, 1)[0];
    }
    return null;
  }

  save(record: KeyModel) {
    this.list.indexOf(record);
  }
  
  indexFor(record: KeyModel) {
    return this.list.indexOf(record);
  }

}