Data Binding

<div class='name'>{{author.name}}</div>
                

$scope.$watch(
    "author.name",
    function (newValue, oldValue) {
       // some work
       if(!newValue) {
           author.status = "unknown";
       }
       
    }
);
//$scope.$$watchers.push(...
                

Scope

<div ng-init="phone = 02"> {{ phone }}</div>
<div ng-if="true">
	<button ng-click="phone = 911">
		change phone
	</button>
</div>
    			

<div ng-init="phone = {value: 02}">
        {{phone.value}}
</div>

<div ng-if="true">
    <button ng-click=”phone.value = 911">
        change phone
    </button>
</div>
    			

Dependency injection

function MyController($scope, $window) { // … }
    			

someModule.controller(‘MyController’,
	[‘$scope’,function($scope) { }]);

//or

MyController.$inject = [‘$scope’, ‘$window’];
    			

Components

Before

angular.module('App', [])
.directive('hello-world', function () {
    return {
        restrict: 'E',
        template: 'Hello {{name}}',
        controller: function ($scope) {
            $scope.name = 'World';
        }
    }
})    			

After

import { Component } from 'angular2/core';

@Component({
    selector: 'hello-world',
    template: 'Hello {{name}}!'
})
export class AppComponent {
    constructor() {
        this.name = 'World!';
    }
}
    			

Binding

<todo-cmp [model]="myTodo"></todo-cmp>
				

<todo-cmp [model]="todo"
    (complete)="onCompletingTodo(todo)">
</todo-cmp>
			  

@Component({selector: 'todo-cmp'})
class TodoCmp {
    @Input() model;
    @Output() complete = new EventEmitter();

    onCompletedButton() {
        // this fires an event
        this.complete.next();
    }
}			        

Two-way Data Binding

<input [ngModel]="todo.text"
	(ngModelChange)="todo.text=$event">
</input>
				

<input [(ngModel)]="todo.text"></input>
		

Data flow

Scope

import { Component } from 'angular2/core';

@Component({
    selector: 'my-app',
    template: 'Hello {{name}}!
        <button (click)="clicked()">
		    Change Name
        </button>'
})
export class AppComponent {
    clicked(event) {
        this.name = 'UserName';
    }
}
				

Zones

var myZone = zone.fork({
    beforeTask: function () {},
    afterTask: function () {},
    // many other handlers
});
myZone.run(function () {
    // woo!
});
				

zone.fork().run(function () {
//pseudo code, actually it`s more complicated
//...
    clicked(event) {
        this.name = 'UserName';
    }
//angular change detection
});
				

Dependency injection

class NameService {
    constructor() {
        this.name = 'UserName';
    }

    getName() {
        return this.name;
    }
}				

class App {
    constructor(@Inject(NameService) NameService) {
        this.name = NameService.getName();
    }
}
			  

vs

<dom-module id="hello-world">
    <template>
        <p>Hello {{name}}</p>
    </template>
</dom-module>
<script>
Polymer({
    is: 'hello-world',
    properties: {
        who: 'World'
    }
});
</script>
			  

vs

import React from 'react';

class HelloWorld extends React.Component {
    render() {
        return <p>Hello, world!</p>;
    }
}

export default HelloWorld;
			  

Ng2 syntax

TS, Dart

Single maintainer

vs

jsx

JS

Community