Angular 2 fundamentals

Angular 1 helped us to build amazing apps with ease... but today's web apps are facing new challenges, going even beyond web platform.

How to solve them you may ask... Well let me tell you that there is a new Angular. Angular 2 at your service...

Martin will tell you all you need to know to get started with this new and shinny multi-platform framework

Transcript

1. fundamentals Angular 2
2. One framework Many platforms
3. Martin Hochel @martin_hotell github.com/Hotell software engineer @embedit typeof whoAmI
4. Angular 2 Fast Powerful Clean Easy
5. Angular 2 build upon new standards ES 2015 ES next
6. No Types Angular 2 speaks multiple languages Types Javascript ES 5 ES 2015
7. Angular 2 is cross platform
8. Angular 2 renders everywhere App Angular NativeScript React Native Universal Web Worker DOM
9. Angular 2 app architecture Redux
11. Let’s learn Angular 2
12. Angular 2 comes with - HTML Parser - Dependency Injection - Router - Forms (data/template driven) - HTTP - Animations - I18N and A11Y - Testing
13. Whoa! So many things!
14. It’s easy, don’t worry
15. Core concepts
16. • Components • Dependency Injection • Change Detection Angular 2 Core Concepts
17. Talks Application • Browse • Filter • Watch • Rate
18. Components
19. Tech Talk App Components • Root/App • Filters • Talks • Talk
20. Component Tree
21. Root/App Tech Talk App Components Talks Filter Talk Talk
22. What happened to directives? ( curious Angular 1 dev is asking )
23. Component = elements Directive = attributes Template
24. class TalkComponent { talk: Talk; rate: EventEmitter = new EventEmitter(); } talk.componet.ts @Component({ selector: 'talk', templateUrl: 'talk.html', directives: [FormattedRating, WatchButton, RateButton] })
25. What is the @ thing?
26. ES.next decorators class C { @enumerable(false) method() { } } function enumerable(value) { return function (target, key, descriptor) { descriptor.enumerable = value; } }
27. class TalkComponent { talk: Talk; rate: EventEmitter = new EventEmitter(); } talk.componet.ts @Component({ selector: 'talk', templateUrl: 'talk.html', directives: [FormattedRating, WatchButton, RateButton] })
28. {{ talk.title }} {{ talk.speaker }} <formatted-rating [rating]=“talk.rating" ></formatted-rating> <watch-button [talk]="talk" ></watch-button> <rate-button [talk]="talk" ></rate-button> talk.html class TalkComponent { talk: Talk; rate: EventEmitter = new EventEmitter(); } @Component({ selector: 'talk', templateUrl: 'talk.html', directives: [ FormattedRating, WatchButton, RateButton ] })
29. Component public API (interaction with environment)
30. Component inputs outputs Components have a well-defined API (events) (properties)
31. <box [item]="ball" > Input item [item]="ball"
32. Output <palm-tree (banana)="eat()" > (banana) banana ="eat()"
33. <input [(ngModel)]="someVal"> Input + Output ( 2 way binding sugar ) [(ngModel)] ngModel ="someVal"
34. TalkCmp talk: null <talk-cmp [talk]="myTalk" ></talk-cmp> myTalk: 'hello' Input in action
35. TalkCmp talk: null <talk-cmp [talk]="myTalk" ></talk-cmp> 'hello' myTalk: 'hello' Input in action
36. TalkCmp talk: 'hello' <talk-cmp [talk]="myTalk" ></talk-cmp> myTalk: 'hello' Input in action
37. TalkCmp talk: 'hey' Input in action <talk-cmp [talk]="myTalk" ></talk-cmp> myTalk: 'hello'
38. One way data binding!
39. TalkCmp <talk-cmp [talk]="myTalk" ></talk-cmp> Output in action
40. TalkCmp <talk-cmp [talk]="myTalk" (rate)="onRate($event)" ></talk-cmp> Output in action
41. TalkCmp rate! <talk-cmp [talk]="myTalk" (rate)="onRate($event)" ></talk-cmp> Output in action
42. TalkCmp <talk-cmp [talk]="myTalk" (rate)="onRate($event)" ></talk-cmp> onRate() Output in action
43. talk.componet.ts @Component({ selector: 'talk', templateUrl: 'talk.component.html', directives: [FormattedRating, WatchButton, RateButton] }) class TalkComponent { talk: Talk; rate: EventEmitter = new EventEmitter(); } @Input() @Output()
44. [prop]="someExp" [prop]="someExp" Parent -> Child (event)="onEvent()" (event)="onEvent()" Child -> Parent Components have a well-defined API
45. Component life cycle
46. Components have an intuitive lifecycle OnChanges OnInit DoCheck AfterContentInit AfterContentChecked AfterViewInit AfterViewChecked OnDestroy
47. @Component({ selector: 'talk', templateUrl: 'talk.html' }) class TalkComponent implements AfterViewInit { @ViewChild(ChildCmp) child; ngAfterViewInit () { // do something with child } } Component Lifecycle
48. Component host interaction DOM
49. @Directive({ selector: '[trimmed-input]' }) class TrimmedInput { } @HostListener('input', ['$event.target.value']) onValueUpdate(updatedValue: string) { this.value = updatedValue.trim(); } Components can interact with their host <input type="text" trimmed-input> value @HostBinding() value: string;
50. There is no DOM
51. Components are self-describing • Knows how to interact with the host element • Knows how to render itself • Configures its dependencies • Isolated / Modular
52. Components API • Component definition • Inputs / Outputs • Lifecycle hooks • Host element interaction
53. Dependency Injection
54. // talks-app-backend.service.ts class TalksAppBackend { fetchTalks() { return [ { name: 'Are we there yet?' }, { name: 'The value of values' } ]; } } Angular 2 Service
55. // talk-list.component.ts @Component({ selector: 'talk-list', templateUrl: 'talk-list.html' }) class TalkListComponent { constructor() { //..get the data } } Talk-list.component.ts
56. // TalkList.ts class TalkListComponent { constructor() { this.backend = new TalksAppBackend(); this.talks = this.backend.fetchTalks(); } } Provide the service?
57. Component Service Impl depends on is provided
58. Component Service Impl Service Interface is provided implements depends on Injector
59. // 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
60. Where did that (Service) come from?
61. // 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 {}
62. Hierarchical DI
63. Hierarchical DI @Component({ providers: [TalkAppBackend] }) class TalkList {} @Component({}) class Talk { constructor(t:TalkAppBackend){} }
64. Hierarchical DI @Component({}) class TalkList {} @Component({ providers: [TalkAppBackend] }) class Talk { constructor(t:TalkAppBackend){} }
65. Dependency Injection Single API
66. class TalkList { constructor( elRef: ElementRef, backend: TalksAppBackend, ancestor:AncestorComponent ) {} } Dependency Injection
67. • Decoupled Code • Testability • Single DI API • Hierarchical DI Dependency Injection
68. Change Detection
69. const appState = { filters: { speaker: "Rich Hickey" }, talks: [ { title: "Are We There Yet?", speaker: "Rich Hickey", yourRating: null, rating: 9.1 } ] } 9.9 9.9
70. Order guarantee: Parent before Child
71. Digest TTL = 1
72. • Tree • Predictable • Digest TTL = 1 • Performance Change detection
73. I know Angular 2
74. Wanna know more? • angular.io • Thoughtram blog • Angular 2 - High Voltage collection • http://victorsavkin.com • egghead.io
75. Thank you! @martin_hotell