Angular 2 fundamentals - Speaker Deck

Slide 1

Slide 1 text

fundamentals Angular 2

Slide 2

Slide 2 text

One framework Many platforms

Slide 3

Slide 3 text

Martin Hochel @martin_hotell github.com/Hotell software engineer @embedit typeof whoAmI

Slide 4

Slide 4 text

Angular 2 Fast Powerful Clean Easy

Slide 5

Slide 5 text

Angular 2 build upon new standards ES 2015 ES next

Slide 6

Slide 6 text

No Types Angular 2 speaks multiple languages Types Javascript ES 5 ES 2015

Slide 7

Slide 7 text

Angular 2 is cross platform

Slide 8

Slide 8 text

Angular 2 renders everywhere App Angular NativeScript React Native Universal Web Worker DOM

Slide 9

Slide 9 text

Angular 2 app architecture Redux

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Let’s learn Angular 2

Slide 12

Slide 12 text

Angular 2 comes with - HTML Parser - Dependency Injection - Router - Forms (data/template driven) - HTTP - Animations - I18N and A11Y - Testing

Slide 13

Slide 13 text

Whoa! So many things!

Slide 14

Slide 14 text

It’s easy, don’t worry

Slide 15

Slide 15 text

Core concepts

Slide 16

Slide 16 text

● Components ● Dependency Injection ● Change Detection Angular 2 Core Concepts

Slide 17

Slide 17 text

Talks Application ● Browse ● Filter ● Watch ● Rate

Slide 18

Slide 18 text

Components

Slide 19

Slide 19 text

Tech Talk App Components ● Root/App ● Filters ● Talks ● Talk

Slide 20

Slide 20 text

Component Tree

Slide 21

Slide 21 text

Root/App Tech Talk App Components Talks Filter Talk Talk

Slide 22

Slide 22 text

What happened to directives? ( curious Angular 1 dev is asking )

Slide 23

Slide 23 text

Component = elements Directive = attributes Template

Slide 24

Slide 24 text

class TalkComponent { talk: Talk; rate: EventEmitter = new EventEmitter(); } talk.componet.ts @Component({ selector: 'talk', templateUrl: 'talk.html', directives: [FormattedRating, WatchButton, RateButton] })

Slide 25

Slide 25 text

What is the @ thing?

Slide 26

Slide 26 text

ES.next decorators class C { @enumerable(false) method() { } } function enumerable(value) { return function (target, key, descriptor) { descriptor.enumerable = value; } }

Slide 27

Slide 27 text

Slide 28

Slide 28 text

{{ talk.title }} {{ talk.speaker }} talk.html class TalkComponent { talk: Talk; rate: EventEmitter = new EventEmitter(); } @Component({ selector: 'talk', templateUrl: 'talk.html', directives: [ FormattedRating, WatchButton, RateButton ] })

Slide 29

Slide 29 text

Component public API (interaction with environment)

Slide 30

Slide 30 text

Component inputs outputs Components have a well-defined API (events) (properties)

Slide 31

Slide 31 text

Input item [item]="ball"

Slide 32

Slide 32 text

Output (banana) banana ="eat()"

Slide 33

Slide 33 text

Input + Output ( 2 way binding sugar ) [(ngModel)] ngModel ="someVal"

Slide 34

Slide 34 text

TalkCmp talk: null myTalk: 'hello' Input in action

Slide 35

Slide 35 text

TalkCmp talk: null 'hello' myTalk: 'hello' Input in action

Slide 36

Slide 36 text

TalkCmp talk: 'hello' myTalk: 'hello' Input in action

Slide 37

Slide 37 text

TalkCmp talk: 'hey' Input in action myTalk: 'hello'

Slide 38

Slide 38 text

One way data binding!

Slide 39

Slide 39 text

TalkCmp Output in action

Slide 40

Slide 40 text

TalkCmp Output in action

Slide 41

Slide 41 text

TalkCmp rate! Output in action

Slide 42

Slide 42 text

TalkCmp onRate() Output in action

Slide 43

Slide 43 text

talk.componet.ts @Component({ selector: 'talk', templateUrl: 'talk.component.html', directives: [FormattedRating, WatchButton, RateButton] }) class TalkComponent { talk: Talk; rate: EventEmitter = new EventEmitter(); } @Input() @Output()

Slide 44

Slide 44 text

[prop]="someExp" [prop]="someExp" Parent -> Child (event)="onEvent()" (event)="onEvent()" Child -> Parent Components have a well-defined API

Slide 45

Slide 45 text

Component life cycle

Slide 46

Slide 46 text

Components have an intuitive lifecycle OnChanges OnInit DoCheck AfterContentInit AfterContentChecked AfterViewInit AfterViewChecked OnDestroy

Slide 47

Slide 47 text

@Component({ selector: 'talk', templateUrl: 'talk.html' }) class TalkComponent implements AfterViewInit { @ViewChild(ChildCmp) child; ngAfterViewInit () { // do something with child } } Component Lifecycle

Slide 48

Slide 48 text

Component host interaction DOM

Slide 49

Slide 49 text

@Directive({ selector: '[trimmed-input]' }) class TrimmedInput { } @HostListener('input', ['$event.target.value']) onValueUpdate(updatedValue: string) { this.value = updatedValue.trim(); } Components can interact with their host value @HostBinding() value: string;

Slide 50

Slide 50 text

There is no DOM

Slide 51

Slide 51 text

Components are self-describing ● Knows how to interact with the host element ● Knows how to render itself ● Configures its dependencies ● Isolated / Modular

Slide 52

Slide 52 text

Components API ● Component definition ● Inputs / Outputs ● Lifecycle hooks ● Host element interaction

Slide 53

Slide 53 text

Dependency Injection

Slide 54

Slide 54 text

// talks-app-backend.service.ts class TalksAppBackend { fetchTalks() { return [ { name: 'Are we there yet?' }, { name: 'The value of values' } ]; } } Angular 2 Service

Slide 55

Slide 55 text

// talk-list.component.ts @Component({ selector: 'talk-list', templateUrl: 'talk-list.html' }) class TalkListComponent { constructor() { //..get the data } } Talk-list.component.ts

Slide 56

Slide 56 text

// TalkList.ts class TalkListComponent { constructor() { this.backend = new TalksAppBackend(); this.talks = this.backend.fetchTalks(); } } Provide the service?

Slide 57

Slide 57 text

Component Service Impl depends on is provided

Slide 58

Slide 58 text

Component Service Impl Service Interface is provided implements depends on Injector

Slide 59

Slide 59 text

// talk-list.component.ts @Component({ selector: 'talk-list', templateUrl: 'talk-list.html' }) class TalkListComponent implements OnInit { constructor(private backend: TalksAppBackend) {} ngOnInit() { this.talks = backend.fetchTalks(); } } Dependency Injection

Slide 60

Slide 60 text

Where did that (Service) come from?

Slide 61

Slide 61 text

// TalkList.ts @Component({selector: 'talk-list'}) class TalkList implements OnInit { constructor(private backend: TalksAppBackend) {} ngOnInit() { this.talks = backend.fetchTalks(); } } Dependency Injection // app.ts @Component({ selector: 'talk-app', providers: [TalksAppBackend] }) class Application {}

Slide 62

Slide 62 text

Hierarchical DI

Slide 63

Slide 63 text

Hierarchical DI @Component({ providers: [TalkAppBackend] }) class TalkList {} @Component({}) class Talk { constructor(t:TalkAppBackend){} }

Slide 64

Slide 64 text

Hierarchical DI @Component({}) class TalkList {} @Component({ providers: [TalkAppBackend] }) class Talk { constructor(t:TalkAppBackend){} }

Slide 65

Slide 65 text

Dependency Injection Single API

Slide 66

Slide 66 text

class TalkList { constructor( elRef: ElementRef, backend: TalksAppBackend, ancestor:AncestorComponent ) {} } Dependency Injection

Slide 67

Slide 67 text

● Decoupled Code ● Testability ● Single DI API ● Hierarchical DI Dependency Injection

Slide 68

Slide 68 text

Change Detection

Slide 69

Slide 69 text

const appState = { filters: { speaker: "Rich Hickey" }, talks: [ { title: "Are We There Yet?", speaker: "Rich Hickey", yourRating: null, rating: 9.1 } ] } 9.9 9.9

Slide 70

Slide 70 text

Order guarantee: Parent before Child

Slide 71

Slide 71 text

Digest TTL = 1

Slide 72

Slide 72 text

● Tree ● Predictable ● Digest TTL = 1 ● Performance Change detection

Slide 73

Slide 73 text

I know Angular 2

Slide 74

Slide 74 text

Wanna know more? ● angular.io ● Thoughtram blog ● Angular 2 - High Voltage collection ● http://victorsavkin.com ● egghead.io

Slide 75

Slide 75 text

Thank you! @martin_hotell