app.Todo = Backbone.Model.extend({

    defaults: {
        title: '',
        completed: false
    },
    toggle: function () {
	this.save({
	    completed: !this.get('completed')
        });
    }
});

app.TodoView = Backbone.View.extend({
  template: `<div class="view">
      <input class="toggle" type="checkbox" 
        <%= completed?'checked':'' %>>
      <label><%- title %></label>
      <button class="destroy"></button>
    </div>
    <input class="edit" value="<%- title %>`,

  events: {
    'click .toggle': 'toggleCompleted',
  }

  initialize: function () {
    this.listenTo(this.model, 'change', this.render);
  },

  render: function () {
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  },

  toggleCompleted: function () {
    this.model.toggle();
  },
})

<div>
    Name: {{input type="text" value=name placeholder="Enter your name"}}
</div>
<div class="text">
    <p>My name is, <strong>{{name}}</strong> and I want to learn Ember!</p>
</div>
<button {{action changeName}}>Change Name to Void Canvas</button>

App = Ember.Application.create();


App.ApplicationController = Ember.Controller.extend({
  actions:{
    changeName:function(){
      this.set('name','Andrei Antal');
    }
  }
});

<div ng-controller="app">
    <input ng-model="a">
    <div>{{b}}</div>
</div>

app.controller('App', function() {
    $scope.a = 1;
    $scope.b = 2;
    $scope.c = 3;
});

var vm = new Vue({
  data: {
    // declare message with an empty value
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// set `message` later
vm.message = 'Hello!'

@Component({
    selector: 'todo-item',
    template: `
      <div class="todo noselect">
        {{todo.owner.firstname}} - {{todo.description}} <br />
        completed: {{todo.completed}}
      </div>
      <button (click)="onToggle()">COMPLETE</button>`
})
export class TodoItem {
    @Input()
    todo:Todo;

    @Output()
    toggle = new EventEmitter<Object>();

    onToggle() {
        this.toggle.emit(this.todo);
    }
}

@Component()
class ContactsApp implements OnInit{

  contacts:Contact[] = [];

  constructor(private http: Http) {}

  ngOnInit() {
    this.http.get('/contacts')
      .map(res => res.json())
      .subscribe(contacts => this.contacts = contacts);
    setTimeout(() => {/*some changes*/})
  }
}

function main() {
  console.log('1')
  setTimeout(() => {
    console.log('2')
  }, 0)
  console.log('3')
}

var myZoneSpec = {
  beforeTask: function () {
    console.log('Before task');
  },
  afterTask: function () {
    console.log('After task');
  }
};

var myZone = zone.fork(myZoneSpec);
myZone.run(main);

// Logs:
// Before task
// 1
// 3
// After task
// Before task
// 2
// After task

function addEventListener(eventName, callback) {
     // call the real addEventListener
     callRealAddEventListener(eventName, function() {
        // first call the original callback
        callback(...);     
        // and then run Angular-specific functionality
        var changed = angular2.runChangeDetection();
        if (changed) {
            angular2.reRenderUIPart();
        }
     });
}

// very simplified version of actual source
class ApplicationRef {

  changeDetectorRefs:ChangeDetectorRef[] = [];

  constructor(private zone: NgZone) {
    this.zone.onTurnDone
      .subscribe(() => this.zone.run(() => this.tick());
  }

  tick() {
    this.changeDetectorRefs
      .forEach((ref) => ref.detectChanges());
  }
}

import {..., ChangeDetectorRef } from '@angular/core';

export class CounterComponent {
	constructor(private cd: ChangeDetectorRef) {}
  ...
  ngOnInit() {
    this.data.subscribe((value) => {
      this._data = value;
      // tell CD to verify this subtree
      this.cd.markForCheck();
    });
  }
}

import {..., ChangeDetectorRef } from '@angular/core';

export class CounterComponent {
    
  constructor(private cd: ChangeDetectorRef) {}
  
  ...
  
  ngOnInit() {
    cd.detach();
    
    // get some stream of data    

    setInterval(() => {
      this.cd.detectChanges();
    }, 5000);
  }
}

export declare abstract class ChangeDetectorRef {
    abstract checkNoChanges(): void;
    abstract detach(): void;
    abstract detectChanges(): void;
    abstract markForCheck(): void;
    abstract reattach(): void;
}
export abstract class ViewRef extends ChangeDetectorRef {
   ...
}

export class AppComponent {
    constructor(cd: ChangeDetectorRef) { ... }