Angular 2.0 Angular 2.0 core concepts 

slack.jsbelgrade.org 

Dušan Stanković Full-stack developer @ Embroker @dulerock [email protected] 

Zašto Angular 1.x? Zašto Angular 1.x? Lak za testiranje (karma + jasmine, protractor) Ekspresivan Dependency Injection Directives Two-way data binding Built-in stuff (promises($q), ajax($http), jqlite...) 

TO BRE! 

Zašto onda Angular 2? Zašto onda Angular 2? Performanse (change-detection, template caching...) Web standardi (ES6, Web components...) Lak za razumevanje i korišćenje 

Change detection Change detection Model Directive DOM (graph) Model Component DOM SLOW? SLOW? (tree) 

Change detection Change detection Monomorfni vs polimorfni kod 1 klasa po komponenti za change detection 3-10x brže Immutable Observable 

Komponente Komponente 

Komponenta Komponenta import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'dafed-app' }) @View({ template: `

Dobrodosli na predavanje {{name}}

` }) class DafedApp{ name: string; constructor(){ this.name = "Angular 2.0 - core concepts"; } } bootstrap(DafedApp); Type anotacije Meta anotacije 

Komponenta (ES5) Komponenta (ES5) var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decor switch (arguments.length) { case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target); case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0 case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o } }; var __metadata = (this && this.__metadata) || function (k, v) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metad }; var angular2_1 = require('angular2/angular2'); var DafedApp = (function () { function DafedApp() { this.name = "Angular 2.0 - core concepts"; } DafedApp = __decorate([ angular2_1.Component({ selector: 'dafed-app' }), angular2_1.View({ template: "

Dobrodosli na predavanje {{name}}

" }), __metadata('design:paramtypes', []) ], DafedApp); return DafedApp; })(); angular2_1.bootstrap(DafedApp); 

No content

Komunikacija Komunikacija DOM eventi umesto event na scope-u DI ... ... @Component({ selector: 'predavanja' }) @View({ templateUrl: 'views/predavanja.html' }) class Predavanja { lista: QueryList constructor(@Query(Predavanje) lista:QueryList) { this.lista = lista; } } 

Arhitektura Arhitektura 

1.x 2.0 Model View Controller View Controller Directive DI: Service, Provider, Factory, Value... Directive View Component Injectable Model 

Bindings Bindings 

Element property binding Element property binding import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'dafed-prijava' }) @View({ template: `

Prijavi se za Dafed

Prijavi se odmah ` }) export class DafedComponent{ defaultValue: string; buttonType: string; constructor(){ this.defaultValue = "Pera Kojot"; this.buttonType = "submit"; } } 

Event bindings Event bindings import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector: 'dafed-prijava' }) @View({ template: `

Prijavi se za Dafed

Prijavi se odmah` }) export class DafedPrijavaComponent{ prijaviSe(event) { event.currentTarget.dispatchEvent(new Event('obavesti')); } obavestiKorisnika(){ alert("Uspesno prijavljen"); } } 

TWO-WAY BINDINGS TWO-WAY BINDINGS 

Direktive Direktive import PassInput from './pass.js'; @Component({ selector: 'dafed-login' }) @View({ template: ` directives: [PassInput] }) class DafedLogin { onPassOk(event) { alert('pass has 6 chars'); } } @Directive({ selector: 'input', events: ['passMatch'], hostListeners: { keyup: 'onKeyup($event.target.value)' } }) class PassInput { passMatch:EventEmitter = new EventEmitter(); onKeyup(value) { if(/^[a-zA-Z0-9]{6}$/.test(value)) { this.passMatch.next('matched'); } } } 

Dependency Injection Dependency Injection pre-injectors component injectors element injectors 

PRODUCTION READY? NOT! NOT! 

Hvala! Hvala! Pitanja? Pitanja? @dulerock