Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2.0 - Core concepts

DaFED
September 10, 2015

Angular 2.0 - Core concepts

DaFED#36
Speaker: Dušan Stanković
Angular je možda jedan od najpoznatijih framework-a u moru JavaScript framework-a. S obzirom da je u prethodnih nekoliko godina web eksponencijalno evoluirao, javila se potreba za boljom i moćnijom alatkom koja će pratiti najnovije web standarde. Iako još uvek u alfa fazi, Angular 2.0 uskoro dolazi i obećava da će popuniti nedostatke njegovog prethodnika i zadovoljiti trenutne potrebe tržišta.

DaFED

September 10, 2015
Tweet

More Decks by DaFED

Other Decks in Technology

Transcript

  1. 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...)
  2. 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
  3. Change detection Change detection Monomorfni vs polimorfni kod 1 klasa

    po komponenti za change detection 3-10x brže Immutable Observable
  4. Komponenta Komponenta import {Component, View, bootstrap} from 'angular2/angular2'; @Component({ selector:

    'dafed-app' }) @View({ template: `<h1>Dobrodosli na predavanje {{name}}</h1>` }) class DafedApp{ name: string; constructor(){ this.name = "Angular 2.0 - core concepts"; } } bootstrap(DafedApp); Type anotacije Meta anotacije
  5. 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: "<h1>Dobrodosli na predavanje {{name}}</h1>" }), __metadata('design:paramtypes', []) ], DafedApp); return DafedApp; })(); angular2_1.bootstrap(DafedApp);
  6. Komunikacija Komunikacija DOM eventi umesto event na scope-u DI <predavanja>

    <predavanje title="Angular 2.0">...</predavanje> <predavanje title="ReactJS">...</predavanje> </predavanja> @Component({ selector: 'predavanja' }) @View({ templateUrl: 'views/predavanja.html' }) class Predavanja { lista: QueryList<Predavanje> constructor(@Query(Predavanje) lista:QueryList<Predavanje>) { this.lista = lista; } }
  7. 1.x 2.0 Model View Controller View Controller Directive DI: Service,

    Provider, Factory, Value... Directive View Component Injectable Model
  8. Element property binding Element property binding import {Component, View, bootstrap}

    from 'angular2/angular2'; @Component({ selector: 'dafed-prijava' }) @View({ template: `<h1>Prijavi se za Dafed</h1> <input type="text" [value]="defaultValue"/> <button [type]="buttonType">Prijavi se odmah</button> ` }) export class DafedComponent{ defaultValue: string; buttonType: string; constructor(){ this.defaultValue = "Pera Kojot"; this.buttonType = "submit"; } }
  9. Event bindings Event bindings import {Component, View, bootstrap} from 'angular2/angular2';

    @Component({ selector: 'dafed-prijava' }) @View({ template: `<h1>Prijavi se za Dafed</h1> <button (click)="prijaviSe($event)" (obavesti)="obavestiKorisnika()"> Prijavi se odmah</button>` }) export class DafedPrijavaComponent{ prijaviSe(event) { event.currentTarget.dispatchEvent(new Event('obavesti')); } obavestiKorisnika(){ alert("Uspesno prijavljen"); } }
  10. Direktive Direktive import PassInput from './pass.js'; @Component({ selector: 'dafed-login' })

    @View({ template: ` <input type="password" (pass-match)="onPassOk($event)"> 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'); } } }