Angular 2



Знакомый герой, новые надежды




Евгений Гусев

Learning curve

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’];

Angular 2

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

Many thanks to Victor Savkin for this picture
Many thanks to Victor Savkin for this picture

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

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

Demo

Vanilla Angular Directive
Angular 2
many thanks to Dave Smith

Summary

- Follow me: @bunopus
- : @wriketeam
- Slides & info: https://goo.gl/bzWco7

May the
be with you

Questions